One Snippet Pro - Bootstrap

One Snippet Pro is an initiative to learn and practice the programming in one snippet , We start learning a language or a technology using a simple hello world and we lean forward step by step to become a pro , But in this demo i am going to code it in to one snippet and cover as much as concepts possible. We have a lot of programming language and technologies in this series of "One Snippet Pro", The Post will have only two sections Simple introduction of the technology and One Snippet.

You can email me at redhatvicky@gmail.com or twitter me at @rvigneshwaran88 for any queries ,suggestions and feedback. Would be very happy to take it.

What is Boot Strap?

Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

Here is the code-snippet-pro on boot strap, we are going to see about the key concepts in Bootstrap in the order listed below

1. Grid Layout Sample

2. A Simple Blog layout Creation

3. Offsetting of Columns

4. Reordering of Columns - Push and Pull

5. Panel grids Example

6. Media(Pictures, Videos, etc.) Objects Usage

7. Thumbnails Usage

8. List Group Items

9. Navigation Tabs

10. Breadcrumb Usage

11. Various version and size of buttons

12. Glyphicon heart usage in web pages

13. Fun with form elements

14. A play of Javascript snippets on Form Elements

Grid System

Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range. You can use it with Sass mixins or our predefined classes.

Column Offsets

Offsets are used for spacing elements in the responsive grid.The unit is based on the column layout.You can define an offset this way : col-[breakpoint]-offset-[number of colums]

In this example, admitting our layout is made of 12 columns :

<div class="row">

    <div class="col-md-6 col-md-offset-3">

        <p>test</p>

    </div>

</div>

Means that in the medium range of the grid system, the element will have a width of 6 colums and there will be 3 blank columns before the element (and as a consequence, will have 3 blank colums after). The result of this is a div of 6 colums width, centered in the container.

In Bootstrap there exists a 12 columns grid in this way, while moving elements we have to ascertain by what number of spots its should be moved. E.g. in the event that we have 3 columns (4 of 12 each) and we require to move initial one to the last position, we have to "push" it by 8 places. Comparable circumstance happen when we need to move last column on the first position, at that point we have to "pull" it by 8 places.

Reordering columns : Push and Pull

In order to get the desired view, in this step, we have to push first column by 4 places, at that point push second column additionally by 4 places and pull the last column by 8 places. Presently the markup will resemble this:

<div class="container">

  <div class="row">

    <div class="col-sm-4 col-sm-push-4 col-3 my-col">

      3

    </div>

    <div class="col-sm-4 col-sm-push-4 col-2 my-col">

      2

    </div>

    <div class="col-sm-4 col-sm-pull-8 col-1 my-col">

      1

    </div>

  </div>

</div>

Panel Grids

A panel in bootstrap is a bordered box with some padding around its content, Panels are created with the .panel class, and content inside the panel has a .panel-body class.

 List Group Item

The list groups are very useful and flexible component for displaying lists of elements in a beautiful manner. In most basic form a list group is simply an unordered list with the class .list-group whereas, the list items having the class .list-group-item.

Navigation Tabs

Bootstrap provides an easy and quick way to create basic nav components like tabs and pills which are very flexible and elegant. All the Bootstrap's nav components—tabs and pills—share the same base markup and styles through the base .nav class.

Breadcrumb

A breadcrumb is a navigation scheme that indicates current page's location to the user within a website or application. Breadcrumb navigation can greatly enhance the accessibility of the websites having a large number of pages.

You can create static breadcrumbs layouts with Bootstrap simply using the class .breadcrumb on the unordered lists.

Click here to get the source code from git hub

Source Code : 

  <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

<link rel="stylesheet" type="text/css" href="css/style.css">

<title>Hello World</title>

</head>

<body>

<script src="js/jquery-1.11.3.js"></script>

<script src="js/bootstrap.js"></script>

<div class="container">

<div class="row">

<div class="col-md-12 text-center">

<h1>Grid System Sample</h1> </div>

</div>

<hr>

<div class="row">

<div class="col-xs-3 col1">

<h1>Column1</h1> </div>

<div class="col-xs-3 col2">

<h1>Column2</h1> </div>

<div class="col-xs-3 col1">

<h1>Column3</h1> </div>

<div class="col-xs-3 col2">

<h1>Column4</h1> </div>

</div>

<br>

<div class="row">

<div class="col-md-12 text-center">

<h1>Test Blog Creation</h1> </div>

</div>

<hr>

<div class="row">

<div class="col-md-4 col-sm-6 col-xs-12">

<h3>Post Title 1</h3>

<p>This is from the First Paragraph</p>

</div>

<div class="col-md-4 col-sm-6 col-xs-12">

<h3>Post Title 2</h3>

<p>This is from the Second Paragraph</p>

</div>

<div class="col-md-4 col-sm-6 col-xs-12">

<h3>Post Title 3</h3>

<p>This is from the third Paragraph</p>

</div>

<div class="col-md-4 col-sm-6 col-xs-12">

<h3>Post Title 4</h3>

<p>This is from the Fourth Paragraph</p>

</div>

<div class="col-md-4 col-sm-6 col-xs-12">

<h3>Post Title 5</h3>

<p>This is from the fifth Paragraph</p>

</div>

<div class="col-md-4 col-sm-6 col-xs-12">

<h3>Post Title 6</h3>

<p>This is from the Sixth Paragraph</p>

</div>

</div>

<div class="row">

<div class="col-md-12 text-center">

<h1>Column Offset Sample</h1> </div>

</div>

<hr>

<div class="row">

<div class="col-xs-4 col-xs-offset-3 col1">

<h1>Offsett Column 1</h1> </div>

<div class="col-xs-4 col-xs-offset-2 col2">

<h1>Offsett Column 2</h1> </div>

<div class="col-xs-4 col-xs-offset-3 col3">

<h1>Offsett Column 3</h1> </div>

</div>

<div class="row">

<div class="col-xs-12 text-center">

<h1>Reordering Columns using Pull and Push</h1> </div>

</div>

<hr>

<div class="row">

<div class="col-xs-9 col-xs-push-3 col1">

<h3>Pushed Column</h3> </div>

<div class="col-xs-3 col-xs-pull-9 col2">

<h3>

Pulled Column

</h3s>

</div>

<div class="col-xs-6 col-xs-push-6 col2">

<h3>Pushed Column</h3> </div>

<div class="col-xs-6 col-xs-pull-6 col1">

<h3>

Pulled Column

</h3s>

</div>

<div class="col-xs-10 col-xs-push-2 col3">

<h3>Pushed Column</h3> </div>

<div class="col-xs-2 col-xs-pull-10 col4">

<h3>

Pulled Column

</h3s>

</div>

<div class="col-xs-8 col-xs-push-4 col3">

<h3>Pushed Column</h3> </div>

<div class="col-xs-4 col-xs-pull-8 col4">

<h3>

Pulled Column

</h3s>

</div>

<div class="col-xs-7 col-xs-push-5 col1">

<h3>Pushed Column</h3> </div>

<div class="col-xs-5 col-xs-pull-7 col3">

<h3>

Pulled Column

</h3s>

</div>

</div>

<div class="row">

<div class="col-xs-12 text-center">

<h1>Panel Grids</h1>

</div>

</div>

<hr>

<div class="row">

<div class="col-xs-12 text-center">

<h1>Managing Components</h1>

</div>

</div>

<hr>

<div class="page-header">

<h1>

Manage Components <small> Exploring Various Components In

The Web Page </small>

</h1>

</div>

<div class="page-header">

<h1>

Panel Grids <small> Panels are used to display text or

images within a box with rounded corners </small>

</h1>

</div>

<!-- Display Panel Grids -->

<div class="panel panel-default">

<div class="panel-heading">Panel Grids</div>

<div class="panel-body">As you can see, the panel div has been

divided into three parts: the panel-head, panel-body, and

panel-footerpanel-danger for red. Each of these panel parts is

optional.Panels come with various color options. In the previous

code, I've used the default color with the help of the panel-default

class. You can also use other classes for different

colors:panel-primary for dark blue,panel-success for

green,panel-info for sky blue,panel-warning for yellow,</div>

<div class="panel-footer">

<a href="#" class="btn btn-danger btn-sm">Button1</a> <a href="#"

class="btn btn-default btn-sm">Button2</a>

</div>

<div class="row">

<div class="col-xs-12 text-center">

<h1>Media Object Usage</h1>

</div>

</div>

<hr>

<div class="page-header">

<h1>

Media Object <small> Images, videos, or audio. </small>

</h1>

</div>

<!-- Display Media Objects -->

<div class="media">

<a class="pull-left" href="#"> <img class="media-object"

src="images/image2.jpg" alt="Steve jobs" height="400" width="500">

</a>

<div class="media-body">

<h4 class="media-heading">Leader</h4>

<p>Innovation distinguishes between a leader and a follower.</p>

<div class="media">

<a class="pull-left" href="#"> <img class="media-object"

src="images/image3.jpg" alt="Steve Jobs" height="400" width="500">

</a>

<div class="media-body">

<h4 class="media-heading">Inventer</h4>

<p>Design is not just what it looks like and feels like. Design is how it works.</p>

</div>

</div>

</div>

</div>

</div>

<div class="row">

<div class="col-xs-12 text-center">

<h1>Thumbnail Usage</h1>

</div>

</div>

<hr>

<div class="row">

<div class="col-xs-3">

<div class="thumbnail">

<img src="images/image1.jpg">

<div class="caption">

<h3>Steve Jobs</h3>

<p>In Pixar and Disney</p>

<p> <a href="#" class="btn btn-primary">Read More</a> </p>

</div>

</div>

</div>

<div class="col-xs-3">

<div class="thumbnail"> <img src="images/image1.jpg">

<div class="caption">

<h3>Steve Jobs</h3>

<p>Return to Apple</p>

<p> <a href="#" class="btn btn-primary">Read More</a> </p>

</div>

</div>

</div>

<div class="col-xs-3">

<div class="thumbnail"> <img src="images/image1.jpg">

<div class="caption">

<h3>Steve Jobs</h3>

<p>NeXT computer</p>

<p> <a href="#" class="btn btn-primary">Read More</a> </p>

</div>

</div>

</div>

<div class="col-xs-3">

<div class="thumbnail"> <img src="images/image1.jpg">

<div class="caption">

<h3>Steve Jobs</h3>

<p>Know More About Steve Wozniak </p>

<p> <a href="#" class="btn btn-primary">Read More</a> </p>

</div>

</div>

</div>

</div>

<div class="row">

<div class="col-xs-12 text-center">

<h1>List Group Item Usage</h1> </div>

</div>

<hr>

<ul class="list-group-item">

<li class="list-group-item  list-group-item-success">Inbox</li>

<li class="list-group-item  list-group-item-info">Sent Items</li>

<li class="list-group-item  list-group-item-warning">Draft</li>

<li class="list-group-item  list-group-item-danger">Deleted Items</li>

<li class="list-group-item  list-group-item">Stared</li>

</ul>

<a href="#" class="list-group-item">

<h4 class="list-group-item-heading">Mahabharatham 35</h4>

<p class="list-group-item-text">Pandavs and Draupadi travel to mountains. All fall to their deaths except Yudhishtir who is granted access to paradise</p>

</a>

<a href="#" class="list-group-item active">

<h4 class="list-group-item-heading">Mahabharatham 36</h4>

<p class="list-group-item-text">Yudhishtir finds Kauravs in paradise! He is furious until he realises: as long as he clings to rage, heaven can never be his</p>

</a>

<div class="row">

<div class="col-xs-12 text-center">

<h1>Navigation Tabs</h1> </div>

</div>

<hr>

<ul class="nav nav-tabs">

<li class="active"><a href="#">Home</a>

<li><a href="#">Products</a> </li>

<li><a href="#">Contact Us</a> </li>

</ul>

<br>

<br>

<ul class="nav nav-pills">

<li class="active"><a href="#">Home</a>

<li><a href="#">Products</a> </li>

<li><a href="#">Contact Us</a> </li>

</ul>

<br>

<br>

<ul class="nav nav-pills nav-stacked">

<li class="active"><a href="#">Home</a>

<li><a href="#">Products</a> </li>

<li><a href="#">Contact Us</a> </li>

</ul>

<br>

<br>

<div class="navbar navbar-default">

<div class="container-fluid">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar-content"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Sitepoint</a> </div>

<div class="collapse navbar-collapse" id="mynavbar-content">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a> </li>

<li><a href="#">About</a> </li>

<li><a href="#">Pricing</a> </li>

<li><a href="#">Contact</a> </li>

<li><a href="#">Feedback</a> </li>

</ul>

</div>

</div>

</div>

<div class="row">

<div class="col-xs-12 text-center">

<h1>Breadcrumb Usage</h1> </div>

</div>

<hr>

<ol class="breadcrumb">

<li><a class="active" href="#">Home</a> </li>

<li><a href="#">Products</a> </li>

<li><a href="#">Feedback</a> </li>

<li><a href="#">Contact Us</a> </li>

</ol>

<h3>

Instance Of Labels <span class="label label-default">New</span>

</h3>

<div class="row">

<div class="col-xs-12 text-center">

<h1>Labels and Buttons</h1> </div>

<h3>Instance Of Labels</h3>

<hr>

<div class="container">

<div class="row">

<div class="col-xs-2">

<h3>

Label Demo &nbsp; <span class="label label-default">Label

default</span>

</h3> </div>

<div class="col-xs-2">

<h3>

Label Demo &nbsp; <span class="label label-primary">Label

Primary</span>

</h3> </div>

<div class="col-xs-2">

<h3>

Label Demo &nbsp; <span class="label label-success">Label

Success</span>

</h3> </div>

<div class="col-xs-2">

<h3>

Label Demo &nbsp; <span class="label label-info">Label

Info</span>

</h3> </div>

<div class="col-xs-2">

<h3>

Label Demo &nbsp; <span class="label label-warning">Label

Warning</span>

</h3> </div>

<div class="col-xs-2">

<h3>

Label Demo &nbsp; <span class="label label-danger">Label

Danger</span>

</h3> </div>

</div>

</div>

<hr>

<h3>Instance Of Buttons</h3>

<hr>

<div class="container">

<div class="row">

<div class="col-xs-2">

<button type="button" class="btn btn-primary btn-lg">Button primary</button>

</div>

<div class="col-xs-2">

<button type="button" class="btn btn-success btn-lg">Button success</button>

</div>

<div class="col-xs-2">

<button type="button" class="btn btn-info btn-lg">Button info</button>

</div>

<div class="col-xs-2">

<button type="button" class="btn btn-warning btn-lg">Button warning</button>

</div>

<div class="col-xs-2">

<button type="button" class="btn btn-danger btn-lg">Button danger</button>

</div>

<div class="col-xs-2">

<button type="button" class="btn btn-default btn-lg">Button default</button>

</div>

</div>

</div>

<hr>

<h3>Size Of Buttons</h3>

<hr>

<div class="container">

<div class="row">

<div class="col-xs-4">

<button type="button" class="btn btn-primary btn-lg ">Button primary</button>

</div>

<div class="col-xs-4">

<button type="button" class="btn btn-success btn-sm">Button success</button>

</div>

<div class="col-xs-4">

<button type="button" class="btn btn-info btn-xs">Button info</button>

</div>

</div>

<hr>

<h6>Glyphicon-heart</h6>

<br>

<h2>

<span class="glyphicon glyphicon-heart"></span>

</h2>

<br>

<br>

<h6>Well Component</h6>

<br>

<div class="well">

<p>Pandavs and Draupadi travel to mountains. All fall to their deaths except Yudhishtir who is granted access to paradise.Yudhishtir finds Kauravs in paradise! He is furious until he realises: as long as he clings to rage, heaven can never be his </p>

</div>

<div class="row">

<div class="col-xs-12 text-center">

<h1>Fun With Forms</h1> </div>

</div>

<hr>

<form class="form">

<div class="form-group">

<label for="nameField">Name</label>

<input type="text" class="form-control" id="nameField" placeholder="Your Name" /> </div>

<div class="form-group">

<label for="emailField">Email</label>

<input type="email" class="form-control" id="emailField" placeholder="Your Email" /> </div>

<div class="form-group">

<label for="phoneField">Phone</label>

<input type="text" class="form-control" id="phoneField" placeholder="Your Phone Number" /> </div>

<div class="form-group">

<label for="descField">Description</label>

<textarea class="form-control" id="descField" placeholder="Your Comments"></textarea>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

<button type="reset" class="btn btn-default">Reset</button>

</form>

<hr>

<div class="well well-sm">

<form class="form-inline">

<div class="form-group">

<input type="email" class="form-control" id="emailField" placeHolder="Enter the Email"> </div>

<div class="form-group">

<input type="password" class="form-control" id="passwordField" placeHolder="Password"> </div>

<div class="checkbox">

<label>

<input type="checkbox">&nbsp;Remember Me</label>

</div> &nbsp;

<button type="button" class="btn btn-primary">Sign in</button>

</form>

</div>

<input class="form-control" type="text" placeHolder="Disable the text Here" disabled />

<div class="row">

<div class="col-xs-12">

<h3>Fun with Form Components</h3> </div>

</div>

<hr>

<div class="well well-sm">

<form class="form-inline">

<div class="form-group">

<input type="email" class="form-control" id="emailField" placeHolder="Enter the Email"> </div>

<div class="form-group">

<input type="password" class="form-control" id="passwordField" placeHolder="Password"> </div>

<div class="checkbox">

<label>

<input type="checkbox">&nbsp;Remember Me</label>

</div> &nbsp;

<button type="button" class="btn btn-primary">Sign in</button>

</form>

</div>

</div>

</body> </html>