Nirajan Ghimirey's Workshop: bootstrap

Showing posts with label bootstrap. Show all posts

Monday, March 30, 2015

Badges in Bootstrap

Badges are similar to labels in Bootstrap,badges are mostly used to focus unread objects. They can also be used in links, navs and more other by adding span class: badge. Please test the example for more clearance in it .

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>joeandy's workshop</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1"/>  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>  
 </head>  
 <body>  
 <div class="container">  
 <h4>Badges in active state pills </h4>  
 <ul class="nav nav-pills">  
   <li class="active"><a href="#">Home <span class="badge">42</span></a></li>  
   <li><a href="#">Profile</a></li>  
   <li><a href="#">Message <span class="badge">3</span></a></li>  
 </ul>  
 <br>  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html>

Sunday, March 29, 2015

Using the affix plugin in Bootstrap and its detailed example

Bootstrap Affix Plugin

Bootstrap affix plugin allows a <div> to become affixed to the location on a particular page in a particular section. It can be included with the help of affix.js or bootstrap.js while working in bootstrap. It is helpful working for toggle pin off and pin on using this plugin and it is mostly used to make <div> affixed to a particular section or location of a page.

Below here is a sample example I wrote it so you could check on the usage and implementation structure, I hope it's not a hard nut to crack. If you have any queries please leave a comment in the comment box.

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>Nirajan Ghimirey's Workshop</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1" />  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />  
 </head>  
 <body>  
 <div class="container">  
 <header class="well text-center">  
 <h1>Welcome to My Blog.</h1>  
 <p class="text-success">This is the example of Affix Plug-in</p>  
 </header>  
 <div id="myNav" data-spy="affix" data-offset-top="60"  
    data-offset-bottom="200">  
    <div class="col-md-3">  
      <ul class="nav nav-tabs nav-stacked affix" data-spy="affix"  
       data-offset-top="190">  
       <li class="active"><a href="#one">Home</a></li>  
       <li><a href="#two">Labels</a></li>  
       <li><a href="#three">Directory</a></li>  
        <li><a href="#four">Articles</a></li>  
      </ul>  
    </div>  
    <div class="col-sm-9">  
      <h2 id="one">Home</h2>  
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
      Nam eu sem tempor, varius quam at, luctus dui. Mauris magna  
      metus, dapibus nec turpis vel, semper malesuada ante.  
      </p>  
      <p>Vestibulum quis quam ut magna consequat faucibus.  
      Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus  
      dictum risus. Pellentesque viverra sagittis quam at mattis.  
      Suspendisse potenti. Aliquam sit amet gravida nibh,  
      facilisis gravida odio. </p>  
      <hr>  
      <h2 id="two">Lables</h2>  
      <p> Nullam hendrerit justo non leo aliquet imperdiet. Etiam  
      in sagittis lectus. Suspendisse ultrices placerat accumsan.  
      Mauris quis dapibus orci. In dapibus velit blandit pharetra  
      tincidunt. </p>  
      <p>Vestibulum consectetur scelerisque lacus, ac fermentum  
      lorem convallis sed. Nam odio tortor, dictum quis malesuada at,  
      pellentesque vitae orci. </p>  
      <hr>  
      <h2 id="three">Directory</h2>  
      <p>Integer pulvinar leo id risus pellentesque vestibulum.  
      Sed diam libero, sodales eget sapien vel, porttitor bibendum  
      enim. Donec sed nibh vitae lorem porttitor blandit in nec ante.  
      Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem  
      malesuada condimentum. Etiam in</p>  
      <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat  
      ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis  
      luctus turpis at accumsan tincidunt.</p>  
      <hr>  
      <h2 id="four">Articles</h2>  
      <p> Nullam hendrerit justo non leo aliquet imperdiet. Etiam  
      in sagittis lectus. Suspendisse ultrices placerat accumsan.  
      Mauris quis dapibus orci. In dapibus velit blandit pharetra  
      tincidunt. </p>  
      <p>Vestibulum consectetur scelerisque lacus, ac fermentum  
      lorem convallis sed. Nam odio tortor, dictum quis malesuada at,  
      pellentesque vitae orci. </p>  
    </div>  
   </div>  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html>

Sunday, March 22, 2015

Well in Bootstrap

Well is a container that helps the content to present sunken or an inset effect on the pages. Well can be created easily by wrapping the content that is to be presented in the well with a <div> element by adding a class .well. The size of the well can also be changed by using some optional class like well-lg.

Syntax:

<div class = "well" > content </div>

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>joeandy's workshop</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1">  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">  
 </head>  
 <body>  
 <div class="container">  
 <h1> Example of a well</h1>  
 <div class="well well-lg">Hi, am in large well feed me some content !!</div>  
 <div class="well well-sm">Hi, am in small well feed me some content !!</div>  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html>

Thursday, March 19, 2015

Page Header Bootstrap

This feature allows you to add appropriate space around the headings on the page. When you have many titles in your page to make a distinction in between them and a header you require a page header. It helps in between page title and headings.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>joeandy's workshop</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1"/>  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>  
 </head>  
 <body>  
 <div class="container">  
 <div class="page-header">  
   <h1>This is an example of page header  
    <small>subtext for page header</small>  
   </h1>  
 </div>  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html>

Friday, March 13, 2015

Bootstrap Forms

Forms in Bootstrap usually use three types of layouts and they are provided below:

Vertical: It is also known as basic form. For creating these types of forms the developer needs to add a role form to the parent <form > element.
Inline form: It is required for the case in which all the elements are inline and aligned left. For creating these types of forms labels should b alongside and the class .form-inline should be to the <form> tag.
Horizontal form: For creating this form the developer needs to add a class which is of .form-horizontal to the parent <form> element. A class called .control-label should also be added to the labels.

Below is a simple example of Bootstrap form:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>nirajanghimirey's workshop</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1"/>  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>  
 </head>  
 <body>  
 <div class="container">  
   <h1>Example of Form</h1>  
   <form role="form">  
     <div class="form-group">  
       <label for="username">Username:</label>  
       <input type="text" class="form-control" id="username" placeholder="User Name"/>  
     </div>  
     <div class="form-group">  
       <label for="pass">Password:</label>  
       <input type="password" class="form-control" id="pass" placeholder="Password"/>  
     </div>  
     <div class="form-group">  
       <label for="email">Email:</label>  
       <input type="email" class="form-control" id="email" placeholder="Email Address"/>  
     </div>  
     <div class="checkbox">  
       <label><input type="checkbox"/> Remember me</label>  
     </div>  
     <div class="input-group">  
       <label for="male">Male:</label>  
       <input type="radio" value="male" id="male" name="gender" checked/>  
       <label for="female">Female:</label>  
       <input type="radio" value="male" id="female" name="gender"/>  
     </div>  
     <button type="submit" class="btn btn-default">Submit</button>  
   </form>  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html

Bootstrap Glyphicons

Glyphicons are icon fonts that can be used in web projects instead of images, it helps SEO optimization too. These Halflings are made free by the creator but requires licensing to use. Glyphicons are found within the fonts folder of the Bootstrap directory. These icons are used by simply adding respective codes anywhere inside the document body.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>nirajanghimirey's workshop</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1"/>  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>  
 </head>  
 <body>  
 <div class="container">  
   <h1>Bootstrap glyphicon icons</h1>  
   <button class="btn btn-default"><span class="glyphicon glyphicon-home"></span> Home</button>  
   <button class="btn btn-default"><span class="glyphicon glyphicon-headphone"></span> camera</button>  
   <button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span> Volume</button>  
   <button class="btn btn-default"><span class="glyphicon glyphicon-leaf"></span> Inbox</button>  
   <button class="btn btn-default"><span class="glyphicon glyphicon-upload"></span> Upload</button>  
   <button class="btn btn-default"><span class="glyphicon glyphicon-barcode"></span> Bar-code</button>  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html>

Images in Bootstrap

Bootstrap facilates four features to stylize images and these are .img-rounded, .img-circle, .img-thumbnail and the last one is .img-resposvie.

The major use of image properties of Bootstrap are :

To add rounded corners to an image.
To shape the images into a circle.
To make the image change into a thumbnail.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>nirajanghimirey's workshop</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1"/>  
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>  
 </head>  
 <body>  
 <div class="container">  
   <h1>Example of Image</h1>  
   <div class="row">  
     <div class="col-sm-4 col-md-4">  
       <img src="images/image.jpg" class="img-rounded" alt="Image" width="320" height="240"/>  
       <span>Rounded</span>  
     </div>  
     <div class="col-sm-4 col-md-4">  
       <img src="images/image.jpg" class="img-circle" alt="Image" width="320" height="240"/>  
       <br><span>Circle</span>  
     </div>  
     <div class="col-sm-4 col-md-4">  
       <img src="images/image.jpg" class="img-thumbnail" alt="Image" width="320" height="240"/>  
       <span>Thumbnail</span>  
     </div>  
   </div>  
   <div class="row">  
     <div class="col-sm-4 col-md-4">  
       <img src="images/image.jpg" class="img-responsive" alt="Image" width="320" height="240"/>  
       <span>Responsive</span>  
     </div>  
   </div>  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html>

Bootstrap Labels

Labels in Bootstrap are used for proposing tips, counts or other mark-up for pages and contents. To display labels ".label" class is used. Appearance of the labels can be changed using the modifier classes like label-primary, label-warning, label-default, label-success, label-info and label-danger.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>nirajanghimirey's workshop</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1"/>  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>  
 </head>  
 <body>  
 <div class="container">  
 <h1>Example for labels</h1>  
 <h1>  
 <span class="label label-default">Default Label</span>  
 <span class="label label-primary">Primary Label</span>  
 <span class="label label-success">Success Label</span>  
 <span class="label label-info">Info Label</span>  
 <span class="label label-warning">Warning Label</span>  
 </h1>  
 <h2><span class="label label-default">Default Label</span>  
 <span class="label label-primary">Primary Label</span>  
 <span class="label label-success">Success Label</span>  
 <span class="label label-info">Info Label</span>  
 <span class="label label-warning">Warning Label</span>  
 <span class="label label-danger">Danger Label</span></h2>  
 <h3><span class="label label-default">Default Label</span>  
 <span class="label label-primary">Primary Label</span>  
 <span class="label label-success">Success Label</span>  
 <span class="label label-info">Info Label</span>  
 <span class="label label-warning">Warning Label</span>  
 <span class="label label-danger">Danger Label</span></h3>  
 <h4><span class="label label-default">Default Label</span>  
 <span class="label label-primary">Primary Label</span>  
 <span class="label label-success">Success Label</span>  
 <span class="label label-info">Info Label</span>  
 <span class="label label-warning">Warning Label</span>  
 <span class="label label-danger">Danger Label</span></h4>  
 <h5><span class="label label-default">Default Label</span>  
 <span class="label label-primary">Primary Label</span>  
 <span class="label label-success">Success Label</span>  
 <span class="label label-info">Info Label</span>  
 <span class="label label-warning">Warning Label</span>  
 <span class="label label-danger">Danger Label</span></h5>  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html>

Button in Bootstrap

Anything that is given a class of ".btn" refers to a button and gets displayed as grey button with rounded or curved edges in Bootstrap . There are also options to customize the buttons and make them on according to your preferences in Bootstrap.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>nirajanghimirey's workshop</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1"/>  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>  
 </head>  
 <body>  
 <div class="container">  
 <a class="btn btn-link" href="http://nirajanghimireyworkshop.blogspot.com" role="button">Link</a> &nbsp;  
 <button class="btn btn-info" type="submit">Info</button>&nbsp;  
 <input class="btn btn-submit" type="submit" value="Submit">&nbsp;  
 <input class="btn btn-success" type="button" value="Success">&nbsp;  
 <input class="btn btn-primary" type="button" value="Primary">&nbsp;  
 <input class="btn btn-danger" type="button" value="Danger">&nbsp;  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html>

Bootstrap Codes

A user should use <code> tag for displaying the code inline and likely so the user needs to display the code as standalone block elements and for that the user needs to use <pre> tag. This way we can work with codes and scripts in bootstrap. A detailed example is given below :

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>nirajanghimirey's workshop</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1"/>  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>  
 </head>  
 <body>  
 <p>  
 <pre>  
   &lt;article&gt;  
    &lt;h1&gt;This is an example of Joe's code&lt;/h1&gt;  
     &lt;h2&gt;This is how a code is written&lt;/h2&gt;  
   &lt;/article&gt;  
 </pre>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html>

Thursday, March 12, 2015

Bootstrap Navigation bar (navbar)

