Creating Form Layouts with Bootstrap

In today's world creating documents on computer has become an important task for people of all the jobs. Whether it's creating a PowerPoint presentation or a simple article on MS Word or WordPad, styling has become a major task in it. The task of designing and styling has been made a lot easier with the help of Bootstrap with the assistance of which some of the amazing designs can be produced. However, till date many users are not aware of the methods in which Bootstrap can be used, considering this we have bought forward the tutorial of bootstrap briefing about creating header, changing fonts, styling the articles. It is a very easy technique which can be used by the people in order to style or re-design their article in a different way through different easier techniques.

Working with Headings

Headings act as a major source of attraction for the person going through your document. It's the first thing the reader has a look on. It is always believed that first impression is the last impression similarly if the heading of your document is not stylish or attractive; it would pose a negative impact on the reader. It is hence suggested to modify your heading with the help of bootstrap. One can simply define all HTML headings <h1> to <h6> in a simple HTML document. One of the most important things to take care of is vary the tag or class of secondary text through <small> tag or <span> tag.


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> Example of Bootstrap 3 Headings</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script> 
<style type="text/css"> 
    .bs-example{
    	margin: 20px;
    }
</style> 
</head> 
<body> 
<div class="bs-example"> 
    <h1> h1. Bootstrap heading</h1> 
    <h2> h2. Bootstrap heading</h2> 
    <h3> h3. Bootstrap heading</h3> 
    <h4> h4. Bootstrap heading</h4> 
    <h5> h5. Bootstrap heading</h5> 
    <h6> h6. Bootstrap heading</h6> 
    <hr> 
    <div class="h1"> h1. Bootstrap heading</div> 
    <div class="h2"> h2. Bootstrap heading</div> 
    <div class="h3"> h3. Bootstrap heading</div> 
    <div class="h4"> h4. Bootstrap heading</div> 
    <div class="h5"> h5. Bootstrap heading</div> 
    <div class="h6"> h6. Bootstrap heading</div> 
</div> 
</body> 
</html>                                 		
	

Output :

Cinque Terre

Creating page Headers

The very first page of the document is also a critical one, as this is the thing on which every individual will have a look on. If you go through your whole article there would be many headings that would glorify or amaze the reader but the opening header is the must. It can be converted into a header easily with the help of bootstrap through page header component on <h1>.

Example


<div class="page-header"> 
    <h1> Bootstrap <small> An intuitive front-end framework</small> </h1> 
</div> 

Output :

Cinque Terre

Working with Paragraphs

Paragraphs are the major sections in your document on which you have to concentrate the most while creating a document. The whole content on your document cannot be shown in a single paragraph as it would appear creepier and less attractive. Bootstrap is again of great help here, <body> can be applied to the complete body of the document and <p>to all the paragraphs so that whole document can come down to a global font size. Thus with bootstrap you can align text in a particular document with the help of text alignment classes.

Bootstrap Text Formatting

The complete text in your document cannot be shown in same fonts. The fonts in the document can be changed to bold, italic, small or any other designs through bootstrap by simply using tags like <strong>, <I>, <small> etc. it is a useful technique through which we can make the document more attractive. </small>

Example


 <p> <b> This is bold text</b> </p> 
<p> <big> This is big text</big> </p> 
<p> <code> This is computer code</code> </p> 
<p> <em> This is emphasized text</em> </p> 
<p> <i> This is italic text</i> </p> 
<p> <mark> This is highlighted text</mark> </p> 
<p> <small> This is small text</small> </p> 
<p> <strong> This is strongly emphasized text</strong> </p> 
<p> This is <sub> subscript</sub>  and <sup> superscript</sup> </p> 
<p> <ins> This text is inserted to the document</ins> </p> 
<p> <del> This text is deleted from the document</del> </p> 

Output :

Cinque Terre

Text Transformation Classes

While writing or creating a document there are some more important things to concentrate on i.e. the case of words written in the document. With the help of bootstrap we can also transform the text into lower or upper case. Besides this we can also capitalize the alphabets through bootstrap.

Example


 <p class="text-lowercase"> The quick brown fox jumps over the lazy dog.</p> 
<p class="text-uppercase"> The quick brown fox jumps over the lazy dog.</p> 
<p class="text-capitalize"> The quick brown fox jumps over the lazy dog.</p> 

Output :

Cinque Terre

Text Emphasis Classes

Presentation is a major task in the document. Colors play a major role in creating strong impression on the people going through it. We can simply use green color or red color for success or error messages respectively. This is the easiest way of designing the web differently.

Styling Black quotes

There might be use of some specific quotes to create special impression on readers of the document. The quotes can further be modified with bootstrap to give them a pretty and different look just by using standard <black quote> element.