Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted November 19th, 2015
About Bootstrap

Bootstrap is a powerful front-end framework for faster and easier web development. It includes HTML and CSS based design templates for common user interface components like Typography, Forms, Buttons, Tables, Navigations and many other as well as optional JavaScript extensions. Bootstrap also gives us an ability to create responsive layout with much less efforts.

Advantages of Using Bootstrap

  • Save lots of time — We can save lots of time and efforts using the Bootstrap predefined design templates and classes.
  • Responsive features — Using Bootstrap we can easily create responsive designs. Bootstrap responsive features make our web pages to appear more appropriately on different screen resolutions without any change in markup.
  • Consistent design — All Bootstrap components share the same design templates and styles through a central library.
  • Easy to use — Bootstrap is very easy to use. Anybody with the basic working
  • Compatible with browsers — Bootstrap is created with modern browsers in mind and it is compatible with all modern browsers such as Mozilla Firefox, Google Chrome, Safari, Internet Explorer, and Opera.
  • Open Source — It is completely free to download and use.

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype:

 <!DOCTYPE html>
<html lang="en">
  ...
</html>

Bootstrap Grid System

The Bootstrap grid system provides the quick and easy way to create the layouts of the web pages.Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Bootstrap 3 includes predefined grid classes for quickly making grid layouts for different types of devices like cell phones, tablets, laptops and desktops, etc. For example, you can use the .col-xs-* class to create grid columns for extra small devices like cell phones, similarly the .col-sm-* class for small screen devices like tablets, the .col-md-* class for medium size devices like desktops and the .col-lg-* for large desktop screens.

Applying any .col-sm-* class to an element will not only affect its styling on small devices, but also on medium and large devices having a screen size greater than or equal to 768px (i.e. ≥768px) if .col-md-* and .col-lg-* class is not present. Similarly the .col-md-* class will not only affect the styling of elements on medium devices, but also on large devices if a .col-lg-* class is not present.

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.
  • 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.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices.

Creating Two Column Layouts

Bootstrap grid system is based on 12 columns, so to keep the columns in a one line (i.e. side by side), the sum of the grid column numbers in each row should be equal to 12. In this example we will find the numbers of grid columns (i.e. col-sm-*) add up to twelve (6+6, 4+8 and 3+9) for every row.

<div class="container">
    <!--Row with two equal columns-->
    <div class="row">
        <div class="col-sm-6"><!--Column left--></div>
        <div class="col-sm-6"><!--Column right--></div>
    </div>

    <!--Row with two columns divided in 1:2 ratio-->
    <div class="row">
        <div class="col-sm-4"><!--Column left--></div>
        <div class="col-sm-8"><!--Column right--></div>
    </div>

    <!--Row with two columns divided in 1:3 ratio-->
    <div class="row">
        <div class="col-sm-3"><!--Column left--></div>
        <div class="col-sm-9"><!--Column right--></div>
    </div>
</div>

Example of Bootstrap Grid For Small Devices

Small devices are defined as having a screen width from 768 pixels to 991 pixels. For these devices we will use the .col-sm-* classes.

We will add the following classes to our two columns:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

The following example shows how this grid works for small devices:

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3" style="background-color:red;">
      <p>Welcome...</p>
    </div>
    <div class="col-sm-9" style="background-color:red;">
      <p>Welcome to class...</p>
    </div>
  </div>
</div>

Example of Bootstrap Grid For Medium Devices

Medium devices are defined as having a screen width from 992 pixels to 1199 pixels.
For medium devices we will use the .col-md-* classes.

We will add the following classes to our two columns:

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

The following example shows how this grid works for medium devices:

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6" style="background-color:blue;">
      <p>Welcome...</p>
    </div>
    <div class="col-sm-9 col-md-6" style="background-color:blue;">
      <p>Welcome to the class...</p>
    </div>
  </div>
</div>

Example of Bootstrap Grid For Large Devices

Large devices are defined as having a screen width from 1200 pixels and above.
For large devices we will use the .col-lg-* classes.

We will add the following classes to our two columns:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

The following example shows how this grid works for medium devices:

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6" style="background-color:blue;">
      <p>Welcome...</p>
    </div>
    <div class="col-sm-9 col-md-6" style="background-color:blue;">
      <p>Welcome to the class...</p>
    </div>
  </div>
</div>

Example: Mobile, tablet, desktop
* This is a combined example which show how we use grid system for different layouts.

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Posted by Silky Nanda

Leave a Reply

Your email address will not be published. Required fields are marked *