bootstrap [part 1]

BOOTSTRAP PART 1

What is web Framework?

• A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs.

• For example, many web frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse.

Types……• Model–view–controller (MVC)

• Push-based vs. pull-based

• Three-tier organization

Web framework of Bootstrap• Bootstrap is a free and open-source front-end web

framework for designing websites and web applications.

• Unlike many web frameworks, it concerns itself with front-end development only.

What is Bootstrap???• Bootstrap is a free front-end framework for faster and

easier web development.

• Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.

• Bootstrap also gives you the ability to easily create responsive designs.

Responsive web design• Responsive web design is about creating web sites

which automatically adjust themselves to look good on all devices, from small phones to large desktops.

Bootstrap history

• Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub.

• In June 2014 Bootstrap was the No.1 project on GitHub!

Advantages of Bootstrap

• Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap.

• Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops.

• Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework.

• Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera).

Downloading and Installing Bootstrap• Where to get Bootstrap?

• Other ways to get Bootstrap?

Where to get Bootstrap?

• We can easily download the bootstrap set up file from the internet.

• The site were we can get the bootstrap file is:http://getbootstrap.com/

http://getbootstrap.com/

Where to get Bootstrap?(cont….)

Where to get Bootstrap?(cont….)

• Click on Download Bootstrap.

• Once the Downloading is completed you can see 3 folders:1. Css2. Fonts3. Js

Other ways to get Bootstrap?• Bootstrap CDN(Content Delivery Network).<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Build Your First Bootstrap Website With The Basic Template

1. Minimum Bootstrap page

2. Basic Bootstrap template

3. More Bootstrap sample templates

1. Minimum Bootstrap Page

Add the HTML5 doctype• Bootstrap uses HTML elements and CSS properties

that require the HTML5 doctype.• Always include the HTML5 doctype at the beginning

of the page, along with the lang attribute and the correct character set:

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> </head></html>

1. Minimum Bootstrap Page(cont….)

Bootstrap 3 is mobile-first• Bootstrap 3 is designed to be responsive to mobile

devices. Mobile-first styles are part of the core framework.

• To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element.

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

1. Minimum Bootstrap Page(cont….)

Container• Bootstrap also requires a containing element to wrap

site contents.

• There are two container classes to choose from:1. The .container class provides a responsive fixed

width container\2. The .container-fluid class provides a full width

container, spanning the entire width of the viewport

• <!DOCTYPE html><html lang="en"><head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><div class="container"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div></body></html>

OUTPUT:

2. Basic Bootstrap Template

• There are basic three bootstrap template.

1. Blog.2. Portfolio.3. Webpage.

3.More Bootstrap Sample Templates

• There are more three basic bootstrap templates

1. Social.2. Marketing.3. Online Store.

Normalize CSS

• Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.

• Normalize.css is currently used in some form by Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks, and many other frameworks, toolkits, and sites.

The aims of normalize.css are as follows:

• Preserve useful browser defaults rather than erasing them.

• Normalize styles for a wide range of HTML elements.• Correct bugs and common browser inconsistencies.• Improve usability with subtle improvements.• Explain the code using comments and detailed

documentation.• It supports a wide range of browsers (including mobile

browsers) and includes CSS that normalizes HTML5 elements, typography, lists, embedded content, forms, and tables.

Resetting or Normalizing Default Styles

• Two ways to level differences between default browser style sheets:– Begin main style sheet with a CSS reset that

effectively sets all the default element styles to “zero.”

– Begin main style sheet with normalize.css, which tweaks default styles to look very similar across browsers.

Reset and Normalize Examples

How to use Normalize CSS

• First, install or download normalize.css from GitHub. There are then 2 main ways to make use of it.

• Approach 1: use normalize.css as a starting point for your own project’s base CSS, customising the values to match the design’s requirements.

• Approach 2: include normalize.css untouched and build upon it, overriding the defaults later in your CSS if necessary.

