1

UNIT IV BootStrap
Introduction:
  Bootstrap is a powerful front-end framework for faster and easier web development.
 It includes HTML and CSS based design templates for creating common user interface
components like forms, buttons, navigations, dropdowns, alerts, modals, tabs, accordions,
 carousels, tooltips, and so on.
 Bootstrap gives you ability to create flexible and responsive web layouts with much less
 efforts.
 Bootstrap was originally created by a designer and a developer at Twitter in mid-2010.
Before being an open-sourced framework, Bootstrap was known as Twitter Blueprint.

Importance of Bootstrap
There are lot more things that can be done with Bootstrap:

 Easily create responsive websites.

 Quickly create multi-column layout with pre-defined classes.
 Quickly create different types of form layouts.
 Quickly create different variation of navigation bar.
 Easily create components like accordions, modals, etc. without writing any JS code.
 Easily create dynamic tabs to manage large amount of content.
 Easily create tooltips and popovers to show hint text.
 Easily create carousel or image slider to showcase your content.
 Quickly create different types of alert boxes.

Apart from the above list there are many other interesting things that can be done with Bootstrap

Advantages of Using Bootstrap

 Save lots of time — You can save lots of time and efforts using the Bootstrap predefined
design templates and classes and concentrate on other development work.

 Responsive features — Using Bootstrap you can easily create responsive websites that
appear more appropriately on different devices and screen resolutions without any
change in markup.

 Consistent design — All Bootstrap components share the same design templates
and styles through a central library, so the design and layout of your web pages will be
consistent.

 Easy to use — Bootstrap is very easy to use. Anybody with the basic working knowledge
of HTML, CSS and JavaScript can start development with Bootstrap.

 Compatible with browsers — Bootstrap is created with modern web browsers in
mind and it is compatible with all modern browsers such as Chrome, Firefox, Safari,
Internet Explorer, etc.

 Open Source — And the best part is, it is completely free to download and use.

 Platform Independence: It creates Platform-independent web-pages
 2

What Bootstrap Package Includes?

 Scaffolding − Bootstrap provides a basic structure with Grid System, link styles, and
background.

 CSS − Bootstrap comes with the feature of global CSS settings; fundamental HTML
elements styled and enhanced with extensible classes, and an advanced grid system. 

 Components − Bootstrap contains over a dozen reusable components built to provide
iconography, dropdowns, navigation, alerts, pop-over, and much more.

 JavaScript Plugins − Bootstrap contains over a dozen custom jQuery plugins. You can
easily include them all, or one by one.

 Customize − you can customize Bootstrap's components, LESS variables, and jQuery
plugins to get your very own version. 

What is Responsive Web Design or Layout?

 Responsive web design is about creating web sites which automatically adjust themselves
to look good on all devices, from small phones to large desktops.

 Responsive web design is a process of designing and building websites to provide better
accessibility and optimal viewing experience to the user.

 With the growing trend of smart phones and tablets, it has become almost unavoidable to
ignore the optimization of sites for mobile devices. 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, whether it is
a desktop, a laptop, a tablet, or a mobile phone.

Drawbacks of Bootstrap
 Styles are verbose and can lead to lots of HTML output that's not perfectly semantic.

 JavaScript is tied to jQuery (it's by the far the most common javascript library though and
the plugins can just as easily be left unused).

 Can require lots of overriding styles or rewriting their files if you have lots of
customizations or want to deviate from Bootstrap structure.

 Websites can start to look the same if you don't customize the styles and colors much.
 3

Bootstrap Grid Structure

 Bootstrap includes a responsive, mobile first fluid grid system. It scales up to 12 columns as
the device or viewport size increases.

 Bootstrap grid system provides the quick and easy way to create responsive website layouts.
You can group the columns together to create wider columns:

span span span span span span span span span span span span
1 1 1 1 1 1 1 1 1 1 1 1

span 4 span 4 span 4

span 4 span 8

span 6 span 6

span 12

The columns will re-arrange automatically depending on the screen size.

Working of Bootstrap Grid System

