Guide To The Basic Pillars Of Bootstrap

Bootstrap is the most popular front-end framework for developing responsive mobile first projects on the web in a much easier way. It uses HTML5, CSS, and Java Script. Bootstrap is completely free to download and use! Today, I am going to talk about the basics of Bootstrap and will go through the basic pillars of Bootstrap. Bootstrap is basically a collection of CSS + Java Script files; with the help of these libraries our normal HTML page becomes a responsive UI. To make a responsive UI we have to add our custom CSS file but with the help of the Bootstrap library you can easily make a great foundation for mobile first responsive UI. One point to remember: You still need to create your customer Css file in order to make flawless awesome web pages, or else it will be like any other Bootstrap website on the internet. Bootstrap is made using classes, and use them when you need them in your website.

Installing Bootstrap

Go to http://getbootstrap.com/



Image source: getbootstrap.com

Click on download.



Image source: http://getbootstrap.com/

If in production you want to use CDN (Content Delivery Network) we can use the following mentioned CDN links:



Image source: getbootstrap.com

For Bootstrap UI Demo, I am going to use Visual Studio IDE. Visual studio is Microsoft Integrated Development Environment for developing all kinds of applications for Microsoft and other platforms.

Create New Project



Select Empty



Add new Item and add HTML page



If you are using MVC or Web Forms templates, Bootstrap libraries are by default loaded into script and content folders as shown below. Here I am going to use an empty template as mentioned above.



If you are trying without using Visual Studio IDE you need to download bootstrap from the above mentioned links, or else you can download the CDN links as well. So I am going to copy the CDN Links from the website and paste it in my UI view.



CDN Links of Bootstrap

• Content
• Font
• Scripts
  
  
  

So now we can easily use the fonts, css, scripts in our UI. Now I am going to use local Bootstrap which we have downloaded.

• One column which takes all 12 columns.
  
  
  
  
• 2 Columns with take 6 columns each,
  
  
  
  
• 2 Columns with 2 and 10 columns,
  
  
  
  
• We can create our custom neededversion based upon your need

Note: If we create a 13th column, that will automatically take a new line, you can test the same.

Desktop View



Mobile View



BREAK POINTsin Bootstrap

The grid created applies to the devices screen width greater than or equal to the break point sizes. The way we want to display our website to the devices (desktops, tablets and phones) we use Breakpoints. We have 4 sets of Breakpoints:

• Large Devices Desktop screen >= 1200 px
• Medium devices (old desktops) >=992px
• Small devices Tablets >=768 px
• Extra small devices <768 px

Let get started with sample grid,

1. <divclass="container"> ... </div>: Responsive fixed width
2. <divclass="container-fluid">full width
   
   
   
   
3. <divclass="container-fluid"> ... </div>full width container spanning entire viewport.
   
   
   

As a simple grid content we should follow certain rules,

• Rows should be placed inside a container as mentioned above i.e.( <divclass="container"> or <divclass="container-fluid">)
• Use rows to created horizontalcolumns<divclass="row">
• Columns should be immediate children of rows<divclass="col-length-1 bg-success">Hey</div>
• If you add more than 12th grid column the 13th and vice versa will automatically take a new line.
  
  
  
  
  