What is Grid??• In graphic design, a grid is a structure (usually two-

dimensional) made up of a series of intersecting straight ( vertical, horizontal, and angular) or curved guide lines used to structure content.

• The grid serves as an framework on which a designer can organize graphic elements (images, glyphs, paragraphs, etc.) in a rational, easy-to-absorb manner.

• A grid can be used to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape.

• Grid Lines

• Grid Tracks

• Grid Lines are the lines that make up the grid. These can be horizontal or vertical. We can refer to them by number, or by name.

• A Grid Track is the space between two Grid Lines, either horizontal or vertical

• Grid Cell

• Grid Area

• A Grid Cell is the space between 4 Grid Lines. So it is the smallest unit on our grid that is available for us to place an item into. Conceptually it is just like a table cell.

• A Grid Area is any area on the Grid bound by four grid lines. It may contain a number of Grid Cells.

Bootstrap grid system

• Bootstrap's grid system allows up to 12 columns across the page.

• If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

Grid System RulesSome Bootstrap grid system rules:• Rows must be placed within a .container (fixed-

width) or .container-fluid (full-width) for proper alignment and padding.

• Use rows to create horizontal groups of columns• Content should be placed within columns, and only

columns may be immediate children of rows.• Predefined classes like .row and .col-sm-4 are

available for quickly making grid layouts.

• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.

• Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4.

Basic Structure of a Bootstrap Grid

• <div class="container"> <div class="row"> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> ... </div></div>

Bootstrap Grid with Fluid container: Small Devices

<!DOCTYPE html><html lang="en"><head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport"

content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<div class="container-fluid"> <h1>Small Grid</h1> <p>The following example will result in a

25%/75% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>

<p>Resize the browser window to see the effect.</p>

<div class="row"> <div class="col-sm-3" style="background-

color:yellow;"> HELLO WORLD </div> <div class="col-sm-9" style="background-

color:pink;"> HELLO TANVI </div> </div></div></body></html>

Output:

After resizing the screen:

Bootstrap Grid Example: Medium Devices<!DOCTYPE html><html lang="en"><head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport"





</head><body>

<div class="container-fluid"> <h1>Medium Grid</h1> <p>The following example will result in a 25%/75%

split on small devices and a 50%/50% split on medium (and large) devices. On extra small devices, it will automatically stack (100%).</p>

<div class="row"> <div class="col-sm-3 col-md-6"

style="background-color:yellow;"> Lorem ipsum dolor sit amet, consectetur

adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>

<div class="col-sm-9 col-md-6" style="background-color:pink;">

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </div></div></div>

</body></html>

Output:

Bootstrap Grid Example:Only Medium Devices





<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></scrip>

</head><body>

<div class="container-fluid"> <h1>Medium Grid</h1> <p>The following example will result in a 50%/50%

split on medium and large devices. On small (and extra small) devices, it will automatically stack (100%).</%).</p>

<div class="row"> <div class="col-md-6" style="background-

color:yellow;"> Lorem ipsum dolor sit amet, consectetur

adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>

<div class="col-md-6" style="background-color:pink;">

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </div></div></div>

</body></html>

Output:

Bootstrap Grid Example: Large Devices






</head></body>

<div class="container-fluid"> <h1>Large Grid</h1> <p>The following example will result in a 25%/75%

split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large devices. On extra small devices, it will automatically stack (100%).</p>

<div class="row"> <div class="col-sm-3 col-md-6 col-lg-4"

style="background-color:yellow;"> Lorem ipsum dolor sit amet, consectetur adipisicing

elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>

<div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink;">

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div></div></div>

</body></html>

Output:

Bootstrap Grid Example: Large Devices






</head></body>

<div class="container-fluid"> <h1>Large Grid</h1> <p>The following example will result in a 50%/50%

split on large devices. On medium, small and extra small devices, it will automatically stack (100%).</p>

<p>Resize the browser window to see the effect.</p> <div class="row">

<div class="col-lg-6" style="background-color:yellow;">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>

<div class=" col-lg-6" style="background-color:pink;">

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div></div></div>

</body></html>

Ouput:

What is Responsive Web Design or Layout

• Responsive web design is a process of designing and building websites to provide better accessibility and optimal viewing experience to the user.

• Responsive web design is a preferable alternative and an efficient way to target a wide range of devices with much less efforts.

• Responsive layouts automatically adjust and adapts to any device screen size

Creating Responsive Layout with Bootstrap

• new Bootstrap 3 mobile first grid system creating the responsive and mobile friendly websites has become much easier.

• you don't need to include any additional style sheet to enable responsive feature.

• Its four tiers grids classes provides better control over the layout as well as how it will be rendered on different types of devices

Bootstrap - Labels

• Labels are great for offering counts, tips, or other Informations for pages.

• Use class .label to display labels

Labels using Modifier Classes

• In Bootstrap, we can get different types of variations to change appearance of the inline labels. These can be listed as follows:

• label-default• label-primary• label-success Example • label-info• label-warning• label-danger

<!DOCTYPE html><head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>s</head><body>

<div class="container"> <h2>Contextual Label Classes</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></div>

</body></html>

Bootstrap - Badges

• Badges are mainly used to highlight new or unread items. To use badges just add <span class = "badge">

Example

<!DOCTYPE html><head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head>

<body><h3>Bootstrap - Badges</h3><ul class = "nav nav-pills"> <li class = "active"><a href = "#">Mailbox <span class = "badge">50</span></a></li> <li><a href = "#">Profile</a></li> <li><a href = "#">Messages <span class = "badge">3</span></a></li></ul></body></html>

Bootstrap - Panels

• Panel components are used when you want to put your DOM component in a box

• Panels are created with the .panel class, and content inside the panel has a .panel-body class:

Bootstrap - Panels

• Panels with Heading You can also add a heading to your panel with .panel-heading class. You can also include heading elements from <h1> to <h6> with a .panel-title class.• Panels with Footer The .panel-footer class can be used to wrap buttons or secondary text.• Panels with Contextual States Like other component you also add contextual state classes like .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger

<head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><style type="text/css"> .bs-example{in:35px;}</style></head>

<body><div class="bs-example"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">301 Moved Permanently</h3> </div><div class="panel-body">The requested page has been permanently moved to a new location.</div> </div><div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">302 OK</h3> </div> <div class="panel-body">The server successfully processed the request.</div> </div>

<div class="panel panel-info"> <div class="panel-heading"><h3 class="panel-title">303 Continue</h3> </div> <div class="panel-body">The client should continue with its request.</div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">400 Bad Request</h3> </div> <div class="panel-body">The request cannot be fulfilled due to bad syntax.</div> </div>

<div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title">503 Service Unavailable</h3> </div> <div class="panel-body">The server is temporarily unable to handle the request.</div> <div class="panel-footer clearfix"> <div class="pull-right"><a href="#" class="btn btn-primary">Learn More</a><a href="#" class="btn btn-default">Go Back</a></div> </div></div></div></body></html>

Bootstrap - Wells

• A well is a container in <div> that causes the content to appear sunken or an inset effect on the page.

• The .well class adds a rounded border around an element with a gray background color and some padding

Bootstrap - Wells

• SizingYou can change the size of well using the optional classes such as,well-lg or well-sm. These classes are used in conjunction with .well class. These affect the padding, making the well larger or smaller depending on the class.

<!DOCTYPE html><head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head>

<body>

<div class="container"> <h2>Well Size</h2> <div class="well well-sm">Small Well</div> <div class="well">Normal Well</div> <div class="well well-lg">Large Well</div></div>

</html>

Bootstrap - Jumbotron

• A jumbotron indicates a big box for calling extra attention to some special content or information.

• Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.

• To use the Jumbotron −• Create a container <div> with the class

of .jumbotron.

Bootstrap - Jumbotron

• Jumbotron Inside ContainerPlace the jumbotron inside the <div class="container"> if you want the jumbotron to NOT extend to the edge of the screen:

• Jumbotron Outside ContainerPlace the jumbotron outside the <div class="container"> if you want the jumbotron to extend to the screen edges:

Jumbotron Inside Container

<div class = "container">

<div class = "jumbotron"> <h1>Welcome to Bootstrap Tutorial!</h1> <p>This is an example for jumbotron.</p> <p> <a class = "btn btn-primary btn-lg" role = "button">Learn more</a> </p> </div> </div>

Jumbotron Outside Container

<div class = "jumbotron"> <div class = "container"> <h1>Welcome to Bootstrap Tutorial!</h1> <p>This is an example for jumbotron.</p> <p> <a class = "btn btn-primary btn-lg" role = "button">Learn more</a> </p> </div> </div>

Bootstrap Text/Typography

Class Description<h1> - <h6> Bootstrap will style the HTML headings (<h1> to <h6>)

<small> In Bootstrap the HTML <small> element is used to create a lighter, secondary text in any heading

<mark> Use the <mark> tag if you want to highlight parts of your text.

<dl> The <dl> tag defines a description list.The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).

<code> The <code> tag is a phrase tag. It defines a piece of computer code.

<kbd> Defines keyboard input.

<pre> Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

.lead Makes a paragraph stand out

.small Indicates smaller text (set to 85% of the size of the parent)

.text-left Indicates left-aligned text

.text-center Indicates center-aligned text

.text-right Indicates right-aligned text

.text-justify Indicates justified text

.text-lowercase Indicates lowercased text

.text-uppercase Indicates uppercased text

.text-capitalize Indicates capitalized text

.pre-scrollable Makes a <pre> element scrollable

.dl-horizontal Lines up the terms (<dt>) and descriptions (<dd>) in <dl> elements side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side

• <abbr>:

<html lang="en"><head>

<title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport"


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap. min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js></script>


</head>

<body><div class="container"> <h1>Abbreviations</h1> <p>The abbr element is used

to mark up an abbreviation or acronym:</p>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

</div></body></html>

Output:

Bootstrap Basic Table

• A basic Bootstrap table has a light padding and only horizontal dividers.

• The .table class adds basic styling to a table:

<html lang="en"><head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport"





</head><body>

<div class="container"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light

padding and only horizontal dividers) to a table:</p>

<table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td>

</tr> </tbody> </table></div></body></html>

Striped Rows

<html lang="en"><head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport"




<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></scrip>

</head><body>

<div class="container"> <h2>Striped Rows</h2> <p>The .table-striped class adds zebra-stripes to a

table:</p> <table class="table table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td>

</tr> </tbody> </table></div>

</body></html>

Bordered Table<html lang="en"><head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport"





</head>

<body><div class="container"> <h2>Bordered Table</h2> <p>The .table-bordered class adds

borders to a table:</p> <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td>

</tr> </tbody> </table></div></body></html>

Bootstrap Images

• There are basically three different class to represent an image they are as follow:1. Rounded Corners.2. Circle.3. Thumbnail.

1. Rounded Corners

• This class helps us to give a smooth rounded vertex in an image.

• It is represented by img-rounded – Sysntax:

<img src=“mount.jpg" class="img-rounded" width="304" height="236">

2. Circle

• This class helps us to give a circular image.• It is represented by img-circle – Sysntax:

<img src=“mount.jpg" class="img-circle" width="304" height="236">

3. Thumbnail

• This class shapes the image to a thumbnail.• It is represented by img-thumbnail – Syntax:

<img src=“mount.jpg" class="img-thumbnail" width="304" height="236">

<div class="container"> <h2>Circle</h2> <p>The img-circle class shapes the image to a circle (not available in IE8):</p> <img src="mount.jpg" class="img-circle" width="304" height="236"> </div><div class="container"> <h2>Thumbnail</h2> <p>The img-thumbnail class shapes the image to a thumbnail:</p> <img src="mount.jpg" class="img-thumbnail" width="304" height="236"> </div>

