Adaptive design using Bootstrap 3 Grid System

Adaptive design using Bootstrap 3 Grid System

0 75370
Adaptive design using Bootstrap 3 Grid System

Bootstrap 3 tutorial. In this tutorial we will talk about the main building blocks that are common to most websites and about the creation of adaptive layout using a grid system of bootstrap3.

As for the main blocks (or areas) of the site, here are the following:

  • 1. header – upper area with logo, main menu (sometimes), additional information (contacts, extra language switches), etc.
  • 2. footer – the lowest part of a web page that can contain additional menu block with a subscription, contacts, social icons, copyright etc.
  • 3. content – is usually just below the header. The main part of the content varies depending on the subject of the site, if this is a block, there will be some content (post, page, etc.), if this is an online store, there will be a product (product page, the category, etc).
  • 4. sidebar – it is not in all designs, however sometimes there can be even several sidebars. Sidebar is usually located on the left or right of the main content and contains a variety of widgets.

Now I probably will stop describing, because there is no reason to expand the list of the above areas that are common to most sites.

Live Demo

Features using the grid layout

Below is a layout code for the formation of four columns using the the grid:

<div class="container">
  <div class="row">
    <div class="col-md-3"><p>Column 1</p></div>
    <div class="col-md-3"><p>Column 2</p></div>
    <div class="col-md-3"><p>Column 3</p></div>
    <div class="col-md-3"><p>Column 4</p></div>
  </div>
</div>

From the code above, we can see that for the formation of the structure of the site we can use three main classes: .container, .row, .col- *.

.container – is wrapping the entire contents of the block, sets the width of the main website

.row – block wrapper for columns. It has a negative padding

.col-* – block column

Now let’s talk more about the rules of construction layout using grid.

  • Rows (.rows) should be placed within .container (fixed-width) or .container-fluid (full width) for proper alignment and filling.
  • Use rows (.rows) to create a horizontal column group.
  • The content should be placed in the columns and columns can only be direct descendants of rows.
  • Standard classes of the grid such as .row and .col-xs-4 are used to quickly create the grid layout.
  • Columns have padding, which for the first and last column is offset negative margin indented in .row.
  • Grid columns are based on the maximum number of columns – 12, ie, to create three blocks, then you need to use a class .col-md-4.
  • If a row contains more than 12 columns (the total width of all columns), then each subsequent colony will be moved to the new row.

The table below shows css classes for grid items (columns):

Extra small devices
Phones (<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)

Download css grid bootstrap 3 to your computer

In order to download a minimized version (less files) of the bootstrap library, goto ‘Customize and download’ page and remove all ticks, except Grid System (this is if you want to download only the styles to form a layout using the grid)

download bootstrap

And then we can connect the Bootstrap Grid System to your page:

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

Making the skeleton layout of the site with the bootstrap3 grid system

We will prepare the skeleton without real content, ie there will only conditional blocks. Initially, I thought about to make it for an online store, as in this case it will be more clearly displayed the behavior of blocks when you change the width of the browser.

In the layout there will be the following areas:

1. Site header with logo and some content

2. Sidebar

3. Footer, divided into an upper part with 4 blocks of the menu and the lower part with copyright and the area with social icons

4. Content with 8 products

skeleton layout

In addition to the main classes of the grid I added an additional block into each column with the class .well that is filled in gray (for clarity). All the .row sections have unique identifiers, in order to show that the use of the grid does not create a special depth of nesting in html coding. All blocks of columns also have their “semantic” classes.

Here is all the code of a layout using bootstrap 3 grid system:

<div id="wrapper" class="container">
  <div id="header" class="row">
    <div id="logo" class="col-md-3"><div class="well">3<br>#logo</div></div>
    <div id="header-content" class="col-md-9"><div class="well">9<br>header-content</div></div>
  </div>
  <div id="category" class="row">
    <div id="featured" class="col-md-9">
      <div class="row">
        <div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
        <div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
        <div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
        <div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
        <div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
        <div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
        <div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
        <div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
      </div>
    </div>
    <div id="sidebar" class="col-md-3"><div class="well">3<br>#sidebar</div></div>
  </div>
  <div id="footer">
    <div class="footer-top row">
      <div class="menu-footer col-sm-6 col-md-3"><div class="well">3<br>.menu-footer</div></div>
      <div class="menu-footer col-sm-6 col-md-3"><div class="well">3<br>.menu-footer</div></div>
      <div class="menu-footer col-sm-6 col-md-3"><div class="well">3<br>.menu-footer</div></div>
      <div class="menu-footer col-sm-6 col-md-3"><div class="well">3<br>.menu-footer</div></div>
    </div>
    <div class="footer-bottom row">
      <div class="copyrights col-sm-6 col-md-6"><div class="well">6<br>.copyrights</div></div>
      <div class="social-icons col-sm-6 col-md-6"><div class="well">6<br>.social-icons</div></div>
    </div>
  </div>
</div>

As it is seen from the layout, three column classes are used for the ‘product’ block: col-sm-6 col-md-4 col-lg-3.

col-lg-3 is to display our products at 4 in a row, for screens width more then 1200px

col-md-4 is to display our products at 3 in a row, for screens width more then 992px

col-sm-6 is to display our products at 2 in a row, for screens width more then 768px

Thus combining classes with the width of the block for a different screen resolution of the user device, we achieve adaptability of our design and quality and responsive display of the site.

The use of the grid during creating new websites allows automate routine approaches to similar projects and create ready-made models (solutions) for diverse tasks.

Summing up: making the layout using the bootstrap grid is rather simple and easy. And I can not say that the html structure increases too much and grows nesting depth of webpage elements because of its use. If you clean up the library file (css) for bootstrap 3 grid, you can get a size even less than 10Kb. Try it, experiment and find convenient solution that would accelerate your work and quality.


Live Demo

[sociallocker]

download in package

[/sociallocker]

SIMILAR ARTICLES


NO COMMENTS

Leave a Reply