Bootstrap Tutorial : Grid System Bootstrap

Bootstrap Tutorial for beginners Grid System Bootstrap - How to understand gridding in Bootstrap templates

Grid System Bootstrap - Bootstrap tutorial for beginner how to understand with System Grid in bootstrap templates, What is Bootstrap Grid System? In Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases (max columns is 12).

On previews lessons, we have learn how to getting started using Bootstrap templates, just go to this link.

Understanding Grid System

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:
  1. Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  2. Use rows to create horizontal groups of columns.
  3. Content should be placed within columns, and only columns may be immediate children of rows.
  4. Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
  5. Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  6. The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
  7. Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
  8. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  9. Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.
Bootstrap Tutorial : Grid System Bootstrap

More references here http://getbootstrap.com/css/
We will learn about Grid System in bootstrap for step by step

#Three Column Bootstrap Layouts

Following this HTML source code
   <div class="container">
      <!--Row with three equal columns-->
      <div class="row">
        <div class="col-sm-4">
          it's left column
        </div>
        <div class="col-sm-4">
          it's middle column
        </div>
        <div class="col-sm-4">
          it's right column
        </div>
      </div>
    <!--Row with three columns divided in 1:4:1 ratio-->
    <div class="row">
        <div class="col-md-2">
          this is left column
        </div>
        <div class="col-md-8">
          this is middle column
        </div>
        <div class="col-md-2">
          this is right column
        </div>
      </div>
    </div>

#Bootstrap Layouts with Column Wrapping Feature

We will need Wrapping Feature for work with viewport size, The following example will create a three column layout on medium devices like laptops and desktops, as well as on tablets (e.g. Apple iPad) in landscape mode.

First, add an simple css in our idex.html file
<style type="text/css">
      /* Some custom styles to beautify this example */
      .demo-content{
          padding: 15px;
          font-size: 18px;
          min-height: 300px;
          background: #dbdfe5;
          margin-bottom: 10px;
      }
      .demo-content.bg-alt{
          background: #abb1b8;
      }
      /* Some custom media query to make
         this example even better */
      @media screen and (max-width: 991px){
          .flexible{
              min-height: 150px;
          }
      }
    </style>

Next, add wrapping feature
<div class="container">
      <!-- Bootstrap Layouts with Column Wrapping Feature -->
      <div class="row">
        <div class="col-sm-3 col-md-2">
          <div class="demo-content">.col-sm-3 .col-md-2</div>
        </div>
        <div class="col-sm-9 col-md-8">
          <div class="demo-content">.col-sm-9 .col-md-8</div>
        </div>
        <div class="col-sm-12 col-md-2">
          <div class="demo-content">.col-sm-12 .col-md-2</div>
        </div>
      </div>
    </div>

Bootstrap Grid Options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
Grid System Bootstrap

Video tutorial Grid System Bootstrap


See you next Lessons

COMMENTS

Next Recomended


Feel free to code it up and send us a pull request.

Hi everyone, let's me know how much this lesson can help your work. Please Subscribe and Follow Our Social Media 'kodeajaib[dot]com' to get Latest tutorials and will be send to your email everyday for free!, Just hit a comment if you have confused. Nice to meet you and Happy coding :) all ^^



Follow by E-Mail


Name

ADO.NET,3,Ajax,6,Android,9,AngularJS,4,ASP.NET,4,Blogger Tutorials,7,Bootstrap,7,C++,1,Codeigniter,2,Cplusplus,6,Crystal Report,6,CSharp,25,Ebook Java,2,FlyExam,1,FSharp,3,Game Development,2,Java,35,JDBC,2,Laravel,84,Lumen,2,MariaDB,2,Ms Access,3,MySQL,31,ODBC,6,OleDB,1,PHP,14,PHP Framework,5,PHP MYSQLI,9,PHP OOP,5,Python,8,Python 3,4,SQL Server,4,SQLite,4,Uncategorized,5,Vb 6,2,Vb.Net,89,Video,48,Vue Js,4,WPF,2,Yii,3,
ltr
item
KODE AJAIB: Bootstrap Tutorial : Grid System Bootstrap
Bootstrap Tutorial : Grid System Bootstrap
Bootstrap Tutorial for beginners Grid System Bootstrap - How to understand gridding in Bootstrap templates
https://2.bp.blogspot.com/-3UbE0E4YJ_c/V-4qzmZJT8I/AAAAAAAACmk/2pMV9V6gwYEYccmaeF3_xaVcvAde4JN0QCLcB/s320/bootstrap-3-tutorial-for-beginner.png
https://2.bp.blogspot.com/-3UbE0E4YJ_c/V-4qzmZJT8I/AAAAAAAACmk/2pMV9V6gwYEYccmaeF3_xaVcvAde4JN0QCLcB/s72-c/bootstrap-3-tutorial-for-beginner.png
KODE AJAIB
https://www.kodeajaib.com/2016/09/bootstrap-tutorial-grid-system-bootstrap.html
https://www.kodeajaib.com/
https://www.kodeajaib.com/
https://www.kodeajaib.com/2016/09/bootstrap-tutorial-grid-system-bootstrap.html
true
3214704946184383982
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy