Get Started / Beginner

Twitter Bootstrap

B

The Most popular Front-end framework for developing responsive projects on the web.

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/

Containers

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

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

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.

Columns

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

  • Bootstrap Row

Bootsrap Columns can be used in 12 units by default. Each Row can be divided into 12 sections!

  • 1 Unit
  • 2 Unit
  • 3 Unit
  • 4 Unit
  • ...
  • ...
  • ...
  • 11 Unit
  • 12 Unit (Full Stretch)

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 -

  • Container or Fluid Container cannot be nested
  • Row needs to be inside a container or fluid container
  • Column needs to be inside a Row

Refer to the image below for a visual representation of the Grid Model.

Responsive Columns

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.

.col-xs-$ Extra Small Phones Less than 768px
.col-sm-$ Small Devices Tablets 768px and Up
.col-md-$ Medium Devices Desktops 992px and Up
.col-lg-$ Large Devices Large Desktops 1200px and Up

Grid Settings allow you to create different structure on these four screen sizes using Bootstrap Classes.

Accessing Grid Settings

Click anywhere inside the grid structure (Bootstrap col-*-* classes) and you should be able to access the grid settings from the HTML Style Panel.

Using Grid Settings

Grids can be customized using 4 breakpoints (as per the Bootstrap Grid Classes defined above) -

Check out Grid Settings in Action for creating highly customized column structures

Fire up your creativity and don't get constrained just because you are working inside a browser and not Photoshop!

Got Questions about StackHive?

For Business Partnerships business@stackhive.com

Get Started for Free.

Take the first step by creating a StackHive Account.