Scribd
Upload
28 views77 pages

Bootstrap

Uploaded by

Dewang Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
28 views77 pages

Bootstrap

Uploaded by

Dewang Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 77

Bootstrap

By:-
Vilas Machhi
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

What is 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.
Why Use 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, Edge, Safari, and Opera)
Where to Get Bootstrap?
• There are two ways to start using Bootstrap on your own web site.
• You can:
• Download Bootstrap from getbootstrap.com
• Include Bootstrap from a CDN
Bootstrap CDN
• If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).
• MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:
MaxCDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->


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

<!-- Latest compiled JavaScript -->


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
• One advantage of using the Bootstrap CDN:
• Many users already have downloaded Bootstrap from MaxCDN when
visiting another site. As a result, it will be loaded from cache when
they visit your site, which leads to faster loading time. Also, most
CDN's will make sure that once a user requests a file from it, it will be
served from the server closest to them, which also leads to faster
loading time.
Create First Web Page With
Bootstrap
1. 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>
2. 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">

• The width=device-width part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device).
• The initial-scale=1 part sets the initial zoom level when the page is
first loaded by the browser.
3. Containers
• Bootstrap also requires a containing element to wrap site contents.
• There are two container classes to choose from:
• The .container class provides a responsive fixed width container
• The .container-fluid class provides a full width container, spanning the entire width of the
viewport
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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1> with a responsive fixed width
<p>This is some text.</p> container
</div>

</body>
</html>
OR
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
with a full width container
<p>This is some text.</p>
</div>
Bootstrap Grids
• 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:

Span1 span2 span3 span4 span5 span6 span7 span8 span9 span10 span11 span12

span4 span4 span4


span4 span8
span6 span6
span12

• Bootstrap's grid system is responsive, and the columns will re-arrange


automatically depending on the screen size.
Grid Classes
• The Bootstrap grid system has four classes:
• xs (for phones - screens less than 768px wide)
• sm (for tablets - screens equal to or greater than 768px wide)
• md (for small laptops - screens equal to or greater than 992px wide)
• lg (for laptops and desktops - screens equal to or greater than 1200px wide)
• The classes above can be combined to create more dynamic and flexible layouts.
• The following is a basic structure of a Bootstrap grid:
<div class="row">
<div class="col-*-*"></div>
<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>
• First; create a row (<div class="row">). Then, add the desired number
of columns (tags with appropriate .col-*-* classes). Note that
numbers in .col-*-* should always add up to 12 for each row.
Example
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
• Example shows how to get a three equal-width columns starting at
tablets and scaling to large desktops. On mobile phones or screens
that are less than 768px wide, the columns will automatically stack:
• Two Unequal Columns
Example
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Bootstrap Text/Typography
Bootstrap's Default Settings
• Bootstrap's global default font-size is 14px, with a line-height of 1.428.
• This is applied to the <body> element and all paragraphs (<p>).
• In addition, all <p> elements have a bottom margin that equals half their computed line-height
(10px by default).

<small>
• In Bootstrap the HTML <small> element is used to create a lighter, secondary text in any heading:
Example
<div class="container">
<h1>Lighter, Secondary Text</h1>
<p>The small element is used to create a lighter, secondary text in any heading:</p>
<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
</div>
<mark>
• Bootstrap will style the HTML <mark> element to highlight text
<abbr>
• <abbr> element is used to mark up an abbreviation or acronym
<blockquote>
• Bootstrap <blockquote> element is used to present content from another source
• To show the quote on the right, use the .blockquote-reverse class:
<dl>
• Bootstrap <dl> element indicates a description list
<code>
• Inline snippets of code should be embedded in the code element
<kbd>
• To indicate input that is typically entered via the keyboard, use the kbd element.
<pre>
• For multiple lines of code, use the pre element. Text in a pre element is displayed
in a fixed-width font, and it preserves both spaces and line breaks
Contextual Colors and Backgrounds
• Bootstrap also has some contextual classes that can be used to provide "meaning
through colors".
• The classes for text colors are:.text-muted, .text-primary, .text-success, .text-
info, .text-warning, and .text-danger:
Example
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
• The classes for background colors are:.bg-primary, .bg-success, .bg-
info, .bg-warning, and .bg-danger:
Example:
<p class="bg-primary">This text is important.</p>
<p class="bg-success">This text indicates success.</p>
<p class="bg-info">This text represents some information.</p>
<p class="bg-warning">This text represents a warning.</p>
<p class="bg-danger">This text represents danger.</p>
More Typography Classes
Class Description
.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-nowrap Indicates no wrap text
.text-lowercase Indicates lowercased text
.text-uppercase Indicates uppercased text
.text-capitalize Indicates capitalized text
.initialism Displays the text inside an <abbr> element in a slightly smaller font size
.list-unstyled Removes the default list-style and left margin on list items (works on both <ul> and <ol>).
This class only applies to immediate children list items (to remove the default list-style from any nested
lists, apply this class to any nested lists as well)
.list-inline Places all list items on a single line
.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
.pre-scrollable Makes a <pre> element scrollable
Bootstrap Tables
• A basic Bootstrap table has a light padding and only horizontal
dividers.
• The .table class adds basic styling to a table
• The .table-striped class adds zebra-stripes to a table
• The .table-bordered class adds borders on all sides of the table and
cells
• The .table-hover class adds a hover effect (grey background color) on
table rows
• The .table-condensed class makes a table more compact by cutting
cell padding in half
Contextual Classes
• Contextual classes can be used to color table rows (<tr>) or table cells
(<td>)
• The contextual classes that can be used are:
Class Description
.active Applies the hover color to the table row or table cell
.success Indicates a successful or positive action
.info Indicates a neutral informative change or action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action
Responsive Tables
• The .table-responsive class creates a responsive table. The table will then scroll
horizontally on small devices (under 768px). When viewing on anything larger than
768px wide, there is no difference
Example
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Bootstrap Images
• Bootstrap Image Shapes
• Rounded Corners
• Circle
• Thumbnail
Rounded Corners
• The .img-rounded class adds rounded corners to an image (IE8 does not support rounded corners):
Example
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre">
Circle
• The .img-circle class shapes the image to a circle (IE8 does not support rounded corners):
Example
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre">
Thumbnail
• The .img-thumbnail class shapes the image to a thumbnail:
Example
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Responsive Images
• Images come in all sizes. So do screens. Responsive images
automatically adjust to fit the size of the screen.
• Create responsive images by adding an .img-responsive class to the
<img> tag. The image will then scale nicely to the parent element.
• The .img-responsive class applies display: block; and max-width:
100%; and height: auto; to the image:
Example
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
Image Gallery
• You can also use Bootstrap's grid system in conjunction with
the .thumbnail class to create an image gallery.
Responsive Embeds
• Also let videos or slideshows scale properly on any device.
• Classes can be applied directly to <iframe>, <embed>, <video>, and <object> elements.
• The following example creates a responsive video by adding an .embed-responsive-item
class to an <iframe> tag (the video will then scale nicely to the parent element). The
containing <div> defines the aspect ratio of the video:
Example
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
• You can choose between two aspect ratio classes:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->


<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Bootstrap Jumbotron and Page Header
Creating a Jumbotron
• A jumbotron indicates a big box for calling extra attention to some special
content or information.
• A jumbotron is displayed as a grey box with rounded corners. It also enlarges
the font sizes of the text inside it.
Tip: Inside a jumbotron you can put nearly any valid HTML, including other
Bootstrap elements/classes.
• Use a <div> element with class .jumbotron to create a jumbotron
Jumbotron Inside Container
• Place the jumbotron inside the <div class="container"> if you want the
jumbotron to NOT extend to the edge of the screen
Jumbotron Outside Container
• Place the jumbotron outside the <div class="container"> if you want the
jumbotron to extend to the screen edges
Creating a Page Header
• A page header is like a section divider.
• The .page-header class adds a horizontal line under the heading (+
adds some extra space around the element)
• Use a <div> element with class .page-header to create a page header:
Example
<div class="page-header">
<h1>Example Page Header</h1>
</div>
Bootstrap Wells
Wells
• The .well class adds a rounded border around an element with a gray background color
and some padding:
Example
<div class="well">Basic Well</div>
Well Size
• Small Well
• Normal Well
• Large Well
• Change the size of the well by adding the .well-sm class for small wells or .well-lg class
for large wells:
Example
<div class="well well-sm">Small Well</div>
<div class="well well-lg">Large Well</div>
• By default, wells are medium in size.
Bootstrap Alerts
• Bootstrap provides an easy way to create predefined alert messages
• Alerts are created with the .alert class, followed by one of the four contextual
classes .alert-success, .alert-info, .alert-warning or .alert-danger
Example
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
Alert Links
• Add the alert-link class to any links inside the alert box to create "matching colored links"
Example
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Closing Alerts
• To close the alert message, add a .alert-dismissible class to the alert
container. Then add class="close" and data-dismiss="alert" to a link or a
button element (when you click on this the alert box will disappear).
Example
<div class="alert alert-success alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Animated Alerts
• The .fade and .in classes adds a fading effect when closing the alert
message:
Example
<div class="alert alert-danger fade in">
Bootstrap Buttons
Button Styles
• Bootstrap provides different styles of buttons
• To achieve the button styles, Bootstrap has the following classes:
• .btn
• .btn-default
• .btn-primary
• .btn-success
• .btn-info
• .btn-warning
• .btn-danger
• .btn-link
Example
<button type="button" class="btn">Basic</button>
<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>
• The button classes can be used on an <a>, <button>, or <input> element:
Example
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Why do we put a # in the href attribute of the link?
• Since we do not have any page to link it to, and we do not want to get a "404" message, we put # as the link
in our examples. It should be a real URL to a specific page.
Button Sizes
• Bootstrap provides four button sizes:
• Large
• Normal
• Small
• XSmall
• The classes that define the different sizes are:
• .btn-lg
• .btn-sm
• .btn-xs
Example
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Block Level Buttons
• A block level button spans the entire width of the parent element.
• Add class .btn-block to create a block level button:
Example
<button type="button" class="btn btn-primary btn-block">Button 1</button>
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:
Example
<button type="button" class="btn btn-primary active">Active
Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled
Primary</button>
Bootstrap Button Groups
Button Groups
• 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:
Example
<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>
Tip: 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="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>
Vertical Button Groups
• Bootstrap also supports vertical button groups:
• Use the class .btn-group-vertical to create a vertical button group:
Example
<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>
Justified Button Groups
• To span the entire width of the screen, use the .btn-group-justified class:
• Example with <a> elements:
Example
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
• Note: For <button> elements, you must wrap each button in a .btn-
group class:
Example
<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="btn btn-primary">Sony</button>
</div>
</div>
Nesting Button Groups & Dropdown
Menus
• Nest button groups to create dropdown menus:
Example
<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>
</div>
Split Button Dropdowns
Example
<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"> Output:
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
Bootstrap Glyphicons
Glyphicons
• Bootstrap provides 260 glyphicons from the Glyphicons Halflings set.
• Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.
• Here are some examples of glyphicons:
• Envelope glyphicon:
• Print glyphicon:
• Search glyphicon:
• Download glyphicon:
Glyphicon Syntax
• A glyphicon is inserted with the following syntax:
• <span class="glyphicon glyphicon-name"></span>
• The name part in the syntax above must be replaced with the proper name of the
glyphicon.
Bootstrap Badges and Labels
Badges
• Badges are numerical indicators of how many items are associated with a link:
• News 5
• Comments 10
• Updates 2
• The numbers (5, 10, and 2) are the badges.
• Use the .badge class within <span> elements to create badges
Example
<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>
• Badges can also be used inside other elements, such as buttons
Example
<button type="button" class="btn btn-primary">Primary <span
class="badge">7</span></button>
Labels
• Labels are used to provide additional information about something
• Use the .label class, followed by one of the six contextual classes .label-
default, .label-primary, .label-success, .label-info, .label-warning
or .label-danger, within a <span> element to create a label:
Example
<h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>
Bootstrap Progress Bars
Basic Progress Bar
• A progress bar can be used to show a user how far along he/she is in a process.
• Bootstrap provides several types of progress bars.
• To create a default progress bar, add a .progress class to a <div> element:
Example
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
• Note: Progress bars are not supported in Internet Explorer 9 and earlier (because they use
CSS3 transitions and animations to achieve some of their effects).
• Note: To help improve accessibility for people using screen readers, you should include the
aria-* attributes.
Progress Bar With Label
• Remove the .sr-only class from the progress bar to show a visible percentage:
Example
<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="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>
</div>
Striped Progress Bars
• Progress bars can also be striped
• Add class .progress-bar-striped to add stripes to the progress bars
Example
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-
valuemax="100" style="width:40%"> 40% Complete (success) </div>
Animated Progress Bar
• Add class .active to animate the progress bar:
Example
<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>
</div>
Stacked Progress Bars
• Progress bars can also be stacked
• Create a stacked progress bar by placing multiple bars into the same <div class="progress">:
Example
<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.
• To create a basic pagination, add the .pagination class to an <ul> element:
Example
<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
• Add class .active to let the user know which page he/she is on:
Example
<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 Pagination Sizing
• A disabled link cannot be clicked: • Pagination blocks can also be sized to a larger size or
a smaller size:
• Add class .disabled if a link for some reason is
disabled: • Add class .pagination-lg for larger blocks
or .pagination-sm for smaller blocks:
Example
• Example
<ul class="pagination">
<ul class="pagination pagination-lg">
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">5</a></li>
</ul>
</ul>
<ul class="pagination pagination-sm">
<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>
Breadcrumbs
• Another form for pagination, is breadcrumbs:
• The .breadcrumb class indicates the current page's location within a
navigational hierarchy:
Example
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul>
Bootstrap Pager
What is 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:
Example
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
Align Buttons
• Use the .previous and .next classes to align each button to the sides of the page:
Example
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
Bootstrap 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:
Example
<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:
Example
<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>
List Group With Linked Items
• The items in a list group can also be hyperlinks. This will add a grey background color
on hover:
• To create a list group with linked items, use <div> instead of <ul> and <a> instead of
<li>:
Example
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Active State
• Use the .active class to highlight the current item:
Example
<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>
Disabled Item
Custom Content
• To disable an item, add the .disabled class:
• You can add nearly any HTML inside a list
Example
<div class="list-group"> group item.
<a href="#" class="list-group-item disabled">First item</a> • Bootstrap provides the classes .list-
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
group-item-heading and .list-group-item-
</div> text which can be used as follows:
Contextual Classes Example
• Contextual classes can be used to color list items: <div class="list-group">
• The classes for coloring list-items are: .list-group-item-success, list-group-
item-info, list-group-item-warning, and .list-group-item-danger:
<a href="#" class="list-group-item
Example
active">
<ul class="list-group"> <h4 class="list-group-item-
<li class="list-group-item list-group-item-success">First item</li> heading">First List Group Item
<li class="list-group-item list-group-item-info">Second item</li> Heading</h4>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li> <p class="list-group-item-text">List
</ul> Group Item Text</p>
</a>
</div>
Bootstrap Panels
• 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:
Example
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
• The .panel-default class is used to style the color of the panel.
Panel Heading
• The .panel-heading class adds a heading to the panel:
Example
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
Panel Footer
• The .panel-footer class adds a footer to the panel:
Example
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Panel Group
• To group many panels together, wrap a <div> with class .panel-group around them.
• The .panel-group class clears the bottom-margin of each panel:
Example
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
</div>
Panels with Contextual Classes
• To color the panel, use contextual classes (.panel-default, .panel-primary, .panel-success, .panel-
info, .panel-warning, or .panel-danger):
Bootstrap Dropdowns
• 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:
Example
<li class="divider"></li>
Dropdown Header
• The .dropdown-header class is used to add headers inside the dropdown menu:
Example
<li class="dropdown-header">Dropdown header 1</li>
Disable and Active items
• Highlight a specific dropdown item with the .active class (adds a blue background color).
• To disable an item in the dropdown menu, use the .disabled class (gets a light-grey text color and a "no-
parking-sign" icon on hover):
Example
<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>
Dropdown Position
• To right-align the dropdown, add the .dropdown-menu-right class to the element with .dropdown-menu:
Example
<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":
Example
<div class="dropup">
Bootstrap Collapse
• Collapsibles are useful when you want to hide and show large amount of content
Example
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
• The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or
hidden with a click of a button.
• To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button>
element. Then add the data-target="#id" attribute to connect the button with the collapsible content (<div
id="demo">).
• Note: For <a> elements, you can use the href attribute instead of the data-target attribute
Example
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
• By default, the collapsible content is hidden. However, you can add the .in class to show the content by default:
Example
<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
Collapsible Panel
• The following example shows a collapsible panel:
Example
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
Collapsible List Group
• The following shows a collapsible panel with a list group inside:
Example
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
Bootstrap Tabs and Pills
Menus
• In HTML, a menu is often defined in an unordered list <ul> (and styled afterwards), like this:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
• If you want to create a horizontal menu of the list above, add the .list-inline class to <ul>:
<ul class="list-inline">
• Or you can display the menu above with Bootstraps' Tabs and Pills.
Tabs
• Tabs are created with <ul class="nav nav-tabs">:
• Tip: Also mark the current page with <li class="active">.
• The following example creates navigation tabs:
Example
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
Tabs With Dropdown Menu
• Tabs can also hold dropdown menus.
• The following example adds a dropdown menu to "Menu 1":
Example
<ul class="nav nav-tabs">
<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>
Pills
• Pills are created with <ul class="nav nav-pills">. Also mark the current page with <li class="active">:
Example
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Vertical Pills
• Pills can also be displayed vertically. Just add the .nav-stacked class:
Example
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Vertical Pills in a Row
• The following example places the vertical pill menu inside the last column. So, on a large screen the
menu will be displayed to the right. But on a small screen, the content will automatically adjust
itself into a single-column layout:
Example
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
Pills With Dropdown Menu
• Pills can also hold dropdown menus.
• The following example adds a dropdown menu to "Menu 1":
Example
<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>
Centered Tabs and Pills
• To center/justify the tabs and pills, use the .nav-justified class.
• Note that on screens that are smaller than 768px, the list items are stacked (content will remain
centered):
Example
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>

<!-- Centered Pills -->


<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Toggleable / Dynamic Tabs
• If you want the tabs to fade in and out when clicking on them, add the .fade class to .tab-pane:
Example
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Toggleable / Dynamic Pills
• The same code applies to pills; only change the data-toggle attribute to data-toggle="pill":
Bootstrap Navigation Bar
• With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
• A standard navigation bar is created with <nav class="navbar navbar-default">.
Example
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Inverted Navigation Bar
• If you don't like the style of the default navigation bar, Bootstrap provides an alternative, black navbar:
• Just change the .navbar-default class into .navbar-inverse:
<nav class="navbar navbar-inverse">
Navigation Bar With Dropdown
• Navigation bars can also hold dropdown menus.
• The following example adds a dropdown menu for the "Page 1" button:
Example
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Right-Aligned Navigation Bar
• The .navbar-right class is used to right-align navigation bar buttons.
• In the following example we insert a "Sign Up" button and a "Login" button to the right in the
navigation bar. We also add a glyphicon on each of the two new buttons:
• Example
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
Navbar Buttons
• To add buttons inside the navbar, add the .navbar-btn class on a Bootstrap button:
• <button class="btn btn-danger navbar-btn">Button</button>
Navbar Forms
• To add form elements inside the navbar, add the .navbar-form class to a form element and add an input(s). Note
that we have added a .form-group class to the div container holding the input. This adds proper padding if you
have more than one inputs
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
• You can also use the .input-group and .input-group-addon classes to attach an icon or help text next to the input
field.
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
Navbar Text
• Use the .navbar-text class to vertical align any elements inside the navbar that are not
links (ensures proper padding and text color).
Example
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav>
Fixed Navigation Bar
• The navigation bar can also be fixed at the top or at the bottom of the page.
• A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the
page scroll.
• The .navbar-fixed-bottom class makes the navigation bar stay at the bottom:
<nav class="navbar navbar-inverse navbar-fixed-bottom">
• The .navbar-fixed-top class makes the navigation bar fixed at the top:
<nav class="navbar navbar-inverse navbar-fixed-top">
Collapsing The Navigation Bar
• The navigation bar often takes up too much space on a small screen.
• We should hide the navigation bar; and only show it when it is needed.
• In the following example the navigation bar is replaced by a button in the top right corner. Only when the button is clicked, the navigation bar will be displayed:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
Bootstrap Forms
• Form controls automatically receive some global styling with Bootstrap:
• All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.
Bootstrap Form Layouts
• Bootstrap provides three types of form layouts:
• Vertical form (this is default)
• Horizontal form
• Inline form
• Standard rules for all three form layouts:
• Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)
• Add class .form-control to all textual <input>, <textarea>, and <select> elements
Bootstrap Vertical Form (default)
Bootstrap Inline Form