Grid systems are used for creating page layouts through a series of rows and columns that display
your content. Here's how the Bootstrap grid system works −

 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 the columns, and only columns may be the immediate
 children of rows.
 Predefined grid classes like .row and .col-xs-no are available for quickly making grid
 layouts.
 Grid columns are created by specifying the number of twelve available columns you wish to
span. For example, three equal columns would use three .col-xs-4.
 4

Basic Structure of a Bootstrap Grid

 The following is a basic structure of a Bootstrap grid:
Struct:1
 <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>

 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.
Struct:2
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</ div>
<div class = "row">...</div>
</ div>
<div class = "container">
....
</div >

Grid Classes
 Bootstrap includes predefined grid classes for quickly making grid layouts for different types of
devices like cell phones, tablets, laptops and desktops, etc
 The Bootstrap grid system has four classes:

Class-prefix Device Screen size

.col-xs phones <768px

.col-sm tablets ≥768px
.col-md desktops ≥992px
.col-lg larger ≥1200px
desktops
 The classes above can be combined to create more dynamic and flexible layouts.

 For example,
o you can use the .col-xs-* class to create grid columns for extra small devices like cell
phones,
 o .col-sm-* class for small screen devices like tablets,
o .col-md-* class for medium size devices like desktops and
o .col-lg-* for large desktop screens.
 5

Example
How to get a three equal-width columns starting starting at tablets and scaling to large
desktops. On mobile phones, the columns will automatically stack: Three Equal Columns

.col-sm-4 .col-sm-4 .col-sm-4

<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>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>

<link rel="stylesheet" href="bootstrap_folder/bootstrap.min.css">

</head>
<body>
<div">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>

</body>
</html>
Three column
(1) equal colomn
<!--Row with three equal columns-->
<div class="row">
<div class="col-md-4">!--Column left--</div>
<div class="col-md-4">--Column middle--</div>
<div class="col-md-4">--Column right--</div>
</div>

2) <!--Row with three columns divided in 1:4:1 ratio-->

<div class="row">
<div class="col-md-2">--Column left--</div> <div
class="col-md-8">--Column middle--</div> <div
class="col-md-2">--Column right--</div>
</div>

3) <!--Row with three columns divided unevenly-->

<div class="row">
<div class="col-md-3">--Column left--</div> <div
class="col-md-7">--Column middle--</div>
 6

<div class="col-md-2">--Column right--</div>

</div>

Two equal column

<div class="container">
<!--Row with two equal columns-->
<div class="row">
<div class="col-sm-6">--Column left--</div>
<div class="col-sm-6">--Column right--</div>
</div>

<!--Row with two columns divided in 1:2 ratio-->

<div class="row">
<div class="col-sm-4">--Column left--</div>
<div class="col-sm-8">--Column right--</div>
</div>

<!--Row with two columns divided in 1:3 ratio-->

<div class="row">
<div class="col-sm-3">--Column left--</div>
<div class="col-sm-9">--Column right--</div>
</div>
</div>
Two unequal column
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>

Example create two row: with uneven no. of column

<div class="container-fluid">

<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-
8</div> </div>
<div class="row">
<div class="col-sm-2" style="background-color:orange;">.col-sm-2</div>
<div class="col-sm-4" style="background-color:green;">.col-sm-4</div>
<div class="col-sm-*" style="background-color:yellow;">.col-sm-6</div>
</div>
</div>
 7

Bootstrap Tables

 Bootstrap provides a clean layout for building tables and you can greatly improve the
appearance of table
 A basic Bootstrap table has a light padding and only horizontal dividers.
 Table elements supported by Bootstrap are :

Tag Description

<table> Wrapping element for displaying data in a tabular format

<thead> Container element for table header rows (<tr>) to label table columns.

<tbody> Container element for table rows (<tr>) in the body of the table.

<tr> Container element for a set of table cells (<td> or <th>) that appears on
a single row.

<td> Default table cell.

<th> Special table cell for column (or row, depending on scope and
placement) labels. Must be used within a <thead>

<caption> Description or summary of what the table holds.

Other optional <table> Classes

Use the classes below to style any table:

Class Description