Bootstrap Alert

• Bootstrap provides an easy way to create predefined alert messages.

• Alerts are created with the .alert class, followed by of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger.

div class="container"> <h2>Alerts</h2> <div class="alert alert-success"><strong>Success!</strong> This alert box could indicate a successful or positive action. </div> <div class="alert alert-info"> <strong>Info!</strong> This alert box could indicate a neutral informative change or action. </div> <div class="alert alert-warning"> <strong>Warning!</strong> This alert box could indicate a warning that might need attention. </div> <div class="alert alert-danger"> <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action. </div>

Alert Links

• Add the .alert-link class to any links inside the alert box to create "matching colored links"

<div class="container"> <h2>Alert Links</h2> <p>Add the alert-link class to any links inside the alert box to create "matching colored links".</p> <div class="alert alert-success"><strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>. </div> <div class="alert alert-info"> <strong>Info!</strong> You should <a href="#" class="alert-link">read this message</a>. </div> <div class="alert alert-warning"> <strong>Warning!</strong> You should <a href="#" class="alert-link">read this message</a>.</div> <div class="alert alert-danger"> <strong>Danger!</strong> You should <a href="#" class="alert-link">read this message</a>. </div>

Button group• Bootstrap allows you to group a series of buttons

together (on a single line) in a button group.

• Use a <div> element with class .btn-group to create a button group

Closing Alerts

• To close the alert message, add a .alert-dismissable class to the alert container. Then add class=“close” and data-dismiss=“alert” to link or a button element (when you click on this the alert box will disappear).

Animated Alerts

• The .fade and .in classes adds a fading effect when closing the alert message

<div class="container"><h2>Animated Alerts</h2><p>The .fade and .in classes adds a fading effect when closing the alert message.</p> <div class="alert alert-success alert-dismissable fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <strong>Success!</strong> This alert box could indicate a successful or positive action. </div> <div class="alert alert-info alert-dismissable fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <strong>Info!</strong> This alert box could indicate a neutral informative change or action. </div>

<div class="alert alert-warning alert-dismissable fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <strong>Warning!</strong> This alert box could indicate a warning that might need attention. </div> <div class="alert alert-danger alert-dismissable fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action. </div></div>

Bootstrap Buttons

1. Button Styles• Bootstrap provides seven styles of buttons• To achieve the button styles above, Bootstrap

has the following classes:1. .btn-default2. .btn-primary3. .btn-success4. .btn-info5. .btn-warning6. .btn-danger7. .btn-link

<div class="container"> <h2>Button Styles</h2> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> </div>

Bootstrap Button

2. Block Level Button• A block level button spans the entire width of

the parent element.• Add class .btn-block to create a block level

button

<div class="container"> <h2>Block Level Buttons</h2> <button type="button" class="btn btn-primary btn-block">Button 1</button> <button type="button" class="btn btn-default btn-block">Button 2</button>

<h2>Large Block Level Buttons</h2> <button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button> <button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>

<h2>Small Block Level Buttons</h2> <button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button> <button type="button" class="btn btn-default btn-sm btn-block">Button 2</button></div>

Bootstrap Button

3. Active/Disabled Buttons• A button can be set to an active (appear

pressed) or a disabled (unclickable) state• The class .active makes a button appear

pressed, and the class .disabled makes a button unclickable.

<div class="container"> <h2>Button States</h2> <button type="button" class="btn btn-primary">Primary Button</button> <button type="button" class="btn btn-primary active">Active Primary</button> <button type="button" class="btn btn-primary disabled">Disabled Primary</button></div>

Bootstrap Button Groups

• Bootstrap allows you to group a series of buttons together (on a single line) in a button group.

Example…….

<!DOCTYPE html><html lang="en"><head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport“ content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body>

<div class="container"> <h2>Button Group</h2> <p>The .btn-group class creates a button group:</p> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div></div>

</body></html>

Output