• In an inline form, all of the elements are inline, left-aligned, and the
labels are alongside.
• Note: This only applies to forms within viewports that are at least 768px
wide!
• Additional rule for an inline form:
• Add class .form-inline to the <form> element
<form class="form-inline" action="/action_page.php">
• Tip: If you don't include a label for every input, screen readers will have
trouble with your forms. You can hide the labels for all devices, except
screen readers, by using the .sr-only class:
<label class="sr-only" for="email">Email address:</label>
• Bootstrap Horizontal Form

• A horizontal form means that the labels are aligned next to the input
field (horizontal) on large and medium screens. On small screens
(767px and below), it will transform to a vertical form (labels are
placed on top of each input).
• Additional rules for a horizontal form:
• Add class .form-horizontal to the <form> element
• Add class .control-label to all <label> elements
• Tip: Use Bootstrap's predefined grid classes to align labels and groups
of form controls in a horizontal layout.
<form class="form-horizontal" action="/action_page.php">
Bootstrap Form Inputs
• Bootstrap supports the following form controls:
• input
• textarea
• checkbox
• radio
• select
Bootstrap Input
• Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date,
month, time, week, number, email, url, search, tel, and color.
• Note: Inputs will NOT be fully styled if their type is not properly declared!
• example contains two input elements; one of type text and one of type password:
Example
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
Bootstrap Textarea
Example
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Bootstrap Checkboxes
• Checkboxes are used if you want the user to select any number of options from a list of preset options.
• The following example contains three checkboxes. The last option is disabled:
Example
<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>
• Use the .checkbox-inline class if you want the checkboxes to appear on the same line:
Example
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
Bootstrap Radio Buttons
• Radio buttons are used if you want to limit the user to just one selection from a list of
preset options.
• The following example contains three radio buttons. The first option is checked by default
and the last option is disabled:
Example
<div class="radio">
<label><input type="radio" name="optradio" checked>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>
• Use the .radio-inline class if you want the radio buttons to appear on the same line:
Example
<label class="radio-inline"><input type="radio" name="optradio" checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
Bootstrap Select List
• Select lists are used if you want to allow the user to pick from
multiple options.
• The following example contains a dropdown list (select list):
Example
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
Bootstrap Input Sizing
Input Sizing in Forms
• Set the heights of input elements using classes like .input-lg and .input-sm.
• Set the widths of elements using grid column classes like .col-lg-*and .col-sm-*.
• examples shows input elements with different heights:
Example
<form>
<div class="form-group">
<label for="inputsm">Small input</label>
<input class="form-control input-sm" id="inputsm" type="text">
</div>
<div class="form-group">
<label for="inputdefault">Default input</label>
<input class="form-control" id="inputdefault" type="text">
</div>
<div class="form-group">
<label for="inputlg">Large input</label>
<input class="form-control input-lg" id="inputlg" type="text">
</div>
</form>
• You can quickly size labels and form controls within a Horizontal form by adding .form-group-* to the <div
class="form-group"> element:
Example
<div class="form-group form-group-lg">
• You can also quickly size all inputs and other elements inside an .input-group with the .input-group-sm
or .input-group-lg classes:
Example
<div class="input-group input-group-lg">
Column Sizing
• The following examples shows input elements with different widths using different .col-xs-* classes:
Example
<div class="form-group row">
<div class="col-xs-2">
<label for="ex1">col-xs-2</label>
<input class="form-control" id="ex1" type="text">
</div>
<div class="col-xs-3">
<label for="ex2">col-xs-3</label>
<input class="form-control" id="ex2" type="text">
</div>
<div class="col-xs-4">
<label for="ex3">col-xs-4</label>
<input class="form-control" id="ex3" type="text">
</div>
</div>

You might also like