Bootstrap is a free collection of tools for creating websites and web applications in responsive web design using this css framework which supports mobiles,tablets and desktops.
Note: Before you include bootstrap.min.js, you should even include jquery. Without jquery bootstrap wont work as many of components of bootstrap are dependent on jquery. Hence have like below for sure..
Mandatory add meta tag for viewport which enables support for mobiles and tablets. Like <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>.
Wanna see the difference between responsive and non responsive design??
Just open the two following links in different tabs first..
Now click restore down as shown below..
Now drag it to left and right to see the difference between responsive and non responsive websites.
.container for a responsive fixed width container.Use
.container-fluid for a full width container, spanning the entire width of your viewport.
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-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
.col-xs-4are 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
- 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.
- Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three
- 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.
- 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, 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.
|Extra small devicesPhones (<768px)||Small devices Tablets (≥768px)||Medium devices Desktops (≥992px)||Large devices Desktops (≥1200px)|
|Grid behavior||Horizontal at all times||Collapsed to start, horizontal above breakpoints|
|Container width||None (auto)||750px||970px||1170px|
|# of columns||12|
From the above image i hope you can understand that default page width/container will be divided in to 12 cols. We can either use col-xs/col-sm/col-md/col-lg to divide columns. Here we consider col-md in dividing. If we want 12 cols in a row, you should have class row where inside you shud have col-md-1 for 12 times. Similarly if you need 3 cols have col-md-4,for 2 cols have col-md-6 and 1 column col-md-12.
<div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
If you want to have this grid options for all mobiles,tablets and desktops..
<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>
With the four tiers of grids available you’re bound to run into issues where, at certain breakpoints, your columns don’t clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix
For the above image if we use clearfix all column grid heights will be appeared to be same.
To nest your content with the default grid, add a new
.row and set of
.col-sm-* columns within an existing
.col-sm-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).
<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>
Easily change the order of our built-in grid columns with
.col-md-pull-* modifier classes.
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
Bootstrap’s global default
font-size is 14px, with a
line-height of 1.428. This is applied to the
<body> and all paragraphs. In addition,
<p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).
Lead body copy
Make a paragraph stand out by adding
Inline text elements
For highlighting a run of text due to its relevance in another context, use the
<mark> tag. – Market text
For indicating blocks of text that have been deleted use the
<del> tag. – Deleted text
For indicating blocks of text that are no longer relevant use the
<s> tag. – Strikethrough text
For indicating additions to the document use the
<ins> tag. – Inserted text
To underline text use the
<u> tag. – Underline text
For de-emphasizing inline or blocks of text, use the
<small> tag to set text at 85% the size of the parent. Heading elements receive their own
font-size for nested
You may alternatively use an inline element with
.small in place of any
For emphasizing a snippet of text with a heavier font-weight. <strong>tag for bold
For emphasizing a snippet of text with italics. <em> for italics
Alignments of text:
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
Tables: For basic styling—light padding and only horizontal dividers—add the base class
.table to any
<table class="table"> ... </table> Use
.table-stripedto add zebra-striping to any table row within the
<table class="table table-striped"> ... </table>
Add .table-bordered for borders on all sides of the table and cells.
.table-hover to enable a hover state on table rows within a
.table-condensed to make tables more compact by cutting cell padding in half.
||Applies the hover color to a particular row or cell|
||Indicates a successful or positive action|
||Indicates a neutral informative change or action|
||Indicates a warning that might need attention|
||Indicates a dangerous or potentially negative action|
Create responsive tables by wrapping any
.table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
Individual form controls automatically receive some global styling. All textual
<select> elements with
.form-control are set to
width: 100%; by default. Wrap labels and controls in
.form-group for optimum spacing.
.form-inline to your
<form> for left-aligned and inline-block controls.
<input type="text" class="form-control" placeholder="Text input">
<div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div>
<button type="button" class="btn btn-default">Default</button>
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
<img src="..." class="img-responsive" alt="Responsive image">
<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">
Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.