NOTE: Instead of applying button sizes to every button in a group, use class .btn-group-lg|sm|xs to size all buttons in the group.

Example….

<div class="container"> <h2>Button Groups - Set Sizes</h2> <p>Add class .btn-group-* to size all buttons in a button group.</p> <h3>Large Buttons:</h3> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div>

<h3>Default Buttons:</h3> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div>h3>Small Buttons:</h3> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div>

Output:

Vertical Button Groups example…

<div class="container"> <h2>Vertical Button Group</h2> <p>Use the .btn-group-vertical class to create a vertical button group:</p> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div></div>

Justified Button Groups

• Note: For <button> elements, you must wrap each button in a .btn-group class

Example…..

<div class="container"> <h2>Justified Button Groups</h2> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">Samsung</button> </div> <div class="btn-group"> <button type="button" class="btnbtn-primary">Sony</button> </div> </div></div>

Nesting Button Groups & Dropdown Menus

<div class="container"> <h2>Nesting Button Groups</h2> <p>Nest button groups to create drop down menus:</p> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Sony <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Tablet</a></li> <li><a href="#">Smartphone</a></li> </ul> </div>

Split Button Dropdowns

<div class="container"> <h2>Split Buttons</h2> <div class="btn-group"> <button type="button" class="btn btn-primary">Sony</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Tablet</a></li> <li><a href="#">Smartphone</a></li> </ul> </div></div>

Glyphicons

• Bootstrap provides 260 glyphicons from the Glyphicons Halflings set.

• Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.

• Syntax:• <span class="glyphicon glyphicon-name"></span>

http://glyphicons.com/

Example….

<div class="container"> <h2>Glyphicon Examples</h2> <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p> <p>Envelope icon as a link: <a href="#"><span class="glyphicon glyphicon-envelope"></span></a> </p> <p>Search icon: <span class="glyphicon glyphicon-search"></span></p> <p>Search icon on a button: <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-search"></span> Search </button> </p>

<p>Search icon on a styled button: <button type="button" class="btn btn-info"> <span class="glyphicon glyphicon-search"></span> Search </button> </p> <p>Print icon: <span class="glyphicon glyphicon-print"></span></p> <p>Print icon on a styled link button: <a href="#" class="btn btn-success btn-lg"> <span class="glyphicon glyphiconprint"></span> Print </a> </p> </div>

Output

Bootstrap Progress Bars

Progress Bar With Label

<div class="container"> <h2>Progress Bar With Label</h2> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% </div> </div>

Colored Progress Bars

• Contextual classes are used to provide "meaning through colors".

• The contextual classes that can be used with progress bars are:

• .progress-bar-success• .progress-bar-info• .progress-bar-warning• .progress-bar-danger

Example….

<div class="container"> <h2>Colored Progress Bars</h2> <p>The contextual classes colors the progress bars:</p> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% Complete (success) </div>

Output

Animated Progress Bar

<div class="container"> <h2>Animated Progress Bar</h2> <p>The .active class animates the progress bar:</p> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% </div>

Stacked Progress Bars

<div class="container"> <h2>Stacked Progress Bars</h2> <p>Create a stacked progress bar by placing multiple bars into the same div with class .progress:</p> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%"> Free Space </div> <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%"> Warning </div> <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%"> Danger </div> </div>

Bootstrap - Pagination

• If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.

• A basic pagination in Bootstrap looks like this:

• To create a basic pagination, add the .pagination class to an <ul> element.

• <ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li></ul>

Active state

• The active state shows what is the current page.• Class .active is used to let the user know which page

he/she is on.

• <ul class="pagination"> <li><a href="#">1</a></li> <li class="active"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li></ul>

Disabled state

• A disabled link cannot be clicked.• Add class .disabled if a link for some reason is

disabled.

• <ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="disabled"><a href="#">4</a></li> <li><a href="#">5</a></li></ul>

• Pagination Sizing• Pagination blocks can also be sized to a larger

size or a smaller size.• Add class .pagination-lg for larger blocks