.table Adds basic styling (light padding and only horizontal dividers) to any
<table>

.table-striped Adds zebra-striping to any table row within <tbody>. You can create
table with alternate background like zebra-stripes

.table-bordered Adds border on all sides of the table and cells

.table-hover Enables a hover state on table rows within a <tbody>

.table-condensed Makes table more compact by cutting cell padding in half and save
the space

.table-responsive Make the table scroll horizontally up to small devices(under 768px)

 8

<tr>, <th> and <td> Contextual Classes

Use the classes below to color table rows or cells: contextual classes

Class Description

.active Applies the hover color to a particular row or 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

Basic Table Example

If you want a nice, basic table style with just some light padding and horizontal dividers, add
the base class of .table to any table as shown in the following example – <!DOCTYPE HTML>

<html>
<head>
<title>Bootstrap Tables</title>
<link rel="stylesheet" ref="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<table class = "table">
<caption>Basic Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abhay</td>
<td>80</td>
</tr>
<tr>
<td>Sachin</td>
<td>75</td>
</tr>
</tbody>
</table>
</body>
</html>
 9

Bootstrap Form-control
 HTML forms are the integral part of the web pages and applications, but styling the
 form controls manually one by one with CSS are often boring and tedious.
 Bootstrap makes it easy with the simple HTML markup and extended classes for different
styles of forms controls like labels, input fields, selectboxes, textareas, buttons, etc. through
predefined set of classes.
 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 provides three different types of form layouts:
1. Vertical Form (default form layout)
2. Horizontal Form
3. 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

Classes Used for Supported variations

.form-group Any group of form controls Use with any block-level element
like <fieldset> or <div>
.form-control : Textual inputs text, password, datetime-
it make input local, date, month, time,week, number,
element full-width email, url,search, tel, color
Select menus multiple, size
Textareas N/A
.form-control-file File inputs file
.checkbox Checkboxes N/A
.checkbox-inline
.radio Radio N/A
.radio-inline
.input-lg for bigger input elements
than default-size (used with
input elemnt)
.input-sm for smaller input elements
than default-size
 10

Vertical or Basic Form

This is the default Bootstrap form layout in which styles are applied to form controls without
adding any base class to the <form> element..

<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div>
<h2>Vertical (basic) 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>

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

</form>
</div>
</body>
</html>
Output
 11

Horizontal Form Layout

In horizontal form layout labels are right aligned and floated to left to make them appear on
the same line as form controls.
To create a form that uses the horizontal layout, do the following −
 Add a class of .form-horizontal to the parent <form> element.
 Wrap labels and controls in a <div> with class .form-group.
 Add a class of .control-label to the labels.

<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>
</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>
 12

Inline Form Layout

 In an inline form, all of the elements are inline, left-aligned, and the labels are
alongside. 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.

Example: 1
<form class="form-inline">
<div class="form-group">
<label for="name1"> name </label>
<input type="text" class="form-control" id="name1" placeholder="name"/>
</div>
</form>

output

Example 2
<form class="form-inline" >
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control"
id="email"> </div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
id="pwd"> </div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
 13

Supported Form Controls

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.

The following example contains two input elements; one of type text and one of type password:
<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"> </div>

Bootstrap Textarea
The following example contains a textarea:
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5"
id="comment"></textarea> </div>

Bootstrap Checkboxes
The following example contains three checkboxes. The last option is disabled

<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
 14

Bootstrap Radio Buttons

The following example contains three radio buttons. The first option is checked by default and the
last option is disabled

<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

Bootstrap Select List

The following example contains a dropdown list (select list):

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

Height Sizing of Form control

You can set heights and widths of forms using classes:
To set height use
.input-lg for bigger input elements than default-size
.input-sm for smaller input elements than default-size

<input type="text" class="form-control" placeholder="default"> <input

type="text" class="form-control input-lg" placeholder="large"> <input
type="text" class="form-control input-sm" placeholder="small">
 15

Bootstrap Alerts
 Bootstrap provides an easy way to create predefined alert messages.

 You can add a basic alert by creating a wrapper <div> and adding a class of .alert and one
of the four contextual classes:

.alert-success This alert box indicates a successful or positive action.

.alert-info This alert box indicates a neutral informative change or action.
.alert-warning This alert box indicates a warning that might need attention.
.alert-danger This alert box indicates a dangerous or potentially negative action.
.alert-primary This alert box indicates an important action
.alert-secondary This alert box indicates a less important action
.alert-light Dark grey alert box
.alert-dark Light grey alert box.

 Alerts are created with the .alert class, followed by one of the contextual classes.alert-
success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary,
.alert-light or .alert-dark

 The following example demonstrates this −
<!DOCTYPE html>
<html>
<head>
<title>Try v1.2 Bootstrap Online</title>
<link href=”bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class = "alert alert-success">Success! Well done its

submitted.</div> <div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>

</body>
</html>
 16

Closing Alerts
To build a dismissal alert −
 Add a basic alert by creating a wrapper <div> and adding a class of .alert and one of the
contextual classes
 Also add optional .alert-dismissable to the above <div> class.
 Add a close button.
The following example demonstrates this −
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>

Alert Links
To get links in alerts
 Add a basic alert by creating a wrapper <div> and adding a class of .alert and one of the
contextual classes.
 Use the .alert-link utility class to quickly provide matching colored links within any alert.
 The following example demonstrates this −

<div class="alert alert-success">

<strong>Success!</strong> You should <a href="#" class="alert-link">read this
message</a>.
</div>

Animated Alerts
 The .fade and .show classes adds a fading effect when closing the alert message
 Example-

<div class="alert alert-danger alert-dismissible fade show">

 17

Bootstrap Buttons
Buttons are the integral part of a website and application. They are used for various purposes like,
submit or reset an HTML form, performing interactive actions such as showing or hiding something
on a web page on click of the button, etc. The Bootstrap button CSS provides the quick and easy
way to create and customize the buttons.

Button Styles
Different classes are available in Bootstrap for styling and state Button styles can be applied to any
element.
However, it is applied normally to the <a>, <input>, and <button> elements for the best rendering.

Lists of the different buttons which are available in the Bootstrap:

Button Class Description

btn btn-default Default gray button with gradient.

btn btn-primary Provides extra visual weight to indicate primary action

button in a set of buttons.

btn btn-info Can be used as an alternative to the default button.

btn btn-success Indicates a successful or positive action.

btn btn-warning Indicates caution should be taken with this action.

btn btn-danger Indicates a dangerous or potentially negative action.

btn btn-link Deemphasize a button by making it look like a link

while maintaining button behavior.

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</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>
 18

Button Sizes (Changing the Sizes of Buttons)

Bootstrap gives you option to scaling a button up or down. You can make buttons larger or smaller
through adding an extra class .btn-lg, .btn-sm, or .btn-xs.

Class Description

.btn-lg This makes the button size large.

.btn-sm This makes the button size small.

.btn-xs This makes the button size extra small.

btn-md This makes the button size mediaum.

.btn-block This creates block level buttons—those that span the

full width of a parent.

<button type="button" class="btn btn-lg">large</button>

<button type="button" class="btn btn-xs">extra small</button>
<button type="button" class="btn btn-sm">small</button>
<button type="button" class="btn btn-block">block</button>
<button type="button" class="btn btn-md">medium</button>

Button State
A button can be set to an active (appear pressed) or a disabled (unclickable) state:
Active Primary Disabled Primary

(i) Active State

Buttons will appear pressed (with a darker background, darker border, and inset shadow)
when active.

Classes used to make button elements and anchor elements active −

Element Class

Button element Use .active class to show that it is activated.

Anchor element Use .active class to <a> buttons to show that it is activated.

<button type="button" class="btn active">active button</button>

 19

ii)Disabled State
 Sometimes we need to disable a button for certain reasons like, a user in case is not eligible to
perform this particular action, or we want to ensure that user should performed all other
required actions before proceed to this particular action.
 It is unclickable
 When you disable a button, it will fade in color by 50%, and lose the gradient.
 classes used to make button element and anchor element disabled −
Element Class

