<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Define Media :
We will define display media by define categorized device widths using @media() attribute. In bootstrap we are having categorized media widths for responsive mobile first design.
//for extra small devices i.e, phones
@media (max-width: 768px) { ... }
// for small devices i.e, tablets
@media (min-width: 768px) and (max-width: 992px) { ... }
// for medium devices i.e., desktops
@media (min-width: 992px) and (max-width: 1200px) { ... }
//for large devices i.e., large desktops
@media (min-width: 1200px) { ... }
In Bootstrap we are having containers to set the content automatically to center of the page for respective device width. The container is defined with .container , .container-fluid class in Bootstrap CSS.
<div class="container">
......
<p>Bootstrap container with fixed width<p>
......
</div>
<div class=" container-fluid">
......
<p>Bootstrap container with full width<p>
......
</div>
Typography:
Usually we will set the background color by defining background-color:#fff; in body.Bootstrap sets basic global display and typography and links.
In bootstrap we are having some attributes to define typography for global display like @font-family-base, @font-size-base and @line-height-base. To display link color we are having @link-color attribute.
Usually we define heading tags as h1, h2, h3, h4, h5, h6. In bootstrap along with these tags we have also available .h1, .h2, .h3, .h4, .h5, .h6 classes. similarly we have small tag and .small class available to display small text along with the heading.
<div class="container">
<h1>The heading one</h1>
<h2>The heading two</h2>
<h3>The heading three</h3>
<p class="h4">The heading four</p>
<p class="h5">The heading five</p>
<p class="h6">The heading six</p>
<br />
<p class="h1">The heading one <small>small text with heading</small></p>
<p class="h2">The heading two <small>small text with heading</small></p>
<p class="h3">The heading three <small>small text with heading</small></p>
<h4>The heading four <span class="small">small text with heading</span></h4>
<h5>The heading five <span class="small">small text with heading</span></h5>
<h6>The heading six <span class="small">small text with heading</span></h6>
</div>Here we have defined heading and small text tags are in both the ways as we already discussed.
The result page is as shown below
Similarly we have class for alignment, Here alignment class is alignment type comes along with prefix class name text- so this is very easy to define
<div class="container">
<div class="text-center">This text is placed center </div>
<div class="text-left">This text is placed left</div>
<div class="text-right">This text is placed right</div>
<div class="text-justify">This text is aligned justify.This is very easy to define alignment class in bootstrap</div>
</div>The result page is as shown below
List tags are much usable in front end web development. Here we have simple list class .list-unstyle , .list-inline, list-group, list-group-items to define lists.
.list-unstyle will remove the current list style, it is majorly used at immediate child list.
.list-inline will used to display list items in one line.
.list-group, list-group-items used to display list items as a group
<div class="container">
<ul class="list-group">
<li class="list-group-item">list group items</li>
<li class="list-group-item">list group items</li>
</ul>
<br />
<ul class="list-inline">
<li>In line items</li>
<li>In line items</li>
<li>In line items</li>
</ul>
<br />
<ul>
<li>list items</li>
<li>list items</li>
<li class="list-unstyled">chaild list</li>
<li class="list-unstyled">chaild list</li>
<li class="list-unstyled">chaild list</li>
<li>list items</li>
<li>list items</li>
</ul>
</div>The resultant page is as shown below:
There is few more useful classes in Bootstrap.
.lead class is for slight larger and stand out text for a paragraph.
.blockquote-reverse class for align blockquote tag content at right side.
.initialism class is for slightly smaller text for abbr tag to define abbreviation.
<div class="container">
<p>This is plain text in the bootstrap</p>
<p class="lead">This is text with .lead class in bootstrap</p>
<br />
<blockquote>This is text from blockquote</blockquote>
<blockquote class="blockquote-reverse">Text from blockquote with .blockquote-reverse class</blockquote>
<br />
Normal abbr tag is:<abbr title="DotNetFunda"> DNF </abbr>
<abbr title="DotNetFunda" class="initialism"> DNF </abbr>is abbr tag with initialism class
</div>The resultant page is as shown below:
Conclusion