or .pagination-sm for smaller blocks:

• Breadcrumbs• Another form for pagination, is breadcrumbs.• The .breadcrumb class indicates the current

page's location within a navigational hierarchy.

Bootstrap Pager

• Pager is also a form of pagination.• Pager provides previous and next buttons

(links).• To create previous/next buttons, add

the .pager class to an <ul> element:

• Align Buttons• Use the .previous and .next classes to align each

button to the sides of the page:• <ul class="pager">

<li class="previous"><a href="#">Previous</a></li> <li class="next"><a href="#">Next</a></li></ul>

Bootstrap List Groups

• Basic List Groups• The most basic list group is an unordered list

with list items:

• To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item:

• <ul class="list-group"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li></ul>

List Group With Badges

• You can also add badges to a list group. The badges will automatically be positioned on the right:

• To create a badge, create a <span> element with class .badge inside the list item.

• <ul class="list-group"> <li class="list-group-item">New <span class="badge">12</span></li> <li class="list-group-item">Deleted <span class="badge">5</span></li> <li class="list-group-item">Warnings <span class="badge">3</span></li> </ul>

Active & Disabled

• Use the .active class to highlight the current item.• To disable an item, use the .disabled class.

• <div class="list-group"> <a href="#" class="list-group-item active">First item</a> <a href="#" class="list-group-item">Second item</a> <a href="#" class="list-group-item">Third item</a></div>

• <div class="list-group"> <a href="#" class="list-group-item disabled">First item</a> <a href="#" class="list-group-item">Second item</a> <a href="#" class="list-group-item">Third item</a></div>

Contextual Classes• Contextual classes can be used to color

list items:

• The classes for coloring list-items are: .list-group-item-success, list-group-item-info, list-group-item-warning, and .list-group-item-danger.

• <ul class="list-group"> <li class="list-group-item list-group-item-success">First item</li> <li class="list-group-item list-group-item-info">Second item</li> <li class="list-group-item list-group-item-warning">Third item</li> <li class="list-group-item list-group-item-danger">Fourth item</li></ul>

Bootstrap Dropdown

• A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list.

Example

• <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul></div>

• The .dropdown class indicates a dropdown menu.• To open the dropdown menu, use a button or a

link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute.

• The .caret class creates a caret arrow icon, which indicates that the button is a dropdown.

• Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu.

Dropdown Divider

• The .divider class is used to separate links inside the dropdown menu with a thin horizontal border:

• <li class="divider"></li>

Dropdown Header

• The .dropdown-header class is used to add headers inside the dropdown menu:

• <li class="dropdown-header">Dropdown header 1</li>

• Dropdown Position• <ul class="dropdown-menu dropdown-menu-

right">

• Dropup• If you want the dropdown menu to expand

upwards instead of downwards, change the <div> element with class="dropdown" to "dropup":

Bootstrap Tabs and Pills

• 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.

• Tabs are created with <ul class="nav nav-tabs“

Bootstrap Tabs

• Tabs can also hold dropdown menus.• You can also add icons to your tabs to make it more

attractive.

<!DOCTYPE html><head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><div class="container"> <h3>Tabs With Dropdown Menu</h3>

<ul class="nav nav-tabs"><li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Submenu 1-1</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li><div class="bs-example"><ul class="nav nav-tabs"><li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li> <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Messages</a></li> </ul></div></ul></div></body></html>

Bootstrap Pills

• Similarly you can create a basic pill based navigation using the base class .nav-pills instead of .nav-tabs, without any further change in markup.

Bootstrap Pills

• Stacked Pills NavPills navigations are horizontal by default. To make them appear vertically stacked, just add an extra class .nav-stacked to the <ul> element.

<!DOCTYPE html><head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body>

<div class="container"> <h3>Vertical Pills With Dropdown Menu</h3> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a><ul class="dropdown-menu"> <li><a href="#">Submenu 1-1</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> </ul></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul></div></body></html>