navigation bar can be defined as a navigation header which is placed at the top of the page for navigation purpose. Bootstrap can make a navigation bar extend larger or collapse into smaller and it all depends upon the screen of the device as it is needed to be optimized. Bootstrap navigation is used to hold the drop down menus which is needed in several ways in a website.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>Bootstrap</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1"/>  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>  
 </head>  
 <body>  
 <div class="container">  
   <header class="jumbotron text-center">  
     <h2>Welcome to Nirajanghimirey's workshop</h2>  
     <p>This is Navbar</p>  
   </header>  
   <div class="well">  
     <h4>Navbar Defaulr</h4>  
     <nav class="navbar navbar-default">  
       <div class="container-fluid">  
         <!-- For mobile display -->  
         <div class="navbar-header">  
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-navbar">  
             <span class="sr-only">Toggle navigation</span>  
             <span class="icon-bar"></span>  
             <span class="icon-bar"></span>  
             <span class="icon-bar"></span>  
           </button>  
           <a class="navbar-brand" href="#">joeandy’s workshop</a>  
         </div>  
         <!-- Navbar -->  
         <div class="collapse navbar-collapse" id="example-navbar">  
           <ul class="nav navbar-nav">  
             <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>  
             <li><a href="#">Contact</a></li>  
             <li class="dropdown">  
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Tutorials <span class="caret"></span></a>  
               <ul class="dropdown-menu" role="menu">  
                 <li><a href="#">PHP</a></li>  
                 <li><a href="#">CSS</a></li>  
                 <li><a href="#">Bootstrap</a></li>  
                 <li class="divider"></li>  
                 <li><a href="#">Bootstrap 3</a></li>  
                 <li class="divider"></li>  
                 <li><a href="#">Learn more</a></li>  
               </ul>  
             </li>  
           </ul>  
           <form class="navbar-form navbar-left pull-right" role="search">  
             <div class="form-group">  
               <input type="text" class="form-control" placeholder="Search">  
             </div>  
             <button type="submit" class="btn btn-default">Search</button>  
           </form>  
           <ul class="nav navbar-nav navbar-right">  
             <li><a href="#">User</a></li>  
             <li class="dropdown">  
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">User <span class="caret"></span></a>  
               <ul class="dropdown-menu" role="menu">  
                 <li><a href="#">Account</a></li>  
                 <li><a href="#">Change password</a></li>  
                 <li><a href="#">Settings</a></li>  
                 <li class="divider"></li>  
                 <li><a href="#">Logout</a></li>  
               </ul>  
             </li>  
           </ul>  
         </div>  
       </div>  
     </nav>  
   </div>  
   <div class="well">  
     <h4>Navbar Inverse</h4>  
     <nav class="navbar navbar-inverse">  
       <div class="container-fluid">  
         <!-- For mobile display -->  
         <div class="navbar-header">  
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-navbar2">  
             <span class="sr-only">Toggle navigation</span>  
             <span class="icon-bar"></span>  
             <span class="icon-bar"></span>  
             <span class="icon-bar"></span>  
           </button>  
           <a class="navbar-brand" href="#">joeandy’s workshop</a>  
         </div>  
         <!-- Navbar -->  
         <div class="collapse navbar-collapse" id="example-navbar2">  
           <ul class="nav navbar-nav">  
             <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>  
             <li><a href="#">Contact</a></li>  
             <li class="dropdown">  
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Tutorials <span class="caret"></span></a>  
               <ul class="dropdown-menu" role="menu">  
                 <li><a href="#">HTML</a></li>  
                 <li><a href="#">CSS</a></li>  
                 <li><a href="#">Javascript</a></li>  
                 <li class="divider"></li>  
                 <li><a href="#">Bootstrap 3</a></li>  
                 <li class="divider"></li>  
                 <li><a href="#">Learn more</a></li>  
               </ul>  
             </li>  
           </ul>  
           <form class="navbar-form navbar-left pull-right" role="search">  
             <div class="form-group">  
               <input type="text" class="form-control" placeholder="Search">  
             </div>  
             <button type="submit" class="btn btn-default">Search</button>  
           </form>  
           <ul class="nav navbar-nav navbar-right">  
             <li><a href="#">User</a></li>  
             <li class="dropdown">  
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">User <span class="caret"></span></a>  
               <ul class="dropdown-menu" role="menu">  
                 <li><a href="#">Account</a></li>  
                 <li><a href="#">Change password</a></li>  
                 <li><a href="#">Settings</a></li>  
                 <li class="divider"></li>  
                 <li><a href="#">Logout</a></li>  
               </ul>  
             </li>  
           </ul>  
         </div>  
       </div>  
     </nav>  
   </div>  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html>

Bootstrap Jumbotron

Jumbotron is one of the frequently used features that are supported by the bootstrap. Jumbotron can be created in simple wa, first a <div> with class jumbotron should be made. In a case where addition is required and is larger is <h1> than the font-weighted is decreased or reduced to 200px. Jumbotron is used for the purpose of increasing the size of the headings optionally.

Example:

<!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>Bootstrap</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1"/>  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>  
 </head>  
 <body>  
 <div class="container">  
   <div class="jumbotron">  
     <h1>Welcome to Nirajanghimirey’s workshop</h1>  
     <p>Example of Jumbotron</p>  
     <p><a class="btn btn-primary btn-lg" href="#" role="button">Read more</a></p>  
   </div>  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html>