• But we can see the webpage is not showing appropriatly in mobile devices. You might be wondering if I am making a fool of you that it's responsive. Let’s make them Mobile first enable UI.
  
  
• So if we want our columns to simply stack in smaller devices, use the extra small and medium device grid classes col-xs-* col-sm-*to your columns as shown below.
  
  
  
  
  1. <!--class="row" for adding a row -->
  2. <divclass="row">
  3. <!--class="col-length-1"> col-length-1 depends upon how much of 12 column grid do you want to use depending upon
  4. your need 1 means it will use 1 column width
  5. we can add a second css class by giving space
  6. bg-success will give Green color to this column
  7. -->
  8. <divclass="col-length-1 col-xs-1 col-sm-1 bg-success">Hey</div>
  9. <divclass="col-length-1 col-xs-1 col-sm-1 bg-danger">i</div>
  10. <divclass="col-length-1 col-xs-1 col-sm-1 bg-info">am</div>
  11. <divclass="col-length-1 col-xs-1 col-sm-1 bg-warning">Bootstrap.</div>
  12. <divclass="col-length-1 col-xs-1 col-sm-1 bg-primary">Bootstrap</div>
  13. <divclass="col-length-1 col-xs-1 col-sm-1 bg-success">is</div>
  14. <divclass="col-length-1 col-xs-1 col-sm-1 bg-danger">the </div>
  15. <divclass="col-length-1 col-xs-1 col-sm-1 bg-info">most </div>
  16. <divclass="col-length-1 col-xs-1 col-sm-1 bg-warning">popular.</div>
  17. <divclass="col-length-1 col-xs-1 col-sm-1 bg-primary">HTML</div>
  18. <divclass="col-length-1 col-xs-1 col-sm-1 bg-warning">CSS</div>
  19. <divclass="col-length-1 col-xs-1 col-sm-1 bg-danger">JSsframework</div>
  20. </div>
  Let make it little bit more cleared by makingcol-xs-1 col-sm-1 to col-xs-4 col-sm-4,
  
  
  
  
  1. <divclass="container-fluid">
  2. <!--class="row" for adding a row -->
  3. <divclass="row">
  4. <!--class="col-length-1"> col-length-1 depends upon how much of 12 column grid do you want to use depending upon
  5. your need 1 means it will use 1 column width
  6. we can add a second css class by giving space
  7. bg-success will give Green color to this column
  8. -->
  9. <divclass="col-length-1 col-xs-4 col-sm-4 bg-success">Hey</div>
  10. <divclass="col-length-1 col-xs-4 col-sm-4 bg-danger">i</div>
  11. <divclass="col-length-1 col-xs-4 col-sm-4 bg-info">am</div>
  12. <divclass="col-length-1 col-xs-4 col-sm-4 bg-warning">Bootstrap.</div>
  13. <divclass="col-length-1 col-xs-4 col-sm-4 bg-primary">Bootstrap</div>
  14. <divclass="col-length-1 col-xs-4 col-sm-4 bg-success">is</div>
  15. <divclass="col-length-1 col-xs-4 col-sm-4 bg-danger">the </div>
  16. <divclass="col-length-1 col-xs-4 col-sm-4 bg-info">most </div>
  17. <divclass="col-length-1 col-xs-4 col-sm-4 bg-warning">popular.</div>
  18. <divclass="col-length-1 col-xs-4 col-sm-4 bg-primary">HTML</div>
  19. <divclass="col-length-1 col-xs-4 col-sm-4 bg-warning">CSS</div>
  20. <divclass="col-length-1 col-xs-4 col-sm-4 bg-danger">JSsframework</div>
  21. </div>
  22. </div>
  
  class="col-length-1 col-xs-4 col-sm-4 bg-success" means if it’s is a large screen we want to take it as one column, if it’s small we want it to be 4 and lastly for extra small also 4 columns.
  
  Note: If we want our UI to be responsive for all the break points we have to define all sets of break in proper formats.
  
  1. <divclass="row">
  2. <!--class="col-length-1"> col-length-1 depends upon how much of 12 column grid do you want to use depending upon
  3. your need 1 means it will use 1 column width
  4. we can add a second css class by giving space
  5. bg-success will give Green color to this column
  6. -->
  7. <divclass="col-length-1 col-xs-4 col-sm-2 bg-success">Hey</div>
  8. <divclass="col-length-1 col-xs-4 col-sm-2 bg-danger">i</div>
  9. <divclass="col-length-1 col-xs-4 col-sm-2 bg-info">am</div>
  10. <divclass="col-length-1 col-xs-4 col-sm-2 bg-warning">Bootstrap.</div>
  11. <divclass="col-length-1 col-xs-4 col-sm-2 bg-primary">Bootstrap</div>
  12. <divclass="col-length-1 col-xs-4 col-sm-2 bg-success">is</div>
  13. <divclass="col-length-1 col-xs-4 col-sm-2 bg-danger">the </div>
  14. <divclass="col-length-1 col-xs-4 col-sm-2 bg-info">most </div>
  15. <divclass="col-length-1 col-xs-4 col-sm-2 bg-warning">popular.</div>
  16. <divclass="col-length-1 col-xs-4 col-sm-2 bg-primary">HTML</div>
  17. <divclass="col-length-1 col-xs-4 col-sm-2 bg-warning">CSS</div>
  18. <divclass="col-length-1 col-xs-4 col-sm-2 bg-danger">JSsframework</div>
  19. </div>

Nesting columns

Nesting your content inside a Grid: Add a new row with col-lg-9. It’s is not required to always use 12 columns.

Offsetting columns