Button element Add the disabled attribute to <button> buttons.

Anchor element Add the disabled class to <a> buttons.

Note − This class will only change the <a>'s appearance, not its
functionality. You need to use custom JavaScript to disable links
here.
<button type="button" class="btn disabled">disable button</button>

Creating Disabled Buttons Using Anchor Elements

Buttons created through <a> tag can be disabled by adding the class .disabled.

<a href="#" class="btn active">active</a>

<a href="#" class="btn btn-default disabled">Link</a>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled
Primary</button>
 20

Button groups allow multiple buttons to be stacked together on a single line. This is useful when
you want to place items like alignment buttons together.

You can add on optional JavaScript radio and checkbox style behavior with Bootstrap
Button Plugin.

Following table summarizes the important classes Bootstrap provides to use button groups −
Class Description Code Sample

.btn-group This class is used for a <div class = "btn-group">

basic button group. Wrap a <button type = "button" class = "btn btn-
series of buttons with default">Button1</button>
class .btn in .btn-group. <button type = "button" class = "btn btn-
default">Button2</button>
</div>

.btn-toolbar This helps to combine sets <div class = "btn-toolbar" role = "toolbar">
of <div class = "btn-group"> <div class = "btn-group">...</div>
into a <div class = "btn- <div class = "btn-group">...</div>
toolbar"> for more complex </div>
components.

.btn-group-lg, These classes can be <div class = "btn-group btn-group-lg">...</div>

.btn-group-sm, applied to button group <div class = "btn-group btn-group-sm">...</div>
.btn-group-xs instead of resizing each <div class = "btn-group btn-group-xs">...</div>
button.

.btn-group- This class make a set of <div class = "btn-group-vertical">

vertical buttons appear vertically ...
stacked rather than </div>
horizontally.

Basic Button Group

The following example demonstrates the use of class .btn-groupdiscussed in the above table
− <div class = "btn-group">

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

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

</div>
 21

Button Toolbar
The following example demonstrates the use of class .btn-toolbar discussed in the above table −
<div class = "btn-toolbar" role = "toolbar">

<div class = "btn-group">

<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>

<div class = "btn-group">

<button type = "button" class = "btn btn-default">Button 4</button>
<button type = "button" class = "btn btn-default">Button 5</button>
<button type = "button" class = "btn btn-default">Button 6</button>
</div>

<div class = "btn-group">

<button type = "button" class = "btn btn-default">Button 7</button>
<button type = "button" class = "btn btn-default">Button 8</button>
<button type = "button" class = "btn btn-default">Button 9</button>
</div>

</div>

Button Size

The following example demonstrates the use of class .btn-group-* discussed in the above table −
<div class = "btn-group btn-group-lg">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>

<div class = "btn-group btn-group-sm">

<button type = "button" class = "btn btn-default">Button 4</button>
<button type = "button" class = "btn btn-default">Button 5</button>
<button type = "button" class = "btn btn-default">Button 6</button>
</div>

<div class = "btn-group btn-group-xs">

<button type = "button" class = "btn btn-default">Button 7</button>
<button type = "button" class = "btn btn-default">Button 8</button>
<button type = "button" class = "btn btn-default">Button 9</button>
</div>
 22

Nesting
You can nest button groups within another button group i.e, place a .btn-group within another
.btn-group . This is done when you want dropdown menus mixed with a series of buttons.
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>

<div class = "btn-group">

<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle =
"dropdown"> Dropdown
<span class = "caret"></span>
</button>

<ul class = "dropdown-menu">

<li><a href = "#">Dropdown link 1</a></li>
<li><a href = "#">Dropdown link 2</a></li>
</ul>
</div>

</div>

Vertical Button group

The following example demonstrates the use of class .btn-group-vertical discussed in the above
table −
<div class = "btn-group-vertical">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>

<div class = "btn-group-vertical">

<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle =
"dropdown"> Dropdown
<span class = "caret"></span>
</button>

<ul class = "dropdown-menu">

<li><a href = "#">Dropdown link 1</a></li>
<li><a href = "#">Dropdown link 2</a></li>
</ul>
</div>

</div>