Bootstrap Input groups

Input groups are the extended Form Controls in Bootstrap. It can be used to quickly prep ended and append texts/buttons to text based inputs. By adding the prep ended and appended content to an input field, common elements can be added to the user’s input. For prep ending and appending elements to a .form-control, <div >is wrapped with the class .input-group and .input-group-add-on.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
 <meta charset="UTF-8"/>  
 <title>Bootstrap </title>  
 <meta name="viewport" content="width=device-width, initial-scale=1"/>  
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>  
 </head>  
 <body>  
 <div class="container">  
  <header class="jumbotron text-center">  
   <h2>Welcome to Nirajanghimirey'sworkshop</h2>  
   <p>Example of Input groups</p>  
  </header>  
  <div style="padding: 100px 100px 10px;">  
   <form class="input-group input-group-lg">  
    <span class="input-group-addon">Email</span>  
    <input type="text" class="form-control" placeholder="example@nirajanghimireyworkshop.blogspot.com">  
   </form>  
   <br/>  
   <form class="input-group input-group-lg">  
    <span class="input-group-addon">Password</span>  
    <input type="password" class="form-control" placeholder="password">  
   </form>  
   <br/>  
   <div class="input-group"> <span class="input-group-addon">$</span>  
    <input type="text" class="form-control">  
    <span class="input-group-addon">.00</span> </div>  
   <br/>  
   <form class="bs-example bs-example-form" role="form">  
   <div class="row">  
   <div class="col-lg-6">  
   <div class="input-group"> <span class="input-group-btn">  
    <button class="btn btn-default" type="button"> Search! </button>  
    </span>  
    <input type="text" class="form-control">  
   </div>  
   </div>  
   <br/>  
   <form class="bs-example bs-example-form" role="form">  
    <div class="row">  
    <div class="col-lg-6">  
    <div class="input-group">  
    <div class="input-group-btn">  
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> Menu <span class="caret"> </span> </button>  
   </form>  
   <ul class="dropdown-menu">  
    <li><a href="#">Submit</a></li>  
    <li><a href="#">Reset</a></li>  
    <li><a href="#">Exit</a></li>  
   </ul>  
  </div>  
  <input type="text" class="form-control">  
  </form>  
 </div>  
 <!-- /input-group -->  
 </div>  
 <!-- /input-group-btn -->  
 </div>  
 <!-- /col-lg-6 -->  
 </div>  
 <!-- /row -->  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html>

Using Bootstrap Dropdown

Bootstrap Dropdown menus are toggle-able relative menus for showing links in a list format and organized manners. These drop-down menus are made collaborative by installing the drop-down JavaScript plugin in your document. These drop-down menus can be used by wrapping the class .drop-down. These drop-downs are used for displaying links in a list format,.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>Bootstrap</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1"/>  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>  
 </head>  
 <body>  
 <div class="container">  
 <header class="jumbotron text-center">  
 <h2>Welcome Nirajanghimirey's Workshop</h2>  
 <p>Example of Drop Down</p>  
 </header>  
 <div class="well">  
 <div class="dropdown">  
   <button type="button" class="btn btn-info" id="dropdownMenu1"  
    data-toggle="dropdown">  
    Subjects  
    <span class="caret"></span>  
   </button>  
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">  
    <li role="presentation">  
      <a role="menuitem" tabindex="-1" href="http://nirajanghimireyworkshop.blogspot.com/search/label/php">php</a>  
    </li>  
    <li role="presentation">  
      <a role="menuitem" tabindex="-1" href=" http://nirajanghimireyworkshop.blogspot.com/search/label/bootstrap ">Bootstrap </a>  
    </li>  
    <li role="presentation">  
      <a role="menuitem" tabindex="-1" href=" http://nirajanghimireyworkshop.blogspot.com/search/label/webdevelopment">  
 web development  
      </a>  
    </li>  
    <li role="presentation" class="divider"></li>  
    <li role="presentation">  
      <a role="menuitem" tabindex="-1" href=" http://nirajanghimireyworkshop.blogspot.com/search/label/php ">html and php</a>  
    </li>  
     <li role="presentation">  
      <a role="menuitem" tabindex="-1" href=" http://nirajanghimireyworkshop.blogspot.com/search/label/bootstrap ">css and design</a>  
    </li>  
   </ul>  
 </div>  
 </div>  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html>