Bootstrap Forms

Bootstrap provides three types of form layouts:• Vertical form (this is default)• Horizontal form• Inline form

Bootstrap Forms

• Creating Vertical Form LayoutThis is the default Bootstrap form layout in which styles are applied to form controls without adding any base class to the <form> element or any large changes in the markup.

<!DOCTYPE html><head><meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><div class="container"> <h2>Vertical (default) form</h2> <form>

<div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"></div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form></div></body></html>

Bootstrap Forms

• Creating Inline Form LayoutSometimes you might require to place the form controls side-by-side to compact the layout. You can do this easily by adding the Bootstrap class .form-inline to the <form> element.

<!DOCTYPE html><head><meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><div class="container"> <h2>Inline form</h2>

<form class="form-inline"> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"></div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label></div> <button type="submit" class="btn btn-default">Submit</button> </form></div></body></html>

Bootstrap Forms

• Creating Horizontal Form LayoutIn horizontal form layout labels are right aligned and floated to left to make them appear on the same line as form controls.

<body><div class="container"> <h2>Horizontal form</h2> <form class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> </div><div class="form-group"> <label class="control-label col-sm-2" for="pwd">Password:</label> <div class="col-sm-10"> <input type="password" class="form-control" id="pwd" placeholder="Enter password"></div>

</div><div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div></div></div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form></div></body></html>

Bootstrap Form Inputs

• Bootstrap natively supports the most common form controls mainly input, textarea, checkbox, radio, and select.

• The most common form text field is the input field. This is where users will enter most of the essential form data. Bootstrap offers support for all native HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Proper type declaration is required to make Inputs fully styled.


Inputs<form role = "form"> <div class = "form-group"> <label for = "name">Label</label> <input type = "text" class = "form-control" placeholder = "Text input"> </div> </form>


Text area<form role = "form"><div class = "form-group"> <label for = "name">Text Area</label> <textarea class = "form-control" rows = "3"></textarea> </div> </form>


Checkboxes<form> <div class="checkbox"> <label><input type="checkbox" value="">Option 1</label> </div> <div class="checkbox"><label> <input type="checkbox" value="">Option 2</label> </div> <div class="checkbox disabled"> <label><input type="checkbox" value="" disabled>Option 3</label> </div> </form>


Radio Buttons <form> <div class="radio"><label><input type="radio" name="optradio">Option 1</label></div> <div class="radio"><label><input type="radio" name="optradio">Option 2</label></div><div class="radio disabled"><label><input type="radio" name="optradio" disabled>Option 3</label> </div></form>


Select List<form> <div class="form-group"> <label for="sel1">Select list (select one):</label> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option></select> </div> </form>

Bootstrap Media Object

• If you want to create a layout that contains left- or right-aligned media object like images or video alongside the textual content such as blog comments, Tweets, etc.

• Use a <div> element with the .media class to create a container for media objects.

• Use the .media-left class to align the media object (image) to the left, or the .media-right class to align it to the right.

• Text that should appear next to the image, is placed inside a container with class="media-body".

• Additionally, you can use .media-heading for headings.

<div class="container"> <h2>Media Object</h2> <p>The media object can also be top, middle or bottom-aligned with the "media-top", "media-middle" or "media-bottom" class:</p><br> <div class="media"> <div class="media-left media-top"> <img src="img_avatar1.png" class="media-object" style="width:80px"> </div> <div class="media-body"> <h4 class="media-heading">Media Top</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div>

<div class="media"> <div class="media-left media-middle"> <img src="img_avatar1.png" class="media-object" style="width:80px"> </div> <div class="media-body"> <h4 class="media-heading">Media Middle</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> </div> <hr>

<div class="media"> <div class="media-left media-bottom"> <img src="img_avatar1.png" class="media-object" style="width:80px"> </div> <div class="media-body"> <h4 class="media-heading">Media Bottom</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div></div>

Bootstrap Media Object

THANK YOU

bootstrap [part 1]

Education