Bootstrap is a popular open source CSS framework developed by @mdo and @fat. Built specifically for responsive web development, it provides tons of easy to extend functionalities like Grid System, Styled Forms and Tables, Buttons etc. For full understanding of Bootstrap, please visit http://getbootstrap.com/css/
Bootstrap's grid structure is unparalleled and widely used for creating responsive projects. In order to use it inside StackHive, you'll need to adhere to the guidelines put forth by the Bootstrap Team. StackHive supports all stable versions of Boostrap (Bootstrap 2 and Bootstrap 3)
To get started with basic responsive designing, you need to understand the basic grid structuring -
Bootstrap Container is a DIV Element with a "container" class and a fixed width for different devices. In general, you should use the container element when you want to limit the size of the content on large screens
Bootstrap Container has a fixed which varies depending on the screen size.
Bootstrap Fluid Container is a DIV Element with a "container-fluid" class. It is a full width container with a fixed left and right padding of 15 px. Use the fluid container to strech your page to the full screen size instead of centering the content.
Bootstrap Fluid Container has a default width of 100% (default display of a div is "block") for all screen sizes.
Bootstrap's grid structure is built upon responsive rows and columns that help you in controlling the structures on different screen sizes.
Bootstrap Rows are DIVs with class "row" added to them. They act as a container for the columns
Bootsrap Columns can be used in 12 units by default. Each Row can be divided into 12 sections!
Using the combination of 1-12 column units you can create any possible structure you want like - equal size three columns (4,4,4), Sidebar Column (3,9) etc. All you need to keep in mind is that the sum of the column needs to be 12.
Also, the grid structure should follow the rules -
Refer to the image below for a visual representation of the Grid Model.
Boopstrap provides different column classes that help you in controlling the grid structure on various screen sizes. This is the best part about the new grid system. You could realistically have your site show a different grid on 4 different browser sizes. Below is the breakdown of the different sizes.
||Extra Small||Phones Less than 768px|
||Small Devices||Tablets 768px and Up|
||Medium Devices||Desktops 992px and Up|
||Large Devices||Large Desktops 1200px and Up|
Grid Settings allow you to create different structure on these four screen sizes using Bootstrap Classes.
Click anywhere inside the grid structure (Bootstrap
col-*-* classes) and you should be able to access the grid settings from the HTML Style Panel.
Grids can be customized using 4 breakpoints (as per the Bootstrap Grid Classes defined above) -
Control the grid on large screens as well as the number of columns using this section of Grid Settings. This section is the main driver and allows you to narrow down the commong choices for other screen sizes.
This section of the setting allows you to control the grid structure for medium screens like Small Laptops and Tablet Landscape screen sizes.
Control your grid structure on Tablet Portrait screen sizes using this section
You can customize how your grid will look on very small screens (which generally includes mobile phones) using this section.
Fire up your creativity and don't get constrained just because you are working inside a browser and not Photoshop!