Working with Mobile first layout and Typography in Bootstrap

Chakravarthi
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 8497 red flag
Rating: 4 out of 5  
 1 vote(s)

In the previous article, we learnt how to include bootstrap in our project.now we are going to learn how to crate mobile first layouts and useful bootstrap predefined styles in Typography.
Recommendation
Read Introduction to Bootstrap before this article.

Introduction

Bootstrap comes with predefined CSS, that allows us to create responsive designs faster and very easy way. 

Using the code


To create mobile first layout make sure to define meta tag with name is Viewport and content is width=device-width and for touch zooming include initial-scale = 1.0 in content.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If we want to disable zooming in mobile devices just add user-scalable = no to the viewport meta tag and also include maximum-scale = 1.0
<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-baseTo display link color we are having  @link-color attribute.

Usually we define heading tags as h1, h2, h3, h4, h5h6. 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>&nbsp;&nbsp;&nbsp;
<abbr title="DotNetFunda" class="initialism"> DNF </abbr>is abbr tag with initialism class
    </div>

The resultant page is as shown below:

Conclusion
In this article, we have learnt how to use typography classes in bootstrap. Hope this article was helpful.
We will see bootstrap grid system in following article.

Thanks for reading.

Recommendation
Read Working with Grid system in Bootstrap after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Chakravarthi
Full Name: Annabattula Ashok Chakravarthi
Member Level: Starter
Member Status: Member
Member Since: 7/4/2013 11:49:03 PM
Country: India
Chakravarthi
http://www.dotnetfunda.com

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)