Quick Reference Study Notes for Bootstrap 3.x (Advanced)

Bootstrap 3

Bootstrap 3 is a flexible and a popular mobile-responsive framework. A frontend Bootstrap developer needs a basic guide to all its classes and structures. So, here is the list of some of the best Bootstrap 3  sheets as follows :

 


 

Bootstrap is a free and open-source front-end Web framework. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many earlier web frameworks,

it concerns itself with front-end development only.

The Bootstrap  Sheets are no less than bookmarks for Bootstrap frontend developers. They don’t have to memorize all the Bootstrap components. All they need is to download Bootstrap 3/4 Sheets. As to forget some of the data is not a big thing, so these Bootstrap classes sheets will act as a great reference guide.


 

WHY SHOULD I CHOOSE THE BOOTSTRAP FRAMEWORK FOR MY WEBSITE?

So, you know you need a responsive mobile site. If your site wasn’t designed to be responsive, you’ll need to redesign or retrofit it. But if you’re planning to build a responsive mobile website or application from scratch, the Bootstrap framework is an excellent choice for a few reasons.

  • Just enough customization. Not all Bootstrap sites look like Bootstrap sites—meaning, how customized your site gets is up to you. On the spectrum of front-end design, with completely coded-from-scratch sites on one end and CMS-powered sites with dropped-in templates on the other end, Bootstrap falls right in the middle. It’s the best of both worlds: A lot of the work is already done in advance, with the grid system and lots of helpful components. And with JavaScript effects and customizable Bootstrap CSS, it’s as unique as you want it to be.

  • A mobile-first, ground-up grid approach. Bootstrap gets designers to start small. If a site looks good on a small screen, it’s easy to scale it up from there, without things getting cluttered. A top-down approach in mobile design is counterintuitive; Bootstrap reinforces that, so sites stay clean and logical on the smallest screens. Bootstrap forces designers to build sites with small screens in mind, then go from there. Bootstrap’s grid-based layout approach is the key: you can use up to 12 columns in a layout, combining them for wider columns, which are organized in layout classes—extra small, small, medium, and large for phone, tablet, and desktop-sized screens.

  • It’s fast and easy to use. Bootstrap lets developers (even back-end developers) build front ends without a ton of HTML or CSS knowledge. Whether you’re applying Bootstrap to a static HTML site, a custom PHP-coded site, or a content management system (CMS), it’s flexible. Plus, it’s downloadable right from GitHub and lets developers get a lot of work done quickly.

 

Goals

  • Learn what a front-end framework is and how it can be useful

  • Understand how to properly include Bootstrap’s CSS and JavaScript and begin customizing

Prerequisites

  • Basic knowledge and understanding of HTML and CSS

Building a Basic Template with Bootstrap

Bootstrap comes with a few very simple examples to start from, but it’s just as easy to start from “scratch”, so that’s what we’ll do. First, I’ll use only Bootstrap to layout the foundation, then we’ll add our own custom style on top to make something fun and trendy.

Step one is to download Bootstrap. The zip file will come with css, fonts, and js directories. Unzip that and save the files in some directory. Bootstrap doesn’t come with any HTML, but they have a “Hello, World!” page to start on the documentation, so we’ll use that as index.html.

 

Some Important feature of Bootstrap 3 are as follow :

Grid layout

Bootstrap 3.x grid system, as opposed to its predecessor Bootstrap 2.x, is designed to be mobile first. 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:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

  • Use rows to create horizontal groups of columns.

  • Content should be placed within columns, and only columns may be immediate children of rows.

  • 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.

  • 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.

  • 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.

Depending on the device size, the grid will adopt the corresponding css class. Here is a summary of the different available size :

.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



Responsive Utilities

Sometime you simply want to hide/show a part of the DOM depending of the size of the viewing device. Bootstrap offer convenient classes for this purpose : "visible-$" and "hidden-$".

  • .visible-xs

  • .visible-sm

  • .visible-md

  • .visible-lg

  • .hidden-xs

  • .hidden-sm

  • .hidden-md

  • .hidden-lg

Here are a few examples of the grids that you can create. We'll go through some basic sites that some people might want and show how easy it is to build that site with the Bootstrap 3 grid.

Resize your browser’s width to see the different grids in action.

Simple: Large Desktop vs Mobile

Let’s say you wanted a site to have 1 column on extra small (phone) and small (tablet) devices, 2 columns on medium (medium desktop) devices, and 4 columns on large (desktop) devices.

Large Devices!

Large Devices!

Large Devices!

Large Devices!

Here is the code for that example:

          <div class="row">
               <div class="col-md-6 col-lg-3">
                   <div class="visible-lg text-success">Large Devices!</div>
                   <div class="visible-md text-warning">Medium Devices!</div>
                   <div class="visible-sm text-primary">Small Devices!</div>
                   <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
               </div>
               <div class="col-md-6 col-lg-3">
                   <div class="visible-lg text-success">Large Devices!</div>
                   <div class="visible-md text-warning">Medium Devices!</div>
                   <div class="visible-sm text-primary">Small Devices!</div>
                   <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
               </div>
               <div class="col-md-6 col-lg-3">
                   <div class="visible-lg text-success">Large Devices!</div>
                   <div class="visible-md text-warning">Medium Devices!</div>
                   <div class="visible-sm text-primary">Small Devices!</div>
                   <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
               </div>
               <div class="col-md-6 col-lg-3">
                   <div class="visible-lg text-success">Large Devices!</div>
                   <div class="visible-md text-warning">Medium Devices!</div>
                    <div class="visible-sm text-primary">Small Devices!</div>
                   <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
               </div>
           </div>
      

Intermediate: Show Extra Column on Large Desktops

This is an interesting example and one that the new grid excels at. Let’s say you have a site that has a sidebar and a main content section. For extra small devices, you want one column, main content with the sidebar stacked below it. For small and medium devices, we want sidebar and main content to sit side by side. Now for large devices, we want to utilize the space on larger devices. We want to add an extra sidebar to show more content.

I am the main content.

I am the main sidebar.

I am the secondary sidebar that only shows up on LARGE devices.

We change the size of the main content to span 6 columns on large devices to make room for our second sidebar. This is a great way to utilize the space on larger desktops. And here is the code for that example.

          <div class="row">
               <div class="col-sm-9 col-lg-6 text-danger">
                   I am the main content.
               </div>
               <div class="col-sm-3 text-warning">
                   I am the main sidebar.
               </div>
               <div class="col-lg-3 visible-lg text-success">
                   I am the secondary sidebar that only shows up on LARGE devices.
               </div>
           </div>
      

Advanced: Different Grid For Every Size

This will be a more complex example. Let’s say that at no point in our grid system do we want all of our columns to stack. For extra small devices, we want 2 columns. For small devices, we want 3 columns. For medium devices, we want 4 columns. For large devices, we want 6 columns (one that only shows on large devices).

You get the drill now. Let's just straight into the example and code.

*NOTE : "This study material is collected from multiple sources to make a quick refresh course available to students."