0% found this document useful (0 votes)

271 views

Bootstrap Manual

frame-work of Css

Uploaded by

Notin less24

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

271 views

Bootstrap Manual

frame-work of Css

Uploaded by

Notin less24

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 217

Chapter 1

Bootstrap Tutorial
Bootstrap is the most popular and powerful front-end (HTML, CSS, and
JavaScript) framework for faster and easier responsive web development.

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.

You can save a lot of time and effort with Bootstrap. So bookmark this website
and continue on.
Tip: Our Bootstrap tutorials will help you to learn the basic as well as advanced
features of the Bootstrap step-by-step through easy-to-understand explanation
of every topic. If you're a beginner, start with the basics and gradually move
forward by learning a little bit every day.

What You Can Do with Bootstrap

There are lot more things you can do with Bootstrap.

 You can easily create responsive websites.

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

The list does not end here, there are many other interesting things that you can
do with Bootstrap. You will learn about all of them in detail in upcoming chapters.
Advantages of Using Bootstrap
If you have had some experience with any front-end framework, you might be
wondering what makes Bootstrap so special. Here are some advantages why one
should opt for Bootstrap framework:

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

Note: Bootstrap 4 is responsive by default with a mobile first approach. Bootstrap

4.3 is the latest and most stable version of the Bootstrap. Bootstrap 4 is
supported in all major modern browsers such Google Chrome, Firefox, Safari,
Internet Explorer 10 and above, etc.
What This Tutorial Covers
This Bootstrap tutorial series covers all the features of the Bootstrap framework,
starting with the basics, such as grid system, typography styling mechanism, form
styling methods, as well as, techniques of styling common user interface
elements like tables, lists, images, etc.

Further you will learn how to utilize the ready to use Bootstrap components such
as input groups, button groups, media objects, navbar, panels, pagination, labels
and badges, progress bars, etc. as well as how to customize them to create their
different variations.

Finally, you will explore some advanced features of the Bootstrap like creating
modal window, dynamic tabs, tooltips, alerts, accordion menu, carousel, scrollspy,
etc. as well as how to customize them or extend their existing functionality using
the available options and methods.

Tip: Every chapter in this tutorial contains lots of real-world examples that you
can try and test using an online editor. These examples will help you to better
understand the concept or topic. It also contains smart workarounds as well as
useful tips and important notes.
Chapter 2

Bootstrap Getting Started

In this tutorial you will learn how to create a web page using Bootstrap
framework.

Getting Started with Bootstrap

In this tutorial you will learn how easy it is to create a web page using Bootstrap.
But before begin, be sure to have a code editor and some working knowledge of
HTML and CSS.

If you're just starting out in the world of web development, start learning from
here »

Well, let's get started creating our first Bootstrap powered web page.

Creating Your First Web Page with Bootstrap

Now we're going to create a basic Bootstrap template by including the Bootstrap
CSS and JS files, as well as other JavaScript dependencies like jQuery and
Popper.js via CDN.

We recommend adding Bootstrap in your project via CDN (Content Delivery

Network) because CDN offers performance benefit by reducing the loading time,
since they are hosting the files on multiple servers spread across the globe so
that when a user requests the file it will be served from the server nearest to
them. We're also using the CDN links in our examples:

Let's walk through the following steps. At the end of this tutorial, you'll have
made a simple Bootstrap powered web page that displays "Hello world" message
in your web browser.
Step 1: Creating a Basic HTML file
Open up your favorite code editor and create a new HTML file. Start with an
empty window and type the following code and save it as "basic.html" on your
desktop.

Example
Try this code »

Tip: Always include the viewport <meta> tag inside the <head> section of your
document to enable touch zooming and ensure proper rendering on mobile
devices.

Step 2: Making this HTML File a Bootstrap Template

In order to make this plain HTML file a Bootstrap template, just include the
Bootstrap CSS and JS files as well as required jQuery and Popper.js using their
CDN links.

You should include JavaScript files at the bottom of the page, right before the
closing </body> tag to improve the performance of your web pages, as shown in
the following example:
Example
Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<title>Basic Bootstrap Template</title>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/boo
tstrap.min.css">
</head>
<body>
<h1>Hello, world!</h1>

<script src="https://code.jquery.com/jquery-
3.5.1.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popp
er.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/boots
trap.min.js"></script>
</body>
</html>

And we're all set! After adding the Bootstrap's CSS and JS files and the required
jQuery and Popper.js library, we can begin to develop any site or application with
the Bootstrap framework.

The attributes integrity and crossorigin have been added to CDN links to
implement Subresource Integrity (SRI). It is a security feature that enables you
to mitigate the risk of attacks originating from compromised CDNs, by ensuring
that the files your website fetches (from a CDN or anywhere) have been delivered
without unexpected or malicious modifications. It works by allowing you to
provide a cryptographic hash that a fetched file must match.
Tip: If the visitor to your website has already downloaded the Bootstrap's CSS
and JS files from the same CDN while visiting the other sites, it will be loaded
from the browser's cache instead of re-downloading, which leads to faster
loading time.

Step 3: Saving and Viewing the File

Now save the file on your desktop as "bootstrap-template.html".

To open this file in a web browser, navigate to it, then right click on it, and select
your favorite web browser. Alternatively, you can open your browser and drag
this file to it.

Note: It is important that the extension .html is specified, some text editors, such
as Notepad on Windows, will automatically save it as .txt otherwise.

Downloading the Bootstrap Files

Alternatively, you can also download the Bootstrap's CSS and JS files from their
official website and include in your project. There are two versions available for
download, compiled Bootstrap and Bootstrap source files. You can download
Bootstrap 4 files from here.

Compiled download contains compiled and minified version of CSS and

JavaScript files for faster and easier web development. The compiled version
however doesn't include any optional JavaScript dependencies such as jQuery
and Popper.js. Whereas, the source download contains original source files for all
CSS and JavaScript, along with a local copy of the docs.

Download and unzip the compiled Bootstrap. Now if you look inside the folders
you'll find it contains the compiled CSS and JS files (bootstrap.*), as well as the
compiled and minified CSS and JS (bootstrap.min.*). Use
the bootstrap.min.css and bootstrap.min.js files.

Using the minified version of CSS and JS files will improve the performance of
your website and saves the precious bandwidth because of lesser HTTP request
and download size.
Tip: Please note that Bootstrap's JavaScript plugins require jQuery to be included.
You can download the latest version of jQuery form
here https://jquery.com/download/. You also need to include Popper.js before
Bootstrap's JS in order for tooltips to work!
Chapter 3

Bootstrap Grid System

The Bootstrap grid system is the fastest and easy way to create responsive web
page layout.

What is Bootstrap Grid System

Bootstrap grid system provides the quick and convenient way to create
responsive website layouts. The latest Bootstrap 4 version introduces the new
mobile-first flexbox grid system that appropriately scales up to 12 columns as the
device or viewport size increases.

Bootstrap 4 includes predefined grid classes for quickly making grid layouts for
different types of devices like cell phones, tablets, laptops and desktops, etc. For
example, you can use the .col-* classes to create grid columns for extra small
devices mobile phones in portrait mode, similarly you can use the .col-sm-
* classes to create grid columns for small screen devices like mobile phone in
landscape mode, the .col-md-* classes for medium screen devices like tablets,
the .col-lg-* classes for large devices like desktops, and the .col-xl-* classes
for extra large desktop screens.

The following table summarizes some of the key features of the new grid system.

Features Extra small Small Medium Large Extra

large
Bootstrap 4 Grid System <576px ≥576px ≥768px ≥992px
≥1200px

Max container width None (auto) 540px 720px 960px 1140px

Ideal for Mobile (Portrait) Mobile (Landscape) Tablets Laptops Laptops

&
Desktops
Class prefix .col- .col-sm- .col- .col- .col-
md- lg- xl-

Number of columns 12

Gutter width 30px (15px on each side of a column)

Nestable Yes

Column ordering Yes

The above table demonstrates one important thing, applying any .col-sm-* class
to an element will not only affect its styling on small devices, but also on
medium, large and extra large devices having screen width greater than or equal
to 540px, if a .col-md-*, .col-lg-* or .col-xl-* class is not present. Similarly,
the .col-md-* class will not only affect the styling of elements on medium
devices, but also on large and extra large devices if a .col-lg-* or .col-xl- class
is not present.

Now the question arises how to create rows and columns using this 12 column
responsive grid system. The answer is pretty simple, at first create a container
that acts as a wrapper for your rows and columns using the .container class,
after that create rows inside the container using the .row class, and to create
columns inside any row you can use the .col-*, .col-sm-*, .col-md-*, .col-lg-
* and .col-xl-* classes. The columns are actual content area where we will place
our contents. Let's put all these things into real action. Let's see how it actually
works:
Creating Two Column Layouts
The following example will show you how to create two column layouts for
medium, large and extra large devices like tables, laptops and desktops etc.
However, on mobile phones (screen width less than 768px), the columns will
automatically become horizontal.

Example
Try this code »

<div class="container">

<div class="row">
<div class="col-md-6">Column left</div>
<div class="col-md-6">Column right</div>
</div>

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

<div class="row">
<div class="col-md-3">Column left</div>
<div class="col-md-9">Column right</div>
</div>
</div>

Note: In a grid layout, content must be placed inside columns (.col and .col-*)
and only columns may be the immediate children of rows (.row). Rows should be
placed inside a .container (fixed-width) or .container-fluid (full-width) for
proper padding and alignment.

Tip: Grid column widths are set in percentages, so they're always fluid and sized
relative to their parent element. In addition, each column has horizontal padding
(called a gutter) for controlling the space between individual columns.
Since the Bootstrap grid system is based on 12 columns, therefore to keep the
columns in a one line (i.e. side by side), the sum of the grid column numbers
within a single row should not be greater than 12. If you go through the above
example code carefully you will find the numbers of grid columns (i.e. col-md-*)
add up to twelve (6+6, 4+8 and 3+9) for every row.

Creating Three Column Layouts

Similarly, you can create other layouts based on the above principle. For instance,
the following example will typically create three column layouts for laptops and
desktops screens. It also works in tablets in landscape mode if screen resolution
is more than or equal to 992 pixels (e.g. Apple iPad). However, in portrait mode
the grid columns will be horizontal as usual.

Example
Try this code »

<div class="container">

<div class="row">
<div class="col-lg-4">Column left</div>
<div class="col-lg-4">Column middle</div>
<div class="col-lg-4">Column right</div>
</div>

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

<div class="row">
<div class="col-lg-3">Column left</div>
<div class="col-lg-7">Column middle</div>
<div class="col-lg-2">Column right</div>
</div>
</div>
Note: If more than 12 grid columns are placed within a single row, then each
group of extra columns, as a whole, will wrap onto a new line..

Bootstrap Auto-layout Columns

You can also create equal width columns for all devices (extra small, small,
medium, large, and extra large) through simply using the class .col, without
specifying any column number.

Let's try out the following example to understand how it exactly works:

Example
Try this code »

<div class="container">

<div class="row">
<div class="col">Column one</div>
<div class="col">Column two</div>
</div>

<div class="row">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
</div>

Additionally, you can also set the width of one column and let the sibling
columns automatically resize around it equally. You may use the predefined grid
classes or inline widths.

If you try the following example you'll find columns in a row with class .col has
equal width.
Example
Try this code »

<div class="container">

<div class="row">
<div class="col">Column one</div>
<div class="col">Column two</div>
</div>

<div class="row">
<div class="col">Column one</div>
<div class="col-sm-6">Column two</div>
<div class="col">Column three</div>
</div>
</div>

Column Wrapping Behavior

Now we are going to create more flexible layouts that changes the column
orientation based on the viewport size. The following example will create a three
column layout on large devices like laptops and desktops, as well as on tablets
(e.g. Apple iPad) in landscape mode, but on medium devices like tablets in
portrait mode (768px ≤ screen width < 992px), it will change into a two column
layout where the third column moves at the bottom of the first two columns.

Example
Try this code »

<div class="container">
<div class="row">
<div class="col-md-4 col-lg-3">Column one</div>
<div class="col-md-8 col-lg-6">Column two</div>
<div class="col-md-12 col-lg-3">Column three</div>
</div>
</div>
As you can see in the example above the sum of the medium grid column
numbers (i.e. col-md-*) is 3 + 9 + 12 = 24 > 12, therefore the
third <div> element with the class .col-md-12 that is adding the extra columns
beyond the maximum 12 columns in a .row, gets wrapped onto a new line as one
contiguous unit on the medium screen size devices.

Similarly, you can create even more adaptable layouts for your websites using the
Bootstrap's grid column wrapping feature. Here're some ready to use Bootstrap
grid examples.

Creating Multi-Column Layouts with Bootstrap

With the new Bootstrap 4 mobile first flexbox grid system you can easily control
how your website layout will render on different types of devices that have
different screen or viewport sizes like mobile phones, tablets, desktops, etc. Let's
consider the following illustration.

In the above illustration there are total 12 content boxes in all devices, but its
placement varies according to the device screen size, like in mobile device the
layout is rendered as one column grid layout which has 1 column and 12 rows
placed above one another, whereas in tablet it is rendered as two column grid
layout which has 2 columns and 6 rows.

Further, in large screen size devices like laptops and desktops it is rendered as
three column grid layout which has 3 columns and 4 rows and finally in extra
large screen devices like large desktops it is rendered as four column grid layout
which has 4 columns and 3 rows.
Now the question is how we can create such responsive layouts using this
Bootstrap new grid system. Let's start with the primary target device. Suppose
our primary target device is laptop or normal desktop. Since our laptop layout
has 3 columns and 4 rows i.e. 3x4 grid layout, so the HTML code for making such
grid structure would look something like this.

Example
Try this code »

If you see the output of the above example in a laptop or desktop which has
screen or viewport width greater than or equal to 992px but less than 1200px,
you will find the layout has 4 rows where each row has 3 equal columns resulting
in 3x4 grid layout.

Now it's time to customize our layout for other devices. Let's first start by
customizing it for tablet device. Since inside the tablet our layout rendered as 2x6
grids (i.e. 2 columns and 6 rows). So, go ahead and add the class .col-md-6 on
every column.
Example
Try this code »

<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6"><p>Box 1</p></div>
<div class="col-lg-4 col-md-6"><p>Box 2</p></div>
<div class="col-lg-4 col-md-6"><p>Box 3</p></div>
<div class="col-lg-4 col-md-6"><p>Box 4</p></div>
<div class="col-lg-4 col-md-6"><p>Box 5</p></div>
<div class="col-lg-4 col-md-6"><p>Box 6</p></div>
<div class="col-lg-4 col-md-6"><p>Box 7</p></div>
<div class="col-lg-4 col-md-6"><p>Box 8</p></div>
<div class="col-lg-4 col-md-6"><p>Box 9</p></div>
<div class="col-lg-4 col-md-6"><p>Box 10</p></div>
<div class="col-lg-4 col-md-6"><p>Box 11</p></div>
<div class="col-lg-4 col-md-6"><p>Box 12</p></div>
</div>
</div>
Tip: For convenience choose your primary target device and create layout for
that device first after that add classes to make it responsive for other devices.

Similarly, you can customize the layout for extra large devices like a large desktop
screen by adding the class .col-xl-3 on each column, as every row in our extra
large device layout contains 4 columns. Here's the final code after combining the
whole process.

Example
Try this code »

Tip: According to the above illustration there is no need to customize the layout
for mobile phones; since columns on extra small devices will automatically
become horizontal and rendered as 1x12 column grid layout in absence of .col-
* or .col-sm-* classes.

Nesting of Grid Columns

The Bootstrap grid columns are also nestable, that means you can put rows and
columns inside an existing column. However, the formula for placing the columns
will be the same, i.e. the sum of column numbers should be equal to 12 or less
within a single row.

Example
Try this code »

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

<div class="row">
<div class="col-12"></div>
</div>
<div class="row">

Creating Variable Width Columns

You can use the col-{breakpoint}-auto classes to size columns based on the
natural width of their content. Try out the following example to see how it works:

Example
Try this code »

<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-3">Column left</div>
<div class="col-md-auto">Variable width column</div>
<div class="col-md-3">Column right</div>
</div>
<div class="row">
<div class="col">Column left</div>
<div class="col-auto">Variable width column</div>
<div class="col">Column right</div>
</div>
</div>

Alignment of Grid Columns

You can use the flexbox alignment utilities to vertically and horizontally align grid
columns inside a container. Try out the following examples to understand how it
works:

Vertical Alignment of Grid Columns

You can use the classes .align-items-start, .align-items-center, and .align-
items-end to align the grid columns vertically at the top, middle and bottom of a
container, respectively.
Example
Try this code »

<div class="container">
<div class="row align-items-start">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
<div class="row align-items-center">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
<div class="row align-items-end">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
</div>

Individual columns inside a row can also be aligned vertically. Here's an example:

Example
Try this code »

<div class="container">
<div class="row">
<div class="col align-self-start">Column one</div>
<div class="col align-self-center">Column two</div>
<div class="col align-self-end">Column three</div>
</div>
</div>

Note: You can skip the number in .col-* grid class and just use the .col class to
create equal size columns for all devices (extra small, small, medium, large, and
extra large).
Horizontal Alignment of Grid Columns
You can use the classes .justify-content-start, .justify-content-center,
and .justify-content-end to align the grid columns horizontally at the left,
center and right of a container, respectively. Let's check out the following
example to see how it works:

Example
Try this code »

<div class="container">
<div class="row justify-content-start">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
</div>
<div class="row justify-content-center">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
</div>
<div class="row justify-content-end">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
</div>
</div>

Alternatively, you can use the class .justify-content-around to distribute grid

columns evenly with half-size spaces on either end, whereas you can use the
class .justify-content-between to distribute the grid columns evenly where the
first column placed at the start and the last column placed at the end. Try out the
following example to see how it actually works:

Example
Try this code »

<div class="container">
<div class="row justify-content-around">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
</div>
<div class="row justify-content-between">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
</div>
</div>
Reordering of Grid Columns
You can even change the visual order of your grid columns without changing
their order in actual markup. Use the class .order-last to order the column in
last, whereas use the class .order-first to order the column at first place. Let's
checkout an example:

Example
Try this code »

<div class="container">
<div class="row">
<div class="col order-last">First, but ordered at
last</div>
<div class="col">Second, but unordered</div>
<div class="col order-first">Last, but ordered at
first</div>
</div>
</div>

You can also use the .order-* classes to order the grid columns depending on
the order numbers. Grid column with higher order number comes after the grid
column with lower order number or grid column with no order classes. It includes
support for 1 through 12 across all five grid tiers.

Example
Try this code »

<div class="container">
<div class="row">
<div class="col order-4">First, but ordered at
last</div>
<div class="col">Second, but ordered at first</div>
<div class="col order-1">Last, but ordered at
second</div>
</div>
</div>
Offsetting the Grid Columns
You can also move grid columns to the right for alignment purpose using the
column offset classes like .offset-sm-*, .offset-md-*, .offset-lg-*, and so on.

These classes offset the columns by simply increasing its left margin by specified
number of columns. For example, the class .offset-md-4 on column .col-md-
8 moves it to the right over four columns from its original position. Try out the
following example to see how it works:

Example
Try this code »

You can also offset columns using the margin utility classes. These classes are
useful in the situations where the width of the offset is not fixed. Here's an
example:

Example
Try this code »

<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 ml-auto"></div>
</div>
<div class="row">
<div class="col-auto mr-auto"></div>
<div class="col-auto"></div>
</div>
</div>
Note: You can use the class .col-auto to create columns that only take up as
much space as needed, i.e. the column sizes itself based on the contents.

Creating Compact Columns

You can remove the default gutters between columns to create compact layouts
by adding the class .no-gutters on .row. This class removes the negative
margins from row and the horizontal padding from all immediate children
columns. Here's an example:

Example
Try this code »

<div class="row no-gutters">

<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
<div class="col-4">Column three</div>
</div>

Breaking Columns to a New Line

You can also create equal-width columns that span multiple rows by inserting
a <div> with .w-100 class where you want the columns to break to a new line.
Additionally, you can make these breaks responsive by combining the .w-
100 class with responsive display utility classes.

Example
Try this code »

We hope you've understood the basics of new Bootstrap 4 grid system. In next
few chapters you'll learn how to create basic web page layouts using this flexbox
grid system.
Chapter 4

Bootstrap Fixed Layout

In this tutorial you will learn how to create fixed layouts with Bootstrap.

Creating Fixed Layout with Bootstrap

With Bootstrap 4 you can still create web page layouts based on fixed number of
pixels, however the container width vary depending on the viewport width and
the layout is responsive too.

The process of creating the fixed yet responsive layout basically starts with
the .container class. After that you can create rows with the .row class to wrap the
horizontal groups of columns. Rows must be placed within a .container for proper
alignment and padding.

Further columns can be created inside a row using predefined grid classes
like .col-*, .col-sm-*, .col-md-*, .col-lg-* and .col-xl-* where * represent grid
number and should be from 1 to 12. Please check out the Bootstrap grid
system tutorial to learn more about grid classes.

Note: Actual content like text, images, videos, tables, etc. should be placed within
columns, and only columns may be the immediate children of rows.

The following example creates a fixed width responsive layout that is 720px pixels
wide on medium devices having screen width greater than or equal to 768px like
tablets, whereas 960px wide on large devices having screen width greater than or
equal to 992px like small laptops, and 1140px wide on extra large devices having
screen width greater than or equal to 1200px like desktops.
However, if the device's viewport width is less than 768px but greater than or
equal to 576px the layout will be 540px wide. For viewport width less than 576px
the layout will cover 100% width. Also, columns will be stacked vertically navbar
will be collapsed in both cases.

Example
Try this code »

— The output of the above example will look something like this:
We've used the margin utility classes such as .mb-3, .ml-auto, mx-2 etc. to adjust
spacing between the elements. Whereas the classes .text-dark, .text-muted, .text-
md-right are text utility classes to adjust color and alignment of text. You'll learn
about them in later chapters.
Chapter 5

Bootstrap Fluid Layout

In this tutorial you will learn how to create fluid layouts with Bootstrap.

Creating Fluid Layout with Bootstrap

In Bootstrap you can use the class .container-fluid to create fluid layouts to utilize
the 100% width of the viewport across all device sizes (extra small, small, medium,
large, and extra large).

The class .container-fluid simply applies the width: 100% instead of different width
for different viewport sizes. However, the layout will still responsive and you can
use the grid classes as usual. See the tutorial on Bootstrap grid system to learn
more about grid classes.

The following example will create a fluid layout that covers 100% width of the
screen.

Example
Try this code »

— The output of the above example will look something like this:
Chapter 6

Bootstrap Responsive Layout

In this tutorial you will learn how to create responsive websites with Bootstrap
framework.

What is Responsive Web Design

Responsive web design is a process of designing and building websites to
provide better accessibility and optimal viewing experience to the user by
optimizing it for different devices.

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. See the following
Illustration.
Creating Responsive Layout with Bootstrap
With the Bootstrap 4 powerful mobile first flexbox grid system creating the
responsive and mobile friendly websites and applications has become much
easier.

Bootstrap 4 is responsive and mobile friendly from the start. Its five tier grid
classes provides better control over the layout as well as how it will be rendered
on different types of devices like mobile phones, tablets, laptops and desktops,
large screen devices, and so on.

The following example will create a responsive layout that is rendered as 4

column layout in extra-large devices (viewport ≥ 1200px), and 3 column layout in
large devices (992px ≤ viewport < 1200px), whereas 2 column layout in medium
devices (768px ≤ viewport < 992px), and 1 column layout in small and extra-small
devices (viewport < 768px). Let's see how this works:

Example
Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Responsive Layout Example</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-
3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
<div class="container-fluid">
<a href="#" class="navbar-brand mr-3">Tutorial
Republic</a>
<button type="button" class="navbar-toggler" data-
toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link
active">Home</a>
<a href="#" class="nav-item nav-
link">Services</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-
link">Contact</a>
</div>
<div class="navbar-nav ml-auto">
<a href="#" class="nav-item nav-
link">Register</a>
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Learn to Create Websites</h1>
<p class="lead">In today's world internet is the most
popular way of connecting with the people. At <a
href="https://www.tutorialrepublic.com"
target="_blank">tutorialrepublic.com</a> you will learn the
essential web development technologies along with real life
practice examples, so that you can create your own website to
connect with the people around the world.</p>
<p><a href="https://www.tutorialrepublic.com"
target="_blank" class="btn btn-success btn-lg">Get started
today</a></p>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>HTML</h2>
<p>HTML is the standard markup language for
describing the structure of the web pages. Our HTML tutorials
will help you to understand the basics of latest HTML5 language,
so that you can create your own website.</p>
<p><a href="https://www.tutorialrepublic.com/html-
tutorial/" target="_blank" class="btn btn-success">Learn More
»</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>CSS</h2>
<p>CSS is used for describing the presentation of
web pages. CSS can save a lot of time and effort. Our CSS
tutorials will help you to learn the essentials of latest CSS3,
so that you can control the style and layout of your
website.</p>
<p><a href="https://www.tutorialrepublic.com/css-
tutorial/" target="_blank" class="btn btn-success">Learn More
»</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>JavaScript</h2>
<p>JavaScript is the most popular and widely used
client-side scripting language. Our JavaScript tutorials will
provide in-depth knowledge of the JavaScript including ES6
features, so that you can create interactive websites.</p>
<p><a
href="https://www.tutorialrepublic.com/javascript-tutorial/"
target="_blank" class="btn btn-success">Learn More
»</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for
faster and easier web development. Our Bootstrap tutorials will
help you to learn all the features of latest Bootstrap 4
framework so that you can easily create responsive websites.</p>
<p><a
href="https://www.tutorialrepublic.com/twitter-bootstrap-
tutorial/" target="_blank" class="btn btn-success">Learn More
»</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>PHP</h2>
<p>PHP is the most popular server-side scripting
language for creating dynamic web pages. Our PHP tutorials will
help you to learn all the features of latest PHP7 scripting
language so that you can easily create dynamic websites.</p>
<p><a
href="https://www.tutorialrepublic.com/twitter-bootstrap-
tutorial/" target="_blank" class="btn btn-success">Learn More
»</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>SQL</h2>
<p>SQL is a standard language designed for managing
data in relational database management system. Our SQL tutorials
will help you to learn the fundamentals of the SQL language so
that you can efficiently manage your databases.</p>
<p><a
href="https://www.tutorialrepublic.com/twitter-bootstrap-
tutorial/" target="_blank" class="btn btn-success">Learn More
»</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>References</h2>
<p>Our references section outlines all the standard
HTML5 tags and CSS3 properties along with other useful
references such as color names and values, character entities,
web safe fonts, language codes, HTTP messages, and more.</p>
<p><a
href="https://www.tutorialrepublic.com/twitter-bootstrap-
tutorial/" target="_blank" class="btn btn-success">Learn More
»</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>FAQ</h2>
<p>Our Frequently Asked Questions (FAQ) section is
an extensive collection of FAQs that provides quick and working
solution of common questions and queries related to web design
and development with live demo.</p>
<p><a
href="https://www.tutorialrepublic.com/twitter-bootstrap-
tutorial/" target="_blank" class="btn btn-success">Learn More
»</a></p>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-md-6">
<p>Copyright © 2019 Tutorial Republic</p>
</div>
<div class="col-md-6 text-md-right">
<a href="#" class="text-dark">Terms of Use</a>
<span class="text-muted mx-2">|</span>
<a href="#" class="text-dark">Privacy Policy</a>
</div>
</div>
</footer>
</div>
</body>
</html>

Tip: Open the output of this example in new blank window (click the link
inside the CodeLab editor) and resize the screen you will see the orientation of
content boxes changes when viewport width crossing or approaching the certain
limit (i.e. breakpoints).
Chapter 7

Bootstrap Typography
In this tutorial you will learn about the styling and formatting of text content like
headings, paragraphs, blockquotes, etc. with Bootstrap.

Working with Headings

You can define all HTML headings, <h1> through <h6> — In the same way you
define in simple HTML document. You can also utilize the heading
classes .h1 through .h6 on other elements, if you want to apply the style on
element's text same as headings.

Example
Try this code »

<h1>h1. Bootstrap heading</h1>

<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
— The output of the above example will look something like this:
Customizing Headings
Additionally, you can use the <small> tag with .text-muted class to display the
secondary text of any heading in a smaller and lighter variation. Here's an
example:

Example
Try this code »

<h2>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h2>
— The output of the above example will look something like this:

Display Headings
Bootstrap 4 introduces display headings that can be used when you need a
heading to stand out. Display headings are displayed in larger font-size but
lighter font-weight.

Four different display headings are available. Here's is an example:

Example
Try this code »

<h1 class="display-1">Display Heading 1</h1>

<h1 class="display-2">Display Heading 2</h1>
<h1 class="display-3">Display Heading 3</h1>
<h1 class="display-4">Display Heading 4</h1>
— The output of the above example will look something like this:

Working with Paragraphs

Bootstrap's global default font-size is 1rem (typically 16px), with a line-
height of 1.5. This is applied to the <body> and all paragraphs. In addition to that
a bottom margin of half their line-height (10px by default) is applied to the all
paragraphs i.e. the <p> elements.

You can also make a paragraph stand out by adding the class .lead on it.

Example
Try this code »

<p>This is how a normal paragraph looks like in Bootstrap.</p>

<p class="lead">This is how a paragraph stands out in
Bootstrap.</p>
— The HTML code in the above examples will produce the following result:

Tip: In CSS rem stands for "root em". 1rem is equal to the font size of the root
element (i.e. the <html> element), which is 16px in most browsers by default.

You can easily align text left, right, and center inside a paragraph using the text
alignment classes.

Example
Try this code »

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>

You can also align text based on screen size using the responsive text alignment
classes. These classes use the same viewport width breakpoints as the grid
system.

Example
Try this code »

<p class="text-sm-left">Text aligned to left on small or wider

viewports.</p>
<p class="text-md-left">Text aligned to left on medium or wider
viewports.</p>
<p class="text-lg-left">Text aligned to left on large or wider
viewports.</p>
<p class="text-xl-left">Text aligned to left on extra-large or
wider viewports.</p>
Text Formatting
You are free to use text formatting tags like <strong>, <i>, <small> to make your
text bold, italic, small and so on, in the same way you do in simple HTML.

Example
Try this code »

<p><b>This is bold text</b></p>

<p><code>This is computer code</code></p>
<p><em>This is emphasized text</em></p>
<p><i>This is italic text</i></p>
<p><mark>This is highlighted text</mark></p>
<p><small>This is small text</small></p>
<p><strong>This is strongly emphasized text</strong></p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup></p>
<p><ins>This text is inserted to the document</ins></p>
<p><del>This text is deleted from the document</del></p>

— The output of the above example will look something like this:
Text Transformation
You can also transform the text to lowercase, uppercase or make them capitalize.

Example
Try this code »

<p class="text-lowercase">The quick brown fox jumps over the

lazy dog.</p>
<p class="text-uppercase">The quick brown fox jumps over the
lazy dog.</p>
<p class="text-capitalize">The quick brown fox jumps over the
lazy dog.</p>

— The output of the above example will look something like this:

Text Coloring
Colors are the powerful method of conveying important information in website
design.

Bootstrap has handful of emphasis utility classes that can be used for this
purpose such as showing success message in green color, warning or error
message in red color, etc.

Example
Try this code »

<p class="text-primary">Primary: Please read the instructions

carefully before proceeding.</p>
<p class="text-secondary">Secondary: This is featured has been
removed from the latest version.</p>
<p class="text-success">Success: Your message has been sent
successfully.</p>
<p class="text-info">Info: You must agree with the terms and
conditions to complete the sign up process.</p>
<p class="text-warning">Warning: There was a problem with your
network connection.</p>
<p class="text-danger">Danger: An error has been occurred while
submitting your data.</p>
<p class="text-muted">Muted: This paragraph of text is grayed
out.</p>

— The output of the above example will look something like this:
Styling Blockquotes
You can also give pretty look to your blockquotes — Just define the blockquotes
using the standard <blockquote> element and bootstrap's style sheet will do the
rest.

Moreover, for identifying the source you can add a <footer> element with
class .blockquote-footer, and wrap the name of the source work in <cite>, like
this:

Example
Try this code »

<blockquote class="blockquote">
<p class="mb-0">The world is a dangerous place to live; not
because of the people who are evil, but because of the people
who don't do anything about it.</p>
<footer class="blockquote-footer">by <cite>Albert
Einstein</cite></footer>
</blockquote>

— The output of the above example will look something like this:

You can also align blockquotes to right or center by simply applying the text
alignment classes .text-right or .text-center on the <blockquote> element.
Chapter 8

Bootstrap Tables
In this tutorial you will learn how to create elegant tables with Bootstrap.

What is Table
The HTML tables are used to present data in grid manner like row and columns.
Using Bootstrap you can greatly improve the appearance of table in a quick and
easy way.

Creating a Simple Table with Bootstrap

You can create tables with basic styling that has horizontal dividers and small cell
padding (8px by default), by just adding the Bootstrap's class .table to
the <table> element.

Example
Try this code »

<table class="table">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Carter</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>

— The output of the above example will look something like this:

You can also create inverted version of this table, i.e. table with light text on dark
backgrounds, by adding an extra class .table-dark to the .table base class, like
this:

Example
Try this code »

<table class="table table-dark">

<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Carter</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>

— The output of the above example will look something like this:

Tip: You can add an extra class .table-dark to the .table element to create dark
version of any table such as stripped, hoverable, bordered, compact table, and so
on.
Creating Tables with Striped Rows
You can create table with alternate background like zebra-stripes by simply
adding the Bootstrap's class .table-striped to the .table base class.

This is achieved by adding the background-color to the table row within

the <tbody> element via the :nth-child CSS selector. Here's an example:

Example
Try this code »

<table class="table table-striped">

Similarly, you can also create inverted or dark version of the stripped table
adding an extra class .table-dark to the table, as shown in the following example:

Example
Try this code »

<table class="table table-striped table-dark">

Creating Table with Borders on All Sides

You can also add borders to the all table cells by adding an extra Bootstrap's
class .table-bordered to the .table base class, as shown in the following example:

Example
Try this code »

<table class="table table-bordered">

— The output of the above example will look something like this:

Creating Borderless Tables

You can also create borderless tables using the class .table-borderless on
the .table element.

Example
Try this code »

<table class="table table-borderless">

— The output of the above example will look something like this:

Enabling Hover State on Table Rows

You can also enable a hover state on table rows within a <tbody> element by
adding the Bootstrap's class .table-hover to the .table base class. Here's an
example:
Example
Try this code »

<table class="table table-hover">

— The output of the above example will look something like this:
Creating Small or Compact Table
You can also make your tables more compact and save the space through adding
an extra class .table-sm to the .table base class. The class .table-sm makes the
table compact by cutting the cell padding in half. Here's an example of a small
table:

Example
Try this code »

<table class="table table-sm">

Setting Table Head Colors

You can also specify different background colors for the table head using the
modifier classes .thead-light or .thead-dark on the <thead> element.

The following example uses the class .thead-light to create a table with light
head.

Example
Try this code »

<table class="table">
<thead class="thead-light">
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Carter</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>

— The output of the above example will look something like this:

Likewise, you can use the class .thead-dark to create a table with dark head.

Example
Try this code »

<table class="table">
<thead class="thead-dark">
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Carter</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>

— The output of the above example will look something like this:

Optional Emphasis Classes for Table Rows

There are some contextual classes to emphasize the row or individual cells data
like success, warning, danger, etc. through coloring its background.

Example
Try this code »

<table class="table">
<thead>
<tr>
<th>Row</th>
<th>Bill</th>
<th>Payment Date</th>
<th>Payment Status</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>1</td>
<td>Credit Card</td>
<td>04/07/2019</td>
<td>Waiting for statement</td>
</tr>
<tr class="table-secondary">
<td>2</td>
<td>Insurance</td>
<td>02/07/2019</td>
<td>Cancelled</td>
</tr>
<tr class="table-success">
<td>3</td>
<td>Water</td>
<td>01/07/2019</td>
<td>Paid</td>
</tr>
<tr class="table-info">
<td>4</td>
<td>Internet</td>
<td>05/07/2019</td>
<td>Change plan</td>
</tr>
<tr class="table-warning">
<td>5</td>
<td>Electricity</td>
<td>03/07/2019</td>
<td>Pending</td>
</tr>
<tr class="table-danger">
<td>6</td>
<td>Telephone</td>
<td>06/07/2019</td>
<td>Due</td>
</tr>
<tr class="table-active">
<td>7</td>
<td>DTH</td>
<td>04/07/2019</td>
<td>Deactivated</td>
</tr>
<tr class="table-light">
<td>8</td>
<td>Car Service</td>
<td>08/07/2019</td>
<td>Call in to confirm</td>
</tr>
<tr class="table-dark">
<td>9</td>
<td>Gas</td>
<td>06/07/2019</td>
<td>Payment failed</td>
</tr>
</tbody>
</table>

— The output of the above example will look something like this:
Creating Responsive Tables with Bootstrap
You can also create responsive tables to enable horizontal scrolling on small
devices.

To make any table responsive just place the table inside a <div> element and
apply the class .table-responsive on it. You can also specify when the table should
have a scrollbar, based on the screen width, using the classes .table-responsive{-
sm|-md|-lg|-xl}

Example
Try this code »

<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Biography</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>[email protected]</td>
<td>Lorem ipsum dolor sit amet...</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Carter</td>
<td>[email protected]</td>
<td>Vestibulum consectetur scelerisque...</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>[email protected]</td>
<td>Integer pulvinar leo id risus...</td>
</tr>
</tbody>
</table>
</div>
Chapter 9

Bootstrap Lists
In this tutorial you will learn how to style HTML lists with Bootstrap.

Creating Lists With Bootstrap

You can create three different types of HTML lists:

 Unordered lists — A list of items in which the order does not explicitly matter.
The list items in unordered lists are marked with bullets.
 Ordered lists — A list of items in which the order does explicitly matter. The list
items in ordered lists are marked with numbers, e.g. 1, ⅵ, etc.
 Definition list — A list of terms with their associated descriptions.

Unstyled Ordered and Unordered Lists

Sometimes you might need to remove the default styling form the list items. You
can do this by simply applying the class .list-unstyled to the
respective <ul> or <ol> elements.

Example
Try this code »

<ul class="list-unstyled">
<li>Home</li>
<li>Products
<ul>
<li>Gadgets</li>
<li>Accessories</li>
</ul>
</li>
<li>About Us</li>
<li>Contact</li>
</ul>
— The output of the above example will look something like this:

Note: The .list-unstyled class removes the default list-style and

left padding only from the list items which are immediate children of
the <ul> or <ol> element.

Placing Ordered and Unordered List Items Inline

If you want to create a horizontal menu using ordered or unordered list you need
to place all list items in a single line i.e. side by side. You can do this by simply
applying the class .list-inline to the respective <ul> or <ol>, and the class .list-
inline-item to the <li> elements.

Example
Try this code »

<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">Products</li>
<li class="list-inline-item">About Us</li>
<li class="list-inline-item">Contact</li>
</ul>
— The output of the above example will look something like this:
Creating Horizontal Definition Lists
The terms and descriptions in a definition list can also be aligned horizontally
side-by-side using the Bootstrap grid system's predefined classes. Here's an
example:

Example
Try this code »

<dl class="row">
<dt class="col-sm-3">User Agent</dt>
<dd class="col-sm-9">An HTML user agent is any device that
interprets HTML documents.</dd>
<dt class="col-sm-3 text-truncate">Client-side
Scripting</dt>
<dd class="col-sm-9">Client-side scripting generally refers
to the category of computer programs on the web that are
executed by the user's web browser.</dd>
<dt class="col-sm-3">Document Tree</dt>
<dd class="col-sm-9">The tree of elements encoded in the
source document.</dd>
</dl>
— The output of the above example will look something like this:

Note: For longer definition terms, you can optionally apply the class .text-
truncate on the <dt> element to truncate the text with an ellipsis (…).

In the next chapter you will learn how to create even more flexible and complex
list of elements using the Bootstrap list group component.
Chapter 10

Bootstrap List Groups

In this tutorial you will learn how to use Bootstrap list group component.

Creating List Groups with Bootstrap

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

Example
Try this code »

<ul class="list-group">
<li class="list-group-item">Pictures</li>
<li class="list-group-item">Documents</li>
<li class="list-group-item">Music</li>
<li class="list-group-item">Videos</li>
</ul>

— The output of the above example will look something like this:
List Group with Linked Items
You can also hyperlink list group items with the little change in HTML markup.

Just replace the <li> with <a> tag and use <div> element as a parent instead
of <ul>. You can also add icons and badges to this list group to make it more
elegant. Here's an example:

Example
Try this code »

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action
active">
<i class="fa fa-home"></i> Home
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="fa fa-camera"></i> Pictures <span class="badge
badge-pill badge-primary pull-right">145</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="fa fa-music"></i> Music <span class="badge
badge-pill badge-primary pull-right">50</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="fa fa-film"></i> Videos <span class="badge
badge-pill badge-primary pull-right">8</span>
</a>
</div>
— The output of the above example will look something like this:
Tip: You can use the Bootstrap list group component for creating the sidebar
navigation menu, e.g. displaying the list of products or categories on your
website.

You can also add other HTML elements like headings and paragraph within these
list groups.

Example
Try this code »

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h4>Asteroid detected near earth</h4>
<small>1 days ago</small>
</div>
<p>Pulvinar leo id risus pellentesque vestibulum. Sed
diam libero, sodales eget sapien vel, porttitor bibendum enim.
Donec sed nibh vitae lorem porttitor blandit in nec ante.</p>
</a>
<a href="#" class="list-group-item list-group-item-action
active">
<div class="d-flex w-100 justify-content-between">
<h4>Scientists found massive black hole</h4>
<small>2 days ago</small>
</div>
<p>Vestibulum id metus ac nisl bibendum scelerisque non
non purus. Suspendisse varius nibh non aliquet sagittis. In
tincidunt orci sit amet elementum vestibulum.</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h4>NASA launches solar probe</h4>
<small>3 days ago</small>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris
magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
</a>
</div>
— The output of the above example will look something like this:

List Group with Contextual States

Like most of the other components you can also use contextual classes on the list
group items to apply extra emphasis on them. Here's an example:

Example
Try this code »

<ul class="list-group">
<li class="list-group-item">A simple default list group
item</li>
<li class="list-group-item list-group-item-primary">A simple
primary list group item</li>
<li class="list-group-item list-group-item-secondary">A
simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple
success list group item</li>
<li class="list-group-item list-group-item-danger">A simple
danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple
warning list group item</li>
<li class="list-group-item list-group-item-info">A simple
info list group item</li>
<li class="list-group-item list-group-item-light">A simple
light list group item</li>
<li class="list-group-item list-group-item-dark">A simple
dark list group item</li>
</ul>

— The output of the above example will look something like this:

Similarly, you can use these contextual classes to the linked list group items. You
can also use the class .active to specify the active list group item. Here's an
example:
Example
Try this code »

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A
simple default list group item</a>
<a href="#" class="list-group-item list-group-item-action
list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action
list-group-item-secondary">A simple secondary list group
item</a>
<a href="#" class="list-group-item list-group-item-action
list-group-item-success">A simple success list group item</a>
<a href="#" class="list-group-item list-group-item-action
list-group-item-danger">A simple danger list group item</a>
<a href="#" class="list-group-item list-group-item-action
list-group-item-warning">A simple warning list group item</a>
<a href="#" class="list-group-item list-group-item-action
list-group-item-info">A simple info list group item</a>
<a href="#" class="list-group-item list-group-item-action
list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action
list-group-item-dark">A simple dark list group item</a>
</div>

Please, check out the Bootstrap tabs chapter to learn how to create dynamic
vertical tabs using the list group component without using any JavaScript code.
Chapter 11

Bootstrap Forms
In this tutorial you will learn how to create elegant forms with Bootstrap.

Creating Forms with Bootstrap

HTML forms are the integral part of the web pages and applications, but creating
the form layouts or styling the form controls manually one by one using CSS are
often boring and tedious. Bootstrap greatly simplifies the process of styling and
alignment of form controls like labels, input fields, selectboxes, textareas, buttons,
etc. through predefined set of classes.

Bootstrap provides three different types of form layouts:

 Vertical Form (default form layout)

 Horizontal Form
 Inline Form

The following section will give you the detailed overview of all these form layouts
as well as the various form related Bootstrap components one by one. Well let's
get started.

Creating Vertical Form Layout

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

The form controls in this layout are stacked with left-aligned labels on the top.
Example
Try this code »

<form>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail"
placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control"
id="inputPassword" placeholder="Password">
</div>
<div class="form-group">
<label class="form-check-label"><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Sign
in</button>
</form>
— The output of the above example will look something like this:

Note: All textual form controls, like <input>, <textarea>, and <select> require
the class .form-control for general styling. The .form-control class also makes them
100% wide. To change their width or use them inline, you can utilize the
predefined grid classes.
Creating Horizontal Form Layout
You can also create horizontal form layouts where labels and form controls are
aligned side-by-side using the Bootstrap grid classes. To create a horizontal form
layout add the class .row on form groups and use the .col-*-* grid classes to
specify the width of your labels and controls.

Also, be sure to apply the class .col-form-label on the <label> elements, so that
they're vertically centered with their associated form controls. Let's check out an
example:

Example
Try this code »

<form>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-
label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control"
id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-
label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control"
id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<label class="form-check-label"><input
type="checkbox"> Remember me</label>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary">Sign
in</button>
</div>
</div>
</form>
— The output of the above example will look something like this:

Creating Inline Form Layout

Sometimes you may want to display a series of labels, form controls, and buttons
on a single horizontal row to compact the layout. You can do this easily by
adding the class .form-inline to the <form> element. However, form controls only
appear inline in viewports that are at least 576px wide.

Let's take a look at following example to see how it actually works:

Example
Try this code »

<form class="form-inline">
<div class="form-group mr-2">
<label class="sr-only" for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail"
placeholder="Email">
</div>
<div class="form-group mr-2">
<label class="sr-only"
for="inputPassword">Password</label>
<input type="password" class="form-control"
id="inputPassword" placeholder="Password">
</div>
<div class="form-group mr-2">
<label><input type="checkbox" class="mr-1"> Remember
me</label>
</div>
<button type="submit" class="btn btn-primary">Sign
in</button>
</form>

— The output of the above example will look something like this:

Note: It is recommended to include a label for every form inputs otherwise

screen readers will have trouble with your forms. However, in case of inline form
layouts you can hide the labels using the .sr-only class, so that only screen
readers can read it.

Check out the snippets section for examples of some beautifully designed
Bootstrap forms.

Creating Static Form Control

There might be a situation when you just want to display a plain text value next
to a form label instead of a working form control. You can do this easily by
replacing the class .form-control with the .form-control-plaintext and applying the
attribute readonly.

The .form-control-plaintext class removes the default styling from the form field,
but preserves the correct margin and padding. Let's take a look at an example:

Example
Try this code »

<form>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-
label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-
plaintext" id="inputEmail" value="[email protected]">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-
label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control"
id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<div class="checkbox">
<label><input type="checkbox"> Remember
me</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary">Sign
in</button>
</div>
</div>
</form>

— The output of the above example will look something like this:

Placement of Checkboxes and Radios

Checkboxes and radio buttons can be placed either stacked or inline.

Stacked Checkboxes and Radios

To place the checkboxes or radio buttons vertically stacked i.e. line by line, just
wrap all controls in a form group and apply the class .d-block on each <label>.
Additionally, use the margin utility classes for proper spacing, as shown in the
following example:

Example
Try this code »

<div class="form-group">
<label class="d-block">
<input type="checkbox" class="mr-1" name="sports">
Cricket
</label>
<label class="d-block">
<input type="checkbox" class="mr-1" name="sports">
Football
</label>
<label class="d-block">
<input type="checkbox" class="mr-1" name="sports">
Tennis
</label>
</div>

<div class="form-group">
<label class="d-block">
<input type="radio" class="mr-1" name="gender"> Male
</label>
<label class="d-block">
<input type="radio" class="mr-1" name="gender"> Female
</label>
</div>

Inline Checkboxes and Radios

However, to place them inline i.e. side-by-side just place all form controls in a
form group and use margin utility classes to ensure proper spacing. No need to
use the .d-block class on the <label> element in this case. Let's check out the
following example:

Example
Try this code »

<div class="form-group">
<label class="mr-3">
<input type="checkbox" class="mr-1" name="sports">
Cricket
</label>
<label class="mr-3">
<input type="checkbox" class="mr-1" name="sports">
Football
</label>
<label class="mr-3">
<input type="checkbox" class="mr-1" name="sports">
Tennis
</label>
</div>

<div class="form-group">
<label class="mr-3">
<input type="radio" class="mr-1" name="gender"> Male
</label>
<label class="mr-3">
<input type="radio" class="mr-1" name="gender"> Female
</label>
</div>

Creating Disabled Form Controls

To disable individual form controls such as <input>, <textarea>, <select> just add
the attributes disabled to them and Bootstrap will do the rest. Here's an example:

Example
Try this code »

<input type="text" class="form-control mb-2"

placeholder="Disabled input" disabled>
<textarea class="form-control mb-2" placeholder="Disabled
textarea" disabled></textarea>
<select id="disabledSelect" class="form-control" disabled>
<option>Disabled select</option>
</select>
— The output of the above example will look something like this:

However, if you want to disable all controls within a <form> at once place them
inside a <fieldset> element and apply the attribute on it, as shown in the
following example:

Example
Try this code »

<form>
<fieldset disabled>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-
label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control"
id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-
label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control"
id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<label class="form-check-label"><input
type="checkbox"> Remember me</label>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-
primary">Sign in</button>
</div>
</div>
</fieldset>
</form>

— The output of the above example will look something like this:

Creating Readonly Inputs

You can also add the readonly boolean attribute on an input or textarea to
prevent the modification of its value. Read-only inputs appear in lighter
background (just like disabled inputs), but it retain the standard text cursor.
Check out the following example to see how it works:

Example
Try this code »

<input type="text" class="form-control mb-2" value="This input

value cannot be changed." readonly>
<textarea rows="3" class="form-control" readonly>This textarea
value cannot be changed.</textarea>
— The output of the above example will look something like this:

Column Sizing of Inputs, Textareas and Select Boxes

You can also match the sizes of your form controls to the Bootstrap grid column
sizes. Just wrap your form controls (i.e. <input>, <textarea>, and <select>) in grid
columns, or any custom element and apply the grid classes on it, as shown in the
following example:

Example
Try this code »

<div class="form-row">
<div class="form-group col-sm-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-sm-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option>Select</option>
</select>
</div>
<div class="form-group col-sm-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>

Tip: You can alternatively use the class .form-row in place of .row while creating
form layouts. The .form-row class is a variation of standard Bootstrap
grid .row which overrides the default column gutters for tighter and more
compact layouts.
Height Sizing of Inputs and Select Boxes
You can easily change the height of your text input and select boxes to match
the button sizes. Use the form control height sizing classes like .form-control-
lg, .form-control-sm on the <input> and <select> boxes to create it's larger or
smaller sizes.

Also, be sure to apply the class .col-form-label-sm or .col-form-label-lg on

the <label> or <legend> elements to correctly resize the label accordion to the form
controls.

Example
Try this code »

<form>
<div class="form-group row">
<label class="col-sm-2 col-form-label col-form-label-
lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-
control-lg" placeholder="Large input">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control"
placeholder="Default input">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-
control-sm" placeholder="Small input">
</div>
</div>
<hr>
<div class="form-group row">
<label class="col-sm-2 col-form-label col-form-label-
lg">State</label>
<div class="col-sm-10">
<select class="form-control form-control-lg">
<option>Large select</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">State</label>
<div class="col-sm-10">
<select class="form-control">
<option>Default select</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label col-form-label-
sm">State</label>
<div class="col-sm-10">
<select class="form-control form-control-sm">
<option>Small select</option>
</select>
</div>
</div>
</form>

Placing Help Text around Form Controls

Placing help text for the form controls in an efficient way to guide users to enter
the correct data in a form. You can place block level help text for a form control
using the class .form-text. The block help text is typically displayed at the bottom
of the control. Here's an example:

Example
Try this code »

<div class="form-group">
<label>Password</label>
<input type="password" class="form-control">
<small class="form-text text-muted">
Your password must be 8-20 characters long, contain
letters, numbers and special characters, but must not contain
spaces.
</small>
</div>
— The output of the above example will look something like this:

Similarly, you can also place inline help text using the <small> element. No need to
use .form-text in this case. The following example shows how to implement this:

Example
Try this code »

<form class="form-inline">
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control mx-sm-3">
<small class="text-muted">Must be 8-20 characters
long.</small>
</div>
</form>

— The output of the above example will look something like this:

Bootstrap Form Validation

Bootstrap 4 provides an easy and quick way to validate web forms on client-side.
It uses browser's native form validation API to validate the form. Form validation
styles are applied via CSS :invalid and :valid pseudo-classes. It applies
to <input>, <select>, and <textarea> elements.

Let's check out the following example to see how it actually works:
Example
Try this code »

<form class="needs-validation" novalidate>

<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail"
placeholder="Email" required>
<div class="invalid-feedback">Please enter a valid email
address.</div>
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control"
id="inputPassword" placeholder="Password" required>
<div class="invalid-feedback">Please enter your password
to continue.</div>
</div>
<div class="form-group">
<label class="form-check-label"><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Sign
in</button>
</form>

Note: For custom Bootstrap form validation messages, you'll need to disables the
browser default feedback tooltips by adding the novalidate boolean attribute to
the <form> element. However, it still provides access to the form validation APIs in
JavaScript.

Here's the custom JavaScript code that displays error messages and disables form
submission if there are invalid fields. See the JavaScript closures chapter to learn
about self-executing function.

Example
Try this code »

— The output of the above example will look something like this:

Tip: To reset the appearance of the form programmatically, remove the

class .was-validated class from the <form> element after submission. This class is
applied automatically on the form by the Bootstrap when you click the submit
button.

If you require server-side validation, you can indicate invalid and valid form fields
with the .is-invalid and .is-valid. The .invalid-feedback and .valid-feedback are
also supported with these classes. Try out the following example to see how it
works:
Example
Try this code »

<form>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control is-valid"
id="inputEmail" placeholder="Email"
value="[email protected]" required>
<div class="valid-feedback">Good! Your email address
looks valid.</div>
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control is-invalid"
id="inputPassword" placeholder="Password" required>
<div class="invalid-feedback">Opps! You have entered an
invalid password.</div>
</div>
<div class="form-group">
<label class="form-check-label"><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Sign
in</button>
</form>

— The output of the above example will look something like this:
You can alternatively swap the .{valid|invalid}-feedback classes
for .{valid|invalid}-tooltip classes to display the validation feedback text in a
tooltip style.

Also, be sure to apply the style position: relative or class .position-relative on the
parent element for proper feedback tooltip positioning. Here's an example:

Example
Try this code »

<form>
<div class="form-group position-relative">
<label for="inputEmail">Email</label>
<input type="email" class="form-control is-valid"
id="inputEmail" placeholder="Email"
value="[email protected]" required>
<div class="valid-tooltip">Good! Your email address
looks valid.</div>
</div>
<div class="form-group position-relative">
<label for="inputPassword">Password</label>
<input type="password" class="form-control is-invalid"
id="inputPassword" placeholder="Password" required>
<div class="invalid-tooltip">Opps! You have entered an
invalid password.</div>
</div>
<div class="form-group">
<label class="form-check-label"><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Sign
in</button>
</form>
— The output of the above example will look something like this:

Note: Background icons for <select> elements only work properly with .custom-
select, not with .form-control. We will learn about Bootstrap custom forms in next
chapter.

Supported Form Controls in Bootstrap

Bootstrap includes support for all standard HTML form controls as well as new
HTML5 input types such as datetime, number, email, url, search, range, color, url,
and so on. The following example will show you the usages of standard form
controls with Bootstrap.

Example
Try this code »

<form>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="firstName">First
Name:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="firstName"
placeholder="First Name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="lastName">Last
Name:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="lastName"
placeholder="Last Name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label"
for="inputEmail">Email Address:</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail"
placeholder="Email Address" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label"
for="phoneNumber">Mobile Number:</label>
<div class="col-sm-9">
<input type="number" class="form-control"
id="phoneNumber" placeholder="Phone Number" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Date of
Birth:</label>
<div class="col-sm-3">
<select class="custom-select">
<option>Date</option>
</select>
</div>
<div class="col-sm-3">
<select class="custom-select">
<option>Month</option>
</select>
</div>
<div class="col-sm-3">
<select class="custom-select">
<option>Year</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label"
for="postalAddress">Postal Address:</label>
<div class="col-sm-9">
<textarea rows="3" class="form-control"
id="postalAddress" placeholder="Postal Address"
required></textarea>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="ZipCode">Zip
Code:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="ZipCode"
placeholder="Zip Code" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Gender:</label>
<div class="col-sm-9 mt-2">
<label class="mb-0 mr-3">
<input type="radio" class="mr-1" name="gender"> Male
</label>
<label class="mb-0 mr-3">
<input type="radio" class="mr-1" name="gender">
Female
</label>
</div>
</div>
<div class="form-group row">
<div class="col-sm-9 offset-sm-3">
<label class="checkbox-inline">
<input type="checkbox" class="mr-1" value="agree"> I
agree to the <a href="#">Terms and Conditions</a>.
</label>
</div>
</div>
<div class="form-group row">
<div class="col-sm-9 offset-sm-3">
<input type="submit" class="btn btn-primary"
value="Submit">
<input type="reset" class="btn btn-secondary"
value="Reset">
</div>
</div>
</form>
Chapter 12
Bootstrap Custom Forms
In this tutorial you will learn how to create custom form controls with Bootstrap.

Creating Custom Form Controls

Bootstrap 4 enables you to customize the browser's default form controls to
create even more elegant form layouts. Now you can create completely
customized and cross-browser compatible radio buttons and checkboxes, file
inputs, select dropdowns, range inputs, and more.

In the following sections, you'll see how to create those custom form elements
one by one.

Creating Custom Checkboxes

To create custom checkboxes wrap each checkbox <input> and their
corresponding <label> in a <div> element, and apply the classes as shown in the
following example:

Example
Try this code »

<div class="custom-control custom-checkbox">

<input type="checkbox" class="custom-control-input"
name="customCheck" id="customCheck1">
<label class="custom-control-label"
for="customCheck1">Custom checkbox</label>
</div>
<div class="custom-control custom-checkbox mt-2">
<input type="checkbox" class="custom-control-input"
name="customCheck" id="customCheck2" checked>
<label class="custom-control-label"
for="customCheck2">Another custom checkbox</label>
</div>
— The output of the above example will look something like this:

Creating Custom Radio Buttons

Similarly, you can create custom radio buttons using the Bootstrap like this:

Example
Try this code »

<div class="custom-control custom-radio">

<input type="radio" class="custom-control-input"
name="customRadio" id="customRadio1">
<label class="custom-control-label"
for="customRadio1">Custom radio</label>
</div>
<div class="custom-control custom-radio mt-2">
<input type="radio" class="custom-control-input"
name="customRadio" id="customRadio2" checked>
<label class="custom-control-label"
for="customRadio2">Another custom radio</label>
</div>

— The output of the above example will look something like this:

You can also place these custom checkboxes and radio buttons inline by simply
adding a class .custom-control-inline on the wrapper <div> element, like this:

Example
Try this code »

<div class="custom-control custom-radio custom-control-inline">

<input type="radio" class="custom-control-input"
name="customRadio" id="customRadio1">
<label class="custom-control-label"
for="customRadio1">Custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input"
name="customRadio" id="customRadio2" checked>
<label class="custom-control-label"
for="customRadio2">Another custom radio</label>
</div>

— The output of the above example will look something like this:

Disabling Custom Checkboxes and Radios

Custom checkboxes and radio buttons can also be disabled. Just add the boolean
attribute disabled to the <input> element, as shown in the following example:

Example
Try this code »

<div class="custom-control custom-checkbox">

<input type="checkbox" class="custom-control-input"
id="customCheck" disabled>
<label class="custom-control-label"
for="customCheck">Disabled custom checkbox</label>
</div>
<div class="custom-control custom-radio mt-2">
<input type="radio" class="custom-control-input"
id="customRadio" disabled>
<label class="custom-control-label"
for="customRadio">Disabled custom radio</label>
</div>

— The output of the above example will look something like this:
Creating Toggle Switches
The switch markup is similar to custom checkbox, the only difference is it uses
the .custom-switch class in place of .custom-checkbox to render a toggle switch.

Switches also support the disabled attribute. Let's check out an example:

Example
Try this code »

<div class="custom-control custom-switch">

<input type="checkbox" class="custom-control-input"
id="customSwitch1">
<label class="custom-control-label"
for="customSwitch1">Toggle switch</label>
</div>
<div class="custom-control custom-switch mt-2">
<input type="checkbox" class="custom-control-input" disabled
id="customSwitch2">
<label class="custom-control-label"
for="customSwitch2">Disabled switch element</label>
</div>

— The output of the above example will look something like this:

Creating Custom Select Menu

Custom select menus can be created simply by adding the class .custom-select on
the <select> element. However, custom styling of the select menus are limited
only to the initial appearance and cannot modify the <option>s due to browser
limitations. Here's an example:
Example
Try this code »

<select class="custom-select">
<option selected>Custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

— The output of the above example will look something like this:

You can also create small and large custom selects to match similarly
sized Bootstrap text inputs.

Example
Try this code »

<select class="custom-select custom-select-lg">

<option selected>Large custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select mt-3">
<option selected>Default custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm mt-3">
<option selected>Small custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
— The output of the above example will look something like this:

Bootstrap custom select also supports multiple and size attributes like normal
select:

Example
Try this code »

<select class="custom-select" size="3" multiple>

<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

Creating Custom Range Inputs

To create custom range inputs just apply the class .custom-range to the <input
type="range">.

Example
Try this code »

<label for="customRange">Custom range</label>

— The output of the above example will look something like this:
By default range inputs have implicit values for min and max—0 and 100,
respectively. But, you may specify new values for those using
the min and max attributes.

Also, range inputs "snap" to integer values by default. To change this, you can
specify a step value. In the following example, we've doubled the number of steps
by using the step="0.5".

Example
Try this code »

<label for="customRange">Custom range</label>

Creating Custom File Inputs

With Bootstrap 4 you can also create custom file inputs which are elegant and
render consistently across browsers. Let's try out the following example to see
how it works:

Example
Try this code »

<div class="custom-file">
<input type="file" class="custom-file-input"
id="customFile">
<label class="custom-file-label" for="customFile">Choose
file</label>
</div>

— The output of the above example will look something like this:
Tip: Bootstrap hides the default file <input> via opacity and style the <label> to
look like an input instead. The button is generated and positioned
with ::after pseudo element. Finally, the transparent <input> is placed above the
styled <label> using the CSS positioning with proper width and height to trigger
the file picker dialog box.
Chapter 13
Bootstrap Input Groups
In this tutorial you will learn how to use the Bootstrap input group component.

Extending Form Controls with Bootstrap

Bootstrap input group component is very flexible and powerful component for
creating the interactive and elegant form controls, however it is limited to textual
input only.

In the following sections you'll see how to extend text-based input fields by
adding the text, icons or buttons before, after, or on both sides of it to make your
form more attractive.

Creating Prepended and Appended Inputs

Input groups are created using the class .input-group. It act as a container for
inputs and addons.

Further, use the class .input-group-prepend to place the addons before the input,
whereas use the class .input-group-append to place the addons after the input.

Also, be sure to wrap the text or icon in a <span> and apply the class .input-group-
text on it for proper rendering and styling. Try out the following example to see
how it works:

Example
Try this code »

— The output of the above example will look something like this:

Note: Bootstrap's prepending or appending addons feature is only available to

text-based inputs. It does not support <select> or <textarea> elements.
Checkboxes and Radio Buttons Addons
Similarly, you can place checkbox or radio button within input group's addon
instead of text.

Example
Try this code »

— The output of the above example will look something like this:
Placing Multiple Inputs or Addons
You can also place multiple inputs side-by-side within an input group easily, like
this:

Example
Try this code »

— The output of the above example will look something like this:

Similarly, you can also place multiple addons side-by-side within an input group.
You can also mix it with checkbox and radio inputs, as shown in the following
example:

Example
Try this code »

— The output of the above example will look something like this:

Buttons Addons for Text Inputs

You can also prepend or append buttons instead of text. Simply, place as many
buttons as you like within the .input-group-prepend or .input-group-append, as shown
below:

Example
Try this code »

<div class="row">
<div class="col-sm-5">
<div class="input-group">
<input type="text" class="form-control"
placeholder="Search...">
<div class="input-group-append">
<button type="button" class="btn btn-secondary">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<div class="col-sm-7">
<div class="input-group">
<input type="text" class="form-control"
placeholder="Type something...">
<div class="input-group-append">
<button type="submit" class="btn btn-
primary">Submit</button>
<button type="reset" class="btn btn-
danger">Reset</button>
</div>
</div>
</div>
</div>
— The output of the above example will look something like this:

Adding Button Dropdowns to Text Inputs

You can even add buttons with dropdowns to a text input, if you want to perform
more than one action from a button. Also, in case of input group you don't need
the .dropdown wrapper element, which is otherwise normally required. Let's check
out an example:

Example
Try this code »

<div class="row">
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-
secondary dropdown-toggle" data-
toggle="dropdown">Dropdown</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another
action</a>
</div>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button type="button" class="btn btn-outline-
secondary dropdown-toggle" data-
toggle="dropdown">Dropdown</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another
action</a>
</div>
</div>
</div>
</div>
</div>

— The output of the above example will look something like this:

Adding Segmented Dropdown Button Groups

Similarly, you can define the segmented dropdown button group where
dropdown button is placed besides the other buttons, as shown in the following
example:

Example
Try this code »

<div class="row">
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-
secondary">Action</button>
<button type="button" class="btn btn-outline-
secondary dropdown-toggle dropdown-toggle-split" data-
toggle="dropdown">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another
action</a>
</div>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button type="button" class="btn btn-outline-
secondary">Action</button>
<button type="button" class="btn btn-outline-
secondary dropdown-toggle dropdown-toggle-split" data-
toggle="dropdown">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another
action</a>
</div>
</div>
</div>
</div>
</div>

— The output of the above example will look something like this:

Height Sizing of Input Groups

You can also add the relative form sizing classes such as .input-group-lg or .input-
group-sm to the .input-group element itself to make it larger or smaller in height.

The contents within the .input-group will automatically resize — there is no need
for repeating the form control size classes on each element. Here's an example:

Example
Try this code »

<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">Large</span>
</div>
<input type="text" class="form-control">
</div>

<div class="input-group mt-2">
<div class="input-group-prepend">
<span class="input-group-text">Default</span>
</div>
<input type="text" class="form-control">
</div>

<div class="input-group input-group-sm mt-2">
<div class="input-group-prepend">
<span class="input-group-text">Small</span>
</div>
<input type="text" class="form-control">
</div>

— The output of the above example will look something like this:
Chapter 14
Bootstrap Buttons
In this tutorial you will learn how to create and modify buttons with Bootstrap.

Creating Buttons with Bootstrap

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, redirecting user to another page, and so on. Bootstrap provides a quick
and easy way to create and customize the buttons.

Bootstrap Button Styles

Different classes are available in Bootstrap for styling the buttons as well as to
indicate the different states or semantic. Button styles can be applied to any
element. However, it is applied normally to the <a>, <input>, and <button> elements
for the best rendering.

The following example will show you how to create different styles of buttons in
Bootstrap:

Example
Try this code »

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-
secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
— The output of the above example will look something like this:

Bootstrap Outline Buttons

You can also create outline buttons by replacing the button modifier classes, like
this:

Example
Try this code »

<button type="button" class="btn btn-outline-

primary">Primary</button>
<button type="button" class="btn btn-outline-
secondary">Secondary</button>
<button type="button" class="btn btn-outline-
success">Success</button>
<button type="button" class="btn btn-outline-
danger">Danger</button>
<button type="button" class="btn btn-outline-
warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-
light">Light</button>

— The output of the above example will look something like this:
Changing the Sizes of Buttons
Bootstrap gives you option further to scaling a button up or down. You can make
buttons larger or smaller through adding an extra class .btn-lg or .btn-sm, like this:

Example
Try this code »

<button type="button" class="btn btn-primary btn-

lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-
sm">Small</button>

— The output of the above example will look something like this:

You can also create block level buttons (buttons that covers the full width of the
parent elements) by adding an extra class .btn-block to the buttons, like this:

Example
Try this code »

<button type="button" class="btn btn-primary btn-lg btn-

block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-
block">Block level button</button>

— The output of the above example will look something like this:
Bootstrap Disabled Buttons
Sometimes we need to disable a button for certain reasons, for example, 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. Let's see how to do that.

Creating Disabled Buttons Using Button and Input Element

Buttons created through <button> or <input> tag can be disabled by adding
the disabled attribute to the respective element, as shown in the following
example:

Example
Try this code »

<button type="button" class="btn btn-primary btn-lg"

disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg"
disabled>Button</button>

— The output of the above example will look something like this:

Creating Disabled Buttons Using Anchor Elements

Buttons created through <a> tag can be disabled by adding the class .disabled,
like this:

Example
Try this code »

<a href="#" class="btn btn-primary btn-lg disabled">Primary

link</a>
<a href="#" class="btn btn-secondary btn-lg disabled">Link</a>
— The output of the above example will look something like this:

Note: The .disabled class only make links visually appear like disabled, however
the link will remain clickable unless you remove the href attribute from it.
Alternatively, you could implement custom JavaScript to prevent those clicks.

Bootstrap Active Buttons

Moreover, you can also apply the class .active to force the buttons look like
active (i.e. pressed). Usually you don't need to add this class to the buttons, as
their active state is automatically styled by the Bootstrap using
CSS :active pseudo-class. Here's an example:

Example
Try this code »

<a href="#" class="btn btn-primary btn-lg active" role="button"

aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active"
role="button" aria-pressed="true">Link</a>

— The output of the above example will look something like this:
Creating Spinner Buttons
With Bootstrap you can easily include spinner icon in a button to indicate the
loading state in your application. Check out the following example to see how it
works:

Example
Try this code »

<button type="button" class="btn btn-primary" disabled>

<span class="spinner-border spinner-border-sm"></span>
</button>
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading...
</button>
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading...
</button>

In the next chapter you will learn how to combine multiple buttons horizontally
or vertically in a line like toolbars using the Bootstrap button groups component.
Chapter 15

Bootstrap Button Groups

In this tutorial you will learn how to use Bootstrap button group component.

Creating Button Groups with Bootstrap

In the previous chapter you've learnt how to create different types of individual
buttons and modify them with predefined classes. Bootstrap however, also allows
you to group a series of buttons together in a single line through the button
group component.

To create a button groups just wrap a series of buttons with .btn class in
a <div> element and apply the class .btn-group on it, as demonstrated in the
following example:

Example
Try this code »

<div class="btn-group">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-
primary">Services</button>
</div>

— The output of the above example will look something like this:
Creating Button Toolbar
You can also combine sets of button groups together for creating more complex
components like button toolbar. To create button toolbar just wrap sets of
button groups in a <div> element and apply the class .btn-toolbar on it, as shown
in the following example:

Example
Try this code »

<div class="btn-group mr-2">

<button type="button" class="btn btn-primary">
<i class="fa fa-font"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-bold"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-italic"></i>
</button>
</div>
<div class="btn-group mr-2">
<button type="button" class="btn btn-primary">
<i class="fa fa-align-left"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-align-center"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-align-right"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-align-justify"></i>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">
<i class="fa fa-undo"></i>
</button>
</div>
— The output of the above example will look something like this:

Height Sizing of Button Groups

Instead of applying button sizing classes to every button in a group, you can
simply apply button group sizing classes like .btn-group-lg or .btn-group-sm directly
to each .btn-group element to create larger or smaller button groups, as shown in
the example below:

Example
Try this code »

<div class="btn-group mb-2 btn-group-lg">

<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-
primary">Services</button>
</div>
<br>
<div class="btn-group mb-2">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-
primary">Services</button>
</div>
<br>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-
primary">Services</button>
</div>
— The output of the above example will look something like this:

Nesting Button Groups

Button groups can also be nested. The following example demonstrates how to
place a .btn-group within another .btn-group to create dropdown menus inside
button groups.

Example
Try this code »

<div class="btn-group">
<a href="#" class="btn btn-primary">Home</a>
<a href="#" class="btn btn-primary">About</a>
<div class="btn-group">
<a href="#" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">Services</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">Web
Development</a>
</div>
</div>
</div>
— The output of the above example will look something like this:
Vertically Stacked Button Groups
You can also make the button groups appear vertically stacked rather than
horizontally. To do this just replace the class .btn-group with the .btn-group-
vertical, like this:

Example
Try this code »

<div class="btn-group-vertical">
<a href="#" class="btn btn-primary">Home</a>
<a href="#" class="btn btn-primary">About</a>
<div class="btn-group">
<a href="#" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">Services</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">Web
Development</a>
</div>
</div>
</div>
— The output of the above example will look something like this:
Creating Justified Button Groups
You can also stretch your button groups to fill all the available width by applying
the flex utility class .d-flex to the .btn-group element. Every button has equal
width in this case.

Example
Try this code »

<div class="btn-group d-flex">

<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-
primary">Services</button>
</div>

— The output of the above example will look something like this:
Chapter 16

Bootstrap Images
In this tutorial you will learn how to style images, as well as how to create
responsive images and videos using Bootstrap.

Styling Images with Bootstrap

Images are very common in modern web design. So styling images and placing it
properly on the web pages is very important for improving the user experience.

Using the Bootstrap built-in classes you can easily style images such as making
the round cornered or circular images, or give them effect like thumbnails.

Example
Try this code »

<img src="images/avatar.svg" class="rounded" alt="Rounded

Image">
<img src="images/avatar.svg" class="rounded-circle"
alt="Circular Image">
<img src="images/avatar.svg" class="img-thumbnail"
alt="Thumbnail Image">

— The output of the above example will look something like this:
Creating Responsive Images and Videos
With Bootstrap you can make the images responsive too. Just add the class .img-
fluid to the <img> tag. This class mainly applies the styles max-
width: 100%; and height: auto; to the image so that it scales nicely to fit the
containing element — in case if the width of the image is larger than the
containing element itself. Check out the following example to see how it works:

Example
Try this code »

<img src="images/kites.jpg" class="img-fluid" alt="Flying

Kites">
<img src="images/sky.jpg" class="img-fluid" alt="Cloudy Sky">
<img src="images/balloons.jpg" class="img-fluid" alt="Hot Air
Balloons">

Note: When making the responsive layouts consider making your images
responsive too, otherwise if an image width is larger than the parent element's
width in any case, it will overflow and may break your web page layout.

You can also make the video or slideshow embedded in a web page responsive
without affecting its original aspect ratio. To do this wrap any embed like
an <iframe>, or <video> in a <div> element and apply the class .embed-responsive, and
an aspect ratio class such as .embed-responsive-16by9.

You can optionally apply an explicit descendant class .embed-responsive-item on the

embedded element to match the styling for other attributes. Here's is an
example:

Example
Try this code »

In the above example, we've created the 4 responsive videos with 4 different
aspect ratios (21:9, 16:9, 4:3, and 1:1) by using the classes .embed-responsive-
21by9, .embed-responsive-16by9, .embed-responsive-4by3, and .embed-responsive-1by1,
respectively.

Tip: The aspect ratio of an image describes the proportional relationship between
its width and its height. Two common videographic aspect ratios are 16:9 and 4:3.
Horizontal Alignment of Images
You can align the images left or right within a larger box using the .pull-
left or .pull-right classes. You can also use the text alignment classes such
as .text-left, .text-right, and .text-center on the parent container to align the
inline images horizontally left, right, and center.

However, to center align the block-level images you need to use the .mx-
auto margin utility class.

Let's take a look at the following example to see how it works:

Example
Try this code »

<div class="box">
<img src="images/avatar.svg" class="d-block mx-auto"
alt="Sample Image">
</div>
Chapter 17

Bootstrap Cards
In this tutorial you will learn how to use Bootstrap card component.

Introducing Bootstrap 4 Cards

Bootstrap 4 introduces a new flexible and extensible content container—
the card component—in place of old panels, wells, and thumbnail component. It
includes options for headers and footers, a wide variety of content, contextual
background colors, and powerful display options.

In the following sections, you will see what you can do with card component.

Creating a Basic Card

The card markup is pretty straight forward. The ourter wrapper require the base
class .card, whereas content can be placed inside the .card-body. The following
example will show you how to create a card with a picture mixed with some text
content and a button.

Example
Try this code »

<div class="card" style="width: 300px;">

<img src="images/sample.svg" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title">Alice Liddel</h5>
<p class="card-text">Alice is a freelance web designer
and developer based in London. She is specialized in HTML5,
CSS3, JavaScript, Bootstrap, etc.</p>
<a href="#" class="btn btn-primary">View Profile</a>
</div>
</div>
— The output of the above example will look something like this:

Content Types for Card Component

The card component support a wide variety of content, including images, text, list
groups, links, navs, and more. Here are the examples of what's supported by the
card.

Body Only Card

You can simply use .card with .card-body within, whenever you need to create a
padded box.

Example
Try this code »
<div class="card">
<div class="card-body">This is some text within a padded
box.</div>
</div>
— The output of the above example will look something like this:

Card with Header and Footer

You can also add header and footer within your cards using the .card-
header and .card-footer class, respectively. Let's take a look at the following
example:

Example
Try this code »

<div class="card text-center">

<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">NASA launches solar probe</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor, varius quam at,
luctus dui. Mauris magna metus, dapibus nec turpis vel, semper
malesuada ante.</p>
<a href="#" class="btn btn-primary">Know more</a>
</div>
<div class="card-footer text-muted">2 days ago</div>
</div>
— The output of the above example will look something like this:

Placing List Groups within Card

You can also place list groups inside the card along with other content types, as
shown here.

Example
Try this code »

<div class="card" style="width: 18rem;">

<div class="card-header">Featured</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Add More</a>
<a href="#" class="card-link">Share</a>
</div>
</div>
— The output of the above example will look something like this:

Feel free to mix and match multiple content types to create the card you need.
The following example will create a fixed-width card with images, text, list group,
and links.

Example
Try this code »

<div class="card" style="width: 300px;">

<img src="images/avatar.svg" class="w-100 border-bottom"
alt="Rounded Image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Pulvinar leo id risus pellentesque
el vestibulum. Sed diam libero egetve sodales sapien vel,
aliquet nibhte bibendum enim porttitor orci.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Customizing the Card Background
There are several options for customizing the card backgrounds, borders, and
color. You can use the text and background utility classes to change the
appearance of a card.

Example
Try this code »

<div class="row">
<div class="col-sm-6">
<div class="card text-white bg-primary mb-4">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card text-white bg-secondary mb-4">
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card text-white bg-success mb-4">
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card text-white bg-danger mb-4">
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card text-white bg-warning mb-4">
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card text-white bg-info mb-4">
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card text-white bg-dark">
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card bg-light">
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
</div>
</div>
</div>
— The output of the above example will look something like this:

Customizing the Card Border and Text

You can also customize the text and border color of any card using the text and
border utility classes. Just apply these classes on the parent .card or its child
elements, as shown below:
Example
Try this code »

<div class="row">
<div class="col-sm-6">
<div class="card border-primary mb-4">
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card border-secondary mb-4">
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card border-success mb-4">
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card border-danger mb-4">
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card border-warning mb-4">
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card border-info mb-4">
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card border-dark mb-4">
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card border-light mb-4">
<div class="card-body text-muted">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
</div>
</div>
</div>
— The output of the above example will look something like this:

Card Layout Options

In addition to styling of the cards, Bootstrap also includes a few options for laying
out the series of cards. However, these layouts are not responsive yet.

Creating Card Groups

You can use card groups to render cards as a single, attached element with equal
width and height columns. Card groups use display: flex; to achieve their
uniform sizing.
Example
Try this code »

<div class="card-group">
<div class="card">
<img src="images/thumbnail.svg" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins
ago</small>
</div>
</div>
<div class="card">
<img src="images/thumbnail.svg" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Vestibulum id metus ac nisl
bibendum nibh scelerisque non purus in suspendisse.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins
ago</small>
</div>
</div>
<div class="card">
<img src="images/thumbnail.svg" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Pulvinar leo id risus enim.
Bibendum varius tincidunt pellentesque malesuada in.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins
ago</small>
</div>
</div>
</div>
— The output of the above example will look something like this:

Creating Card Decks

Card decks are similar to card groups (i.e. each card has equal width and height).
The only difference is cards aren't attached to one another. Here's an example:

Example
Try this code »

<div class="card-deck">
<div class="card">
<img src="images/thumbnail.svg" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins
ago</small>
</div>
</div>
<div class="card">
<img src="images/thumbnail.svg" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Vestibulum id metus ac nisl
bibendum nibh scelerisque non purus in suspendisse.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins
ago</small>
</div>
</div>
<div class="card">
<img src="images/thumbnail.svg" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Pulvinar leo id risus enim.
Bibendum varius tincidunt pellentesque malesuada in.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins
ago</small>
</div>
</div>
</div>
— The output of the above example will look something like this:
Creating Card Columns
With Bootstrap 4 you can also create grid of cards like Pinterest by wrapping
them in .card-columns. Cards are built with CSS column properties instead of
flexbox for easier alignment. Cards are ordered from top to bottom and left to
right. Let's check out an example:

Example
Try this code »

<div class="card-columns">
<div class="card">
<img src="images/thumbnail.svg" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipi elit. Nam eu sem tempor, varius quam at,
luctus dui. Mauris magna metus.</p>
<p class="card-text"><small class="text-muted">Last
updated 3 mins ago</small></p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Nam eget purus consectetur in vehicula. Nullamr
ultrices nisl risus, viverra libero.</p>
<footer class="blockquote-footer">
<small class="text-muted">Someone famous</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="images/thumbnail.svg" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Vestibulum id metus ac nisl
bibendum scelerisque non dignissim purus.</p>
<p class="card-text"><small class="text-muted">Last
updated 2 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Pulvinar leo risus vestibulum. Sed diam on sodales
eget.</p>
<footer class="blockquote-footer text-white">
<small>Someone famous</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Enim arcu, interdum dignissim
venenatis velc.</p>
<p class="card-text"><small class="text-muted">Last
updated 1 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="images/thumbnail.svg" class="card-img-top"
alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Quis quam ut magna consequat faucibus. Pellentesque
eget nisi suscipit tincidunt. Pellentesque quam.</p>
<footer class="blockquote-footer">
<small class="text-muted">Someone famous</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Convallis eget pretium, bibendum
non leo. Proien suscipit purus adipiscing dolor gravida
fermentum sapien blandit praest interdum vel metus.</p>
<p class="card-text"><small class="text-muted">Last
updated 3 mins ago</small></p>
</div>
</div>
</div>
— The output of the above example will look something like this:

Creating Horizontal Cards

You can also create horizontal cards where image and text content are placed
side-by-side using a combination of grid and utility classes, as shown in the
following example:
Example
Try this code »

<div class="card" style="max-width: 500px;">

<div class="row no-gutters">
<div class="col-sm-5" style="background: #868e96;">
<img src="images/sample.svg" class="card-img-top h-
100" alt="...">
</div>
<div class="col-sm-7">
<div class="card-body">
<h5 class="card-title">Alice Liddel</h5>
<p class="card-text">Alice is a freelance web
designer and developer based in London. She is specialized in
HTML5, CSS3, JavaScript, Bootstrap, etc.</p>
<a href="#" class="btn btn-primary stretched-
link">View Profile</a>
</div>
</div>
</div>
</div>

— The output of the above example will look something like this:
Card Image Overlays
You can even turn an image into a card background and place the card's text on
the top it using the class .card-img-overlay in place of .card-body. Depending
on the image, you may need additional styles for better adjustments. Here's an
example:

Example
Try this code »

<div class="card text-white" style="width: 350px;">

<img src="images/sample.svg" class="card-img-top" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Alice Liddel</h5>
<p class="card-text">Alice is a freelance web designer
and developer based in London. She is specialized in HTML5,
CSS3, JavaScript, Bootstrap, etc.</p>
<a href="#" class="btn btn-primary stretched-link">View
Profile</a>
</div>
</div>
— The output of the above example will look something like this:

Note: The card content should not be larger than the height of the image. If
content is larger than the image the content will be displayed outside the image.
Text Alignment inside Card
You can easily change the text alignment of any card—entirely or specific parts—
with the text alignment utility classes. Let's check out an example:

Example
Try this code »

<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet
tempor...</p>
<a href="#" class="btn btn-primary">Know more</a>
</div>
</div>

<div class="card text-center mt-3">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Vestibulum metus bibendum nibh
sapien...</p>
<a href="#" class="btn btn-primary">Know more</a>
</div>
</div>

<div class="card text-right mt-3">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Pulvinar leo id risus pellentesque
diam...</p>
<a href="#" class="btn btn-primary">Know more</a>
</div>
</div>
Specifying Card Size
Cards have no specific width, they are 100% wide by default. However, you can
change this as needed with custom CSS, grid classes, or sizing utility classes. Let's
see how this works:

Example
Try this code »

<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit
amet...</p>
<a href="#" class="btn btn-primary">Know
more</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Vestibulum metus bibendum
nibh...</p>
<a href="#" class="btn btn-primary">Know
more</a>
</div>
</div>
</div>
</div>

<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet...</p>
<a href="#" class="btn btn-primary">Know more</a>
</div>
</div>

<div class="card" style="width: 15rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet...</p>
<a href="#" class="btn btn-primary">Know more</a>
</div>
</div>

Card with Stretched Link

You can add the class .stretched-link to a link inside the card to make the
whole card clickable (i.e. whole card act like a link). Multiple links are not
recommended with stretched links.

Try out the following example to see how this actually works:

Example
Try this code »

<div class="card" style="width: 300px;">

<img src="images/sample.svg" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title">Alice Liddel</h5>
<p class="card-text">Alice is a freelance web designer
and developer based in London. She is specialized in HTML5,
CSS3, JavaScript, Bootstrap, etc.</p>
<a href="#" class="btn btn-primary stretched-link">View
Profile</a>
</div>
</div>
Chapter 18

Bootstrap Media Objects

In this tutorial you will learn how to use the Bootstrap media object component.

Using the 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. you can do this easily using the newly introduced Bootstrap media
component, like this:

Example
Try this code »

<div class="media">
<img src="images/avatar.svg" class="mr-3" alt="Sample
Image">
<div class="media-body">
<h5 class="mt-0">Jhon Carter <small><i>Posted on January
10, 2019</i></small></h5>
<p>This is really an excellent feature! I love it. One
day I'm definitely going to use this Bootstrap media object
component into my application.</p>
</div>
</div>

— The output of the above example will look something like this:
You can also create other variation of the media component. Apply the image
modifier classes like .rounded or .rounded-circle to the image to create rounded
corner or circular image.

Example
Try this code »

— The output of the above example will look something like this:

Creating Nested Media Objects

Media objects can also be nested inside other media object. It can be very useful
for creating comment threads in a blog post. Here's is an example:

Example
Try this code »

<div class="media">
<img src="images/avatar.svg" class="rounded-circle mr-3"
alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Jhon Carter <small><i>Posted on January
10, 2019</i></small></h5>
<p>This is really an excellent feature! I love it. One
day I'm definitely going to use this Bootstrap media object
component into my application.</p>

<div class="media mt-2">
<img src="images/avatar.svg" class="rounded-circle
mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Clark Kent <small><i>Posted on
January 12, 2019</i></small></h5>
<p>Thanks, you found this component useful.
Don't forget to check out other Bootstrap components as well.
They're also very useful.</p>
</div>
</div>
</div>
</div>

— The output of the above example will look something like this:

Alignment of Media Objects

You can also change the horizontal alignment of content and media by simply
tweaking the HTML code itself, as demonstrated in the following example:

Example
Try this code »

<div class="media">
<div class="media-body">
<h5 class="mt-0">Jhon Carter <small><i>Posted on January
10, 2019</i></small></h5>
<p>This is really an excellent feature! I love it. One
day I'm definitely going to use this Bootstrap media object
component into my application.</p>
</div>
<img src="images/avatar.svg" class="ml-3" alt="Sample
Image">
</div>
— The output of the above example will look something like this:

Besides that you can also align the images or other media at the middle or
bottom of the content block using the flexbox utilities classes, for example, you
can use the class .align-self-center for vertical center alignment, and the
class .align-self-end for bottom alignment. By default, the media inside a media
object is top aligned. Here's an example:

Example
Try this code »

<div class="media">
<img src="images/avatar.svg" class="mr-3" alt="Sample
Image">
<div class="media-body">
<h5 class="mt-0">Top aligned media <small><i>This is
Default</i></small></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit...</p>
</div>
</div>
<hr>

<div class="media">
<img src="images/avatar.svg" class="align-self-center mr-3"
alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Middle Aligned Media</h5>
<p>Vestibulum quis quam ut magna consequat faucibus
aleo...</p>
</div>
</div>
<hr>

<div class="media">
<img src="images/avatar.svg" class="align-self-end mr-3"
alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Bottom Aligned Media</h5>
<p>Amet nibh libero, in gravida nulla. Nulla vel
metus...</p>
</div>
</div>

Creating a Media List

You can also create a media list using the HTML list elements and the media
object classes. Just apply the class .list-unstyled on the <ul> or <ol> element, and
the class .media on the child <li> element, as demonstrated in the following
examples:

Example
Try this code »

<ul class="list-unstyled">
<li class="media">
<img src="images/avatar.svg" class="mr-3" alt="Sample
Image">
<div class="media-body">
<h5 class="mt-0">List-based media object</h5>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.
Mauris magna metus, dapibus nec turpis vel, semper malesuada
ante.</p>
</div>
</li>
<li class="media my-2">
<img src="images/avatar.svg" class="mr-3" alt="Sample
Image">
<div class="media-body">
<h5 class="mt-0">List-based media object</h5>
<p>Vestibulum quis quam ut magna consequat faucibus.
Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
risus. Pellentesque viverra sagittis quam at mattis.</p>
</div>
</li>
<li class="media">
<img src="images/avatar.svg" class="mr-3" alt="Sample
Image">
<div class="media-body">
<h5 class="mt-0">List-based media object</h5>
<p>Amet nibh libero, in gravida nulla. Nulla vel
metus scelerisque ante sollicitudin commodo. Cras purus odio,
vestibulum in vulputate at, tempus viverra turpis.</p>
</div>
</li>
</ul>
Chapter 19

Bootstrap Icons
In this tutorial you will learn how to use icons in Bootstrap.

Using Icons in Bootstrap 4

The new Bootstrap 4 version doesn't include an icon library by default, unlike the
previous Bootstrap 3 version that includes Glyphicons in the font format in its
core.

However, you can still include icons in your project using several external font
based icon library. The most popular and highly compatible icon library for
Bootstrap is Font Awesome. It provides 675 icons which are available in font
format for better usability and scalability.

The advantage of using font icons is, you can create icons of any color just
through applying the CSS color property. Let's see how to include font-awesome
icons in a web page.

How to Include Font Awesome

You can simply use the freely available font-awesome CDN link to include the
font-awesome icons in your project. This CDN link basically points to a remote
CSS file that includes all the necessary classes to generate variety of icons. Let's
take a look at the following example:

Example
Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<title>Including Font Awesome in Bootstrap Template</title>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/boo
tstrap.min.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T
" crossorigin="anonymous">

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN
" crossorigin="anonymous">
</head>
<body>
<h1><i class="fa fa-globe"></i> Hello, world!</h1>

<script src="https://code.jquery.com/jquery-
3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo
" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd
/popper.min.js" integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1
" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/boots
trap.min.js" integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM
" crossorigin="anonymous"></script>
</body>
</html>

How to Use Font Awesome Icons in Your Code

To use font-awesome icons in your code you'll require an <i> tag along with a
base class .fa and an individual icon class .fa-*. The general syntax for using font-
awesome icons is:
<i class="fa fa-class-name"></i>

Where fa-class-name is the name of the particular icon class (e.g. fa-search, fa-
user, fa-star, fa-calendar, fa-globe, etc.) defined in font-awesome.min.css file.

For example, to use search icon you can place the following code just about
anywhere:
Example
Try this code »

<button type="submit" class="btn btn-primary"><span class="fa

fa-search"></span> Search</button>
<button type="submit" class="btn btn-secondary"><span class="fa
fa-search"></span> Search</button>
— The output of the above example will look something like this:

Similarly, you can place icons inside the headings, paragraphs, tables, or
anywhere you want. In the next chapter you will see how to use these icons
in Bootstrap nav components.

Note: Remember to leave a space after the closing tag of icon element (i.e.
after </i> tag), when using the icons along with the strings of text such as inside
buttons or navigation links, to ensure proper spacing between the icon and text.
Chapter 20

Bootstrap Nav: Tabs and Pills

In this tutorial you will learn how to create Bootstrap nav components.

Bootstrap Nav Components

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.

Creating Basic Nav with Bootstrap

You can use the Bootstrap .nav class to create a basic navigation menu, like this:

Example
Try this code »

<nav class="nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Messages</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-
1">Reports</a>
</nav>

— The output of the above example will look something like this:

Note: You can use the class .disabled to make a link look like disabled. But,
the .disabled class only changes the visual appearance of the link by making it
gray and removing the hover effect, however the link will remain clickable unless
you remove the "href" attribute.
Alignment of Nav Items
By default, navs are left-aligned, but you can easily align them to center or right
using flexbox utilities.

The following example uses the class .justify-content-center to align nav items to
center.

Example
Try this code »

<nav class="nav justify-content-center">

— The output of the above example will look something like this:

Similarly, you can align nav items to right using the class .justify-content-end, like
this:

Example
Try this code »

<nav class="nav justify-content-end">

<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Messages</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-
1">Reports</a>
</nav>
— The output of the above example will look something like this:
Moreover, you can even vertically stack your nav items by changing the flex item
direction with the class .flex-column, as demonstrated in the following example:

Example
Try this code »

<nav class="nav flex-column">

— The output of the above example will look something like this:

Creating the Basic Tabs

Simply, add the class .nav-tabs to the basic nav to generate a tabbed navigation,
like this:

Example
Try this code »

<nav class="nav nav-tabs">

You can also add icons to your tab items to make it more attractive, as shown
here:

Example
Try this code »

<nav class="nav nav-tabs">

— The output of the above example will look something like this:
Creating the Pills Nav
Similarly, you can create pill based navigation by adding the class .nav-pills on
the basic nav instead of class .nav-tabs, as shown in the following example:

Example
Try this code »

<nav class="nav nav-pills">

Similarly, like nav tabs you can also add icons to your pills nav to make it more
attractive:

Example
Try this code »

<nav class="nav nav-pills">

<a href="#" class="nav-item nav-link active">
<i class="fa fa-home"></i> Home
</a>
<a href="#" class="nav-item nav-link">
<i class="fa fa-user"></i> Profile
</a>
<a href="#" class="nav-item nav-link">
<i class="fa fa-envelope"></i> Messages
</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-
1">
<i class="fa fa-line-chart"></i> Reports
</a>
</nav>
— The output of the above example will look something like this:

Additionally, you can apply the class .flex-column on the .nav element to make the
pills nav appear vertically stacked, as shown in the following example:

Example
Try this code »

<nav class="nav nav-pills flex-column">

The four CSS classes .dropdown, .dropdown-toggle, .dropdown-menu and .dropdown-

item are required in addition to the .nav, .nav-tabs or .nav-pills classes to create a
simple dropdown menu inside the nav without using any JavaScript code.

Creating Tabs with Dropdowns

The following example will show you how to add simple dropdown menus to a
tab.

Example
Try this code »

<nav class="nav nav-tabs">

<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-
toggle="dropdown">Messages</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Inbox</a>
<a href="#" class="dropdown-item">Sent</a>
<a href="#" class="dropdown-item">Drafts</a>
</div>
</div>
<a href="#" class="nav-item nav-link disabled" tabindex="-
1">Reports</a>
</nav>
— The output of the above example will look something like this:
Creating Pills with Dropdowns
The following example will show you how to add simple dropdown menus to a
pill nav.

Example
Try this code »

<nav class="nav nav-pills">

— The output of the above example will look something like this:

You will learn more about dropdown menus later in Bootstrap

dropdowns chapter.
Fill and Justify Nav Component
You can force your nav items to extend and proportionately fill all available width
using the class .nav-fill on the .nav element. In the following example all
horizontal space is occupied by the nav items, but every nav item doesn't have
the same width.

Example
Try this code »

<nav class="nav nav-pills nav-fill">

<a href="#" class="nav-item nav-link">Home</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link active">Explore
Products</a>
<a href="#" class="nav-item nav-link">Contact Us</a>
</nav>
— The output of the above example will look something like this:

Alternatively, you can use the class .nav-justified instead of.nav-fill, if you want
nav that fills all horizontal space as well as every nav item has the same width.

Example
Try this code »

<nav class="nav nav-pills nav-justified">

Bootstrap Navbar
In this tutorial you will learn how to create static and fixed positioned responsive
navigation headers using the Bootstrap navbar component.

Creating a Simple Navbar with Bootstrap

You can use the Bootstrap navbar component to create responsive navigation
header for your website or application. These responsive navbar initially collapsed
on devices having small viewports like cell-phones but expand when user click
the toggle button. However, it will be horizontal as normal on the medium and
large devices like laptop or desktop.

You can also create different variations of the navbar such as navbars with
dropdown menus and search boxes as well as fixed positioned navbar with much
less effort. The following example will show you how to create a simple static
navbar with navigation links.

Example
Try this code »

<nav class="navbar navbar-expand-md navbar-light bg-light">

<a href="#" class="navbar-brand">Brand</a>
<button type="button" class="navbar-toggler" data-
toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarCollapse">

<div class="navbar-nav">
<a href="#" class="nav-item nav-link
active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Messages</a>
<a href="#" class="nav-item nav-link disabled"
tabindex="-1">Reports</a>
</div>
<div class="navbar-nav ml-auto">
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</nav>

— The output of the above example will look something like this:

Moreover, instead of plain text, you can also place your logo image inside the
navbar. However, you need to set the logo height manually to fit it properly
inside the navbar, as shown here:

Example
Try this code »

<nav class="navbar navbar-expand-md navbar-light bg-light">

<div class="collapse navbar-collapse" id="navbarCollapse">

Note: Use the utility classes such as .ml-auto, .mr-auto, .justify-content-between, etc.
to align the nav links, forms, buttons or text inside the navbar.

Adding Dropdowns to Navbar

You can also include dropdowns and search box within the navbars, as shown
here:

Example
Try this code »

<nav class="navbar navbar-expand-md navbar-light bg-light">

<a href="#" class="navbar-brand">Brand</a>
<button type="button" class="navbar-toggler" data-
toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse justify-content-

between" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link
active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle"
data-toggle="dropdown">Messages</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Inbox</a>
<a href="#" class="dropdown-item">Sent</a>
<a href="#" class="dropdown-item">Drafts</a>
</div>
</div>
</div>
<form class="form-inline">
<div class="input-group">
<input type="text" class="form-control"
placeholder="Search">
<div class="input-group-append">
<button type="button" class="btn btn-
secondary"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<div class="navbar-nav">
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</nav>

— The output of the above example will look something like this:

Tip: To create navbars that is not fixed on the top or bottom, place it anywhere
within a .container, which sets the width of your site and content.
Placing Search Form inside Navbar
Search form is very common component of the navbars and you have seen it on
various website quite often. You can place various form controls and components
within a navbar using the class .form-inline on the <form> element, as shown in the
following example:

Example
Try this code »

<nav class="navbar navbar-expand-md navbar-dark bg-dark">

<a href="#" class="navbar-brand">Brand</a>
<button type="button" class="navbar-toggler" data-
toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarCollapse">

<div class="navbar-nav">
<a href="#" class="nav-item nav-link
active">Home</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link">Products</a>
</div>
<form class="form-inline ml-auto">
<input type="text" class="form-control mr-sm-2"
placeholder="Search">
<button type="submit" class="btn btn-outline-
light">Search</button>
</form>
</div>
</nav>

— The output of the above example will look something like this:
Changing the Color Scheme of Navbars
You can also change the color scheme of the navbar by using the .navbar-
light for the light background colors, or .navbar-dark for the dark background
colors. Then, customize it with the background-color utility classes, such as .bg-
dark, .bg-primary, and so on.

Alternatively, you can also apply the CSS background-color property on

the .navbar element yourself to customize the navbar theme, as shown in the
following example:

Example
Try this code »

<nav class="navbar navbar-expand-md navbar-dark bg-dark">

</nav>

<nav class="navbar navbar-dark bg-primary">

</nav>

<nav class="navbar navbar-light" style="background-color:

#ddeeff;">

</nav>

— The output of the above example will look something like this:
Bootstrap Fixed Navbar
Bootstrap also provides mechanism to create navbar that is fixed on the top or
bottom of the viewport and will scroll with the content on the page.

Creating the Fixed to Top Navbar

Apply the position utility class .fixed-top to the .navbar element to fix the navbar
at the top of the viewport, so that it won't scroll with the page. Here's an
example:

Example
Try this code »

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-

top">

</nav>

Creating the Fixed to Bottom Navbar

Similarly, add the class .fixed-bottom on the .navbar element to fix the navbar at
the bottom of the viewport, as shown in the following example:

Example
Try this code »

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-

bottom">

</nav>

Creating the Sticky Top Navbar

You can also create sticky top navbar that scrolls with the page until it reaches
the top, then stays there, by simply using the .sticky-top class on
the .navbar element, like this:
Example
Try this code »

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-

top">

</nav>

Tip: Place the fixed .navbar content inside the .container or .container-fluid for
proper padding and alignment with the rest of the content.

Note: Remember to add padding (at least 70px) to the top or bottom of
the <body> element to prevent the content to go underneath the navbar while
implementing the fixed top or bottom navbar. Also, be sure to add your
custom style sheet after the core Bootstrap CSS file, otherwise style rules in your
style sheet may be overridden by the Bootstrap's one.
Chapter 22

Bootstrap Breadcrumbs
In this tutorial you will learn how to create breadcrumbs with Bootstrap.

Creating Breadcrumbs with Bootstrap

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

You can create static breadcrumbs layouts with Bootstrap simply using the
class .breadcrumb on the ordered lists, as demonstrated in the following example:

Example
Try this code »

<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a
href="#">Products</a></li>
<li class="breadcrumb-item active">Accessories</li>
</ol>
</nav>

— The output of the above example will look something like this:

The default breadcrumb separator is /. But, you can change it with a little custom
CSS, for example, if you want to use > as separator, you can apply the following
style rules:
Example
Try this code »

.breadcrumb-item + .breadcrumb-item::before {
content: ">";
}

— The output of the above example will look something like this:

Tip: Separators inside the breadcrumb components are added automatically via
CSS through the ::before pseudo-element and the content property.
Chapter 23

Bootstrap Pagination
In this tutorial you will learn how to create pagination with Bootstrap.

Creating Pagination with Bootstrap

Pagination is the process of organizing content by dividing it into separate pages.

Pagination is used in some or other form quite often in almost every web
application, for instance it is used by search engines for displaying a limited
number of results on search results pages, or showing a limited number of posts
for every page on a blog or forum.

Example
Try this code »

<nav>
<ul class="pagination">
<li class="page-item"><a href="#" class="page-
link">Previous</a></li>
<li class="page-item"><a href="#" class="page-
link">1</a></li>
<li class="page-item"><a href="#" class="page-
link">2</a></li>
<li class="page-item"><a href="#" class="page-
link">3</a></li>
<li class="page-item"><a href="#" class="page-
link">4</a></li>
<li class="page-item"><a href="#" class="page-
link">5</a></li>
<li class="page-item"><a href="#" class="page-
link">Next</a></li>
</ul>
</nav>
— The output of the above example will look something like this:

Pagination with Disabled and Active States

Links inside Bootstrap pagination can further be customized for different
circumstances, like when user approaches to an end or start, or indicating current
page number to the user. Use the class .disabled for making the links disabled
and .active to indicate the current page.

Example
Try this code »

<nav>
<ul class="pagination">
<li class="page-item disabled"><a href="#" class="page-
link" tabindex="-1">Previous</a></li>
<li class="page-item active"><a href="#" class="page-
link">1</a></li>
<li class="page-item"><a href="#" class="page-
link">2</a></li>
<li class="page-item"><a href="#" class="page-
link">3</a></li>
<li class="page-item"><a href="#" class="page-
link">4</a></li>
<li class="page-item"><a href="#" class="page-
link">5</a></li>
<li class="page-item"><a href="#" class="page-
link">Next</a></li>
</ul>
</nav>

— The output of the above example will look something like this:
Note: The .disabled class only displays links as it disabled it doesn't remove the
click functionality, to do this you can swap active or disabled anchors with spans.

Example
Try this code »

<nav>
<ul class="pagination">
<li class="page-item disabled"><span class="page-
link">Previous</span></li>
<li class="page-item active"><a href="#" class="page-
link">1</a></li>
<li class="page-item"><a href="#" class="page-
link">2</a></li>
<li class="page-item"><a href="#" class="page-
link">3</a></li>
<li class="page-item"><a href="#" class="page-
link">4</a></li>
<li class="page-item"><a href="#" class="page-
link">5</a></li>
<li class="page-item"><a href="#" class="page-
link">Next</a></li>
</ul>
</nav>

Changing the Sizes of Pagination

You can also change the sizes of pagination to increase or decrease the clickable
area.

Add the relative sizing classes like .pagination-lg, or .pagination-sm to

the .pagination base class for creating larger or smaller pagination.

Example
Try this code »

<nav>
<ul class="pagination pagination-lg">
<li class="page-item disabled"><span class="page-
link">Previous</span></li>
<li class="page-item active"><a href="#" class="page-
link">1</a></li>
<li class="page-item"><a href="#" class="page-
link">2</a></li>
<li class="page-item"><a href="#" class="page-
link">3</a></li>
<li class="page-item"><a href="#" class="page-
link">4</a></li>
<li class="page-item"><a href="#" class="page-
link">5</a></li>
<li class="page-item"><a href="#" class="page-
link">Next</a></li>
</ul>
</nav>

<nav>
<ul class="pagination">
<li class="page-item disabled"><span class="page-
link">Previous</span></li>
<li class="page-item active"><a href="#" class="page-
link">1</a></li>
<li class="page-item"><a href="#" class="page-
link">2</a></li>
<li class="page-item"><a href="#" class="page-
link">3</a></li>
<li class="page-item"><a href="#" class="page-
link">4</a></li>
<li class="page-item"><a href="#" class="page-
link">5</a></li>
<li class="page-item"><a href="#" class="page-
link">Next</a></li>
</ul>
</nav>

<nav>
<ul class="pagination pagination-sm">
<li class="page-item disabled"><span class="page-
link">Previous</span></li>
<li class="page-item active"><a href="#" class="page-
link">1</a></li>
<li class="page-item"><a href="#" class="page-
link">2</a></li>
<li class="page-item"><a href="#" class="page-
link">3</a></li>
<li class="page-item"><a href="#" class="page-
link">4</a></li>
<li class="page-item"><a href="#" class="page-
link">5</a></li>
<li class="page-item"><a href="#" class="page-
link">Next</a></li>
</ul>
</nav>

— The output of the above example will look something like this:

Alignment of Pagination
By default pagination is aligned horizontally left. To align it in the center of the
page add the class .justify-content-center to the .pagination base class, as shown
below:

Example
Try this code »

<nav>
<ul class="pagination justify-content-center">
<li class="page-item"><a href="#" class="page-
link">Previous</a></li>
<li class="page-item"><a href="#" class="page-
link">1</a></li>
<li class="page-item"><a href="#" class="page-
link">2</a></li>
<li class="page-item"><a href="#" class="page-
link">3</a></li>
<li class="page-item"><a href="#" class="page-
link">4</a></li>
<li class="page-item"><a href="#" class="page-
link">5</a></li>
<li class="page-item"><a href="#" class="page-
link">Next</a></li>
</ul>
</nav>

— The output of the above example will look something like this:

Similarly, you can use the class .justify-content-end to align the pagination to the
right:

Example
Try this code »

<nav>
<ul class="pagination justify-content-end">
<li class="page-item"><a href="#" class="page-
link">Previous</a></li>
<li class="page-item"><a href="#" class="page-
link">1</a></li>
<li class="page-item"><a href="#" class="page-
link">2</a></li>
<li class="page-item"><a href="#" class="page-
link">3</a></li>
<li class="page-item"><a href="#" class="page-
link">4</a></li>
<li class="page-item"><a href="#" class="page-
link">5</a></li>
<li class="page-item"><a href="#" class="page-
link">Next</a></li>
</ul>
</nav>

— The output of the above example will look something like this:
Chapter 24

Bootstrap Badges
In this tutorial you will learn how to create badges with Bootstrap.

Creating Badges with Bootstrap

Badges are generally used to indicate some valuable information on the web
pages such as important heading, warning messages, notification counter, etc.

The following example will show you how to create inline badges using the
Bootstrap.

Example
Try this code »

<h1>Bootstrap heading <span class="badge badge-

secondary">New</span></h1>
<h2>Bootstrap heading <span class="badge badge-
secondary">New</span></h2>
<h3>Bootstrap heading <span class="badge badge-
secondary">New</span></h3>
<h4>Bootstrap heading <span class="badge badge-
secondary">New</span></h4>
<h5>Bootstrap heading <span class="badge badge-
secondary">New</span></h5>
<h6>Bootstrap heading <span class="badge badge-
secondary">New</span></h6>
— The output of the above example will look something like this:

Contextual Classes for Badges

There are some contextual or modifier classes to change the appearance of the
badges.

Example
Try this code »

<span class="badge badge-primary">Primary</span>

<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-dark">Dark</span>
<span class="badge badge-light">Light</span>

— The output of the above example will look something like this:
Creating Pill Badges
Similarly, you can create pill shape badges (i.e. badges with more rounded
corners) using the .badge-pill modifier class, as demonstrated in the following
example:

Example
Try this code »

<span class="badge badge-pill badge-primary">Primary</span>

<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-dark">Dark</span>
<span class="badge badge-pill badge-light">Light</span>

— The output of the above example will look something like this:

Showing Counter with Badges

You can also use badges as part of links or buttons to provide a counter, such as
number of received or unread messages, number of notifications etc. They're
most commonly found in email clients, application dashboards, social networking
websites, etc. Here's an example:

Example
Try this code »

<ul class="nav nav-pills">

<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Profile</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link active">Messages <span
class="badge badge-light">24</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Notification <span
class="badge badge-primary">5</span></a>
</li>
</ul>

— The output of the above example will look something like this:
Chapter 25

Bootstrap Progress Bars

In this tutorial you will learn how to create progress bars using Bootstrap.

Creating Progress Bar with Bootstrap

Progress bars can be used for showing the progress of a task or action to the users. The following
example will show you how to create a simple progress bar with vertical gradient.

Example
Try this code »

— The output of the above example will look something like this:

Creating Progress Bar with Label

To show to the progress status as a percentage label just remove the <span> with .sr-only class
from within the progress bar as demonstrated in example above.

Example
Try this code »

<div class="progress">
<div class="progress-bar" style="width: 60%">
60%
</div>
</div>
— The output of the above example will look something like this:

If you are showing percentage label you should also apply a min-width to the progress bar to
ensure that the label text remains readable even for low percentage, like this:

Example
Try this code »

Setting the Height of Progress Bars

The default height of the progress-bar is 16px, but you can also set its height according to your
need by setting the CSS height property on the .progress element, like this:

Example
Try this code »

<div class="progress" style="height: 1px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>

<div class="progress" style="height: 20px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>
— The output of the above example will look something like this:

Creating Stripped Progress Bar

To create the stripped progress bar just add an extra class .progress-bar-striped to
the .progress-bar element, as shown in the following example:

Example
Try this code »

— The output of the above example will look something like this:

Creating Animated Progress Bar

You can also animate the stripped progress-bar. Add the class .progress-bar-animated to
the .progress-bar element, it will animate the stripes from right to left via CSS3 animations.

Example
Try this code »

<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-
animated" style="width: 60%"></div>
</div>
Changing Progress Bar Value Dynamically
Static progress bars aren't very impressive. The following example will give you a rough idea of
how to update the status of a Bootstrap progress bar dynamically using jQuery.

Example
Try this code »

Example
Try this code »

<div class="progress">
<div class="progress-bar bg-success" style="width: 40%">
Program Files (40%)
</div>
<div class="progress-bar bg-warning" style="width: 25%">
Residual Files (25%)
</div>
<div class="progress-bar bg-danger" style="width: 15%">
Junk Files (15%)
</div>
</div>
— The output of the above example will look something like this:

Progress Bars with Emphasis Classes

Bootstrap also provides some emphasis utility classes for progress bars that can be further used
to convey meaning through color, as shown in the following example:

Example
Try this code »

<div class="progress">
<div class="progress-bar bg-info" style="width: 20%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-success" style="width:
40%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width:
80%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width:
90%"></div>
</div>
— The output of the above example will look something like this:

Striped Progress Bars with Emphasis Classes

Similar to the solid colors, you can also create varied striped progress bars.

Example
Try this code »

<div class="progress">
<div class="progress-bar progress-bar-striped bg-info"
style="width: 20%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success"
style="width: 40%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning"
style="width: 80%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger"
style="width: 90%"></div>
</div>
— The output of the above example will look something like this:
Chapter 26

Bootstrap Spinners
In this tutorial you will learn how to use the Bootstrap spinner component.

Creating the Spinners with Bootstrap

Bootstrap 4 introduces the new spinner component that you can use to show the
loading state in your projects. Spinners are typically loading icons and they're
built only with HTML and CSS. However, you need some custom JavaScript to
show or hide them on a web page.

Moreover, you can easily customize the appearance, alignment, and sizing of the
spinners with the pre-defined utility classes. Now, let's see how to create them.

To create a spinner or loading indicator, you can use the .spinner-border class:

Example
Try this code »

<div class="spinner-border">
<span class="sr-only">Loading...</span>
</div>

The special .sr-only class hides an element to all devices except screen readers.
Creating Colored Spinner
You can use the text color utility classes to customize the color of spinners.

Example
Try this code »

<div class="spinner-border text-primary">

<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light">
<span class="sr-only">Loading...</span>
</div>
Creating Growing Spinners
You can also create growing spinners that repeatedly grow and fade out, like this:

Example
Try this code »

<div class="spinner-grow">
<span class="sr-only">Loading...</span>
</div>

Similarly, like the border spinners you can also customize the colors of growing
spinners using the text color utility classes, as shown in the following example:

Example
Try this code »

<div class="spinner-grow text-primary">

<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark">
<span class="sr-only">Loading...</span>
</div>
Sizing of Spinners
You can use the class .spinner-border-sm and .spinner-grow-sm to make a smaller
spinner that can quickly be used within other components such as buttons.

Example
Try this code »

<div class="spinner-border spinner-border-sm">

<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm">
<span class="sr-only">Loading...</span>
</div>

Alternatively, you can use the custom CSS or inline styles to change the size as
needed.

Example
Try this code »

<div class="spinner-border" style="width: 40px; height: 40px;">

<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 40px; height: 40px;">
<span class="sr-only">Loading...</span>
</div>
Using Spinners within Buttons
You can also use spinners within buttons to indicate an action is currently
processing or taking place.

Here's an example where we've placed the spinners inside the disabled buttons.

Example
Try this code »

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading...
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading...
</button>
Alignment of Spinners
You can easily align the spinners left, right or center using the flexbox, float, or
text alignment utility classes. Try out the following example to see how it actually
works:

Example
Try this code »

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>

<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>

<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Chapter 27

Bootstrap Jumbotron
In this tutorial you will learn how to use Bootstrap jumbotron component.

Showcasing Contents with Jumbotron

The Bootstrap jumbotron component provides an excellent way to showcase the
key content or information on a web page. Just wrap your featured content like
heading, descriptions etc. in a <div> element and apply the class .jumbotron on
it.

Example
Try this code »

<div class="jumbotron">
<h1>Learn to Create Websites</h1>
<p class="lead">In today's world internet is the most
popular way of connecting with the people. At <a
href="https://www.tutorialrepublic.com"
target="_blank">tutorialrepublic.com</a> you will learn the
essential of web development technologies along with real life
practice example, so that you can create your own website to
connect with the people around the world.</p>
<p><a href="https://www.tutorialrepublic.com"
target="_blank" class="btn btn-primary btn-lg">Start learning
today</a></p>
</div>
— The output of the above example will look something like this:

Creating Full Page Width Jumbotron

To create a jumbotron without rounded corners and that covers the full width of
the viewport, place it outside all the containers, add the .jumbotron-
fluid modifier class on it, and add a .container or .container-fluid within it,
as shown in the following example:

Example
Try this code »

<div class="jumbotron jumbotron-fluid">

<div class="container">
<h1>Learn to Create Websites</h1>
<p class="lead">In today's world internet is the most
popular way of connecting with the people...</p>
<p><a href="#" class="btn btn-primary btn-lg">Start
learning today</a></p>
</div>
</div>
Chapter 29

Bootstrap Helper Classes

In this tutorial you will learn about the Bootstrap helper/utility classes.

Color Classes
You can use the contextual color classes to emphasize the text and convey
meaning through color. Here's the complete list of available contextual color
classes.

Class Description Test

.text-primary Apply blue color (#007bff) on text. Example

.text-secondary Apply grey color (#6c757d) on text. Example

.text-success Apply green color (#28a745) on text. Example

.text-danger Apply red color (#dc3545) on text. Example

.text-warning Apply yellow color (#ffc107) on text. Example

.text-info Apply teal color (#17a2b8) on text. Example

.text-light Apply very light grey color (#f8f9fa) on text. Example

.text-dark Apply dark grey color (#343a40) on text. Example

.text-body Apply Bootstrap's default body text color (#212529) on Example

text.
.text-muted Apply light grey color (#6c757d) on text. Example

.text-white Apply white color (#fff) on text. Example

.text-black-50 Apply 50% transparent black color (rgba(0,0,0,.5)) Example

on text.

.text-white-50 Apply 50% transparent white color Example

(rgba(255,255,255,.5)) on text.

Background Color Classes

Similar to the contextual color classes, you can use the contextual background
color classes to set the background-color of an element to apply extra emphasis on
them.

Class Description Test

.bg-primary Apply blue background-color (#007bff) on an element. Example

.bg-secondary Apply grey background-color (#6c757d) on an element. Example

.bg-success Apply green background-color (#28a745) on an element. Example

.bg-danger Apply red background-color (#dc3545) on an element. Example

.bg-warning Apply yellow background-color (#ffc107) on an element. Example

.bg-info Apply teal background-color (#17a2b8) on an element. Example

.bg-light Apply very light grey background-color (#f8f9fa) on an Example

element.

.bg-dark Apply dark grey background-color (#343a40) on an Example

element.

.bg-white Apply white background-color (#fff) on an element. Example

.bg-transparent Apply transparent background-color (transparent) on Example

an element.

Text Alignment Classes

You can use these text alignment classes to align and format your text content.

Class Description Test

.text-left Align the text to the left. Example

.text-center Align the text to the center. Example

.text-right Align the text to the right. Example

.text-justify Justify the text content. Example

.text-wrap Wrap the overflowing text. Example

.text-nowrap Prevent text from wrapping. Example

.text-truncate Truncate the text with an ellipsis. Example

.text-break Break the long words to prevent overflow. Example

.text-lowercase Transform the text to lowercase. Example

.text-uppercase Transform the text to uppercase. Example

.text-capitalize Capitalize the first letter of each word. Example

.font-weight-bold Set the font-weight of an element to bold. Example

.font-weight-bolder Set the font-weight of an element Example

to bolder (relative to the parent).

.font-weight-normal Set the font-weight of an element to normal. Example

.font-weight-light Set the light font-weight for an element. Example

.font-weight-lighter Set the lighter font-weight for an element (relative Example

to the parent).

.font-italic Set the font-style of an element to italic. Example

.text-monospace Set the font-family of an element to monospace Example

font (fixed-width)

.text-reset Reset the color of a text or link (inherits the color Example
from its parent).

.text-decoration-none Remove the text decoration such as underline from Example

a text.

Border Classes
You can use the border utility classes to quickly style the border and border-
radius of an element. They are very useful for images, buttons, or any other
element.

Class Description Test

.border Add a border on all sides of an element. Example

.border-top Add a border on the top side of an element. Example

.border-right Add a border on the right side of an element. Example

.border-bottom Add a border on the bottom side of an element. Example

.border-left Add a border on the left side of an element. Example

.border-0 Remove the border from all sides of an element. Example

.border-top-0 Remove the border from top side of an element. Example

.border-right-0 Remove the border from right side of an element. Example

.border-bottom-0 Remove the border from bottom side of an element. Example

.border-left-0 Remove the border from left side of an element. Example

.border-primary Change the border-color of an element to blue Example

(#007bff).

.border-secondary Change the border-color of an element to grey Example

(#6c757d).

.border-success Change the border-color of an element to green Example

(#28a745).

.border-danger Change the border-color of an element to red Example

(#dc3545).

.border-warning Change the border-color of an element to yellow Example

(#ffc107).

.border-info Change the border-color of an element to teal Example

(#17a2b8).

.border-light Change the border-color of an element to very light Example

grey (#f8f9fa).

.border-dark Change the border-color of an element to dark grey Example

(#343a40).

.border-white Change the border-color of an element to white Example

(#fff).

.rounded Round all corners of an element. Example

.rounded-top Round top-left and top-right corners of an element. Example

.rounded-right Round top-right and bottom-right corners of an Example

element.

.rounded-bottom Round bottom-left and bottom-right corners of an Example

element.

.rounded-left Round top-left and bottom-left corners of an element. Example

.rounded-circle Round an element into circle shape. Example

.rounded-pill Round an element into pill shape. Example

.rounded-0 Remove round corners from an element. Example

.rounded-sm Set smaller border-radius (0.2rem) for an element. Example

.rounded-lg Set larger border-radius (0.2rem) for an element. Example

Spacing Classes
You can use the spacing utility classes to quickly adjust the margin and padding
of an element.

The # character in the classes .mt-#, .pt-#, etc. represents the size of the margin or
padding. The value of the size can be an integer from 0 to 5, or auto.

The size 0 completely removes the margin or padding by setting it to 0, whereas

the value auto sets the margin to auto. The integer numbers from 1 to 5 sets the
margin or padding incrementally (ranging from 0.25rem to 3rem). Try out the
examples to see how it works:

Class Description Test

.mt-# Set the top margin of an element. Example

.mb-# Set the bottom margin of an element. Example

.ml-# Set the left margin of an element. Example

.mr-# Set the right margin of an element. Example

.mx-# Set the left and right margin of an element. Example

.my-# Set the top and bottom margin of an element. Example

.pt-# Set the top padding of an element. Example

.pb-# Set the bottom padding of an element. Example

.pl-# Set the left padding of an element. Example

.pr-# Set the right padding of an element. Example

.px-# Set the left and right padding of an element. Example

.py-# Set the top and bottom padding of an element. Example

Tip: You can also apply negative margins using the margin utility classes. Just
append the size number with the character n, like .mt-n1, .mb-n2, and so on.
Float Classes
You can use the float utility classes to quickly float an element to the left or right
or remove float from an element altogether. Here's the list of available float
classes.

Class Description Test

.float-left Float an element to the left. Example

.float-right Float an element to the right. Example

.float-none Disable floating from an element. Example

.clearfix Clear floats to prevent parent element from collapsing. Example

.float-*-left Float an element to the left on based on the viewport size. Example

.float-*-right Float an element to the right on based on the viewport size. Example

.float-*-none Disable floating from an element on based on the viewport Example

size.

Tip: The * character in the classes .float--left and .float--right represents

responsive breakpoint which can be sm, md, lg, or xl. See Bootstrap grid system for
more detail.
Shadow Classes
You can use the shadow utility classes to quickly add or remove shadows to
elements.

Class Description Test

.shadow Add a shadow to an element. Example

.shadow-sm Add a small shadow to an element. Example

.shadow-lg Add a larger shadow to an element. Example

.shadow-none Remove shadow from an element. Example

Sizing Classes
You can use the sizing utility classes to easily make an element as wide or as tall.

Class Description Test

.w-25 Set the width of an element to 25% of its parent element. Example

.w-50 Set the width of an element to 50% of its parent element. Example

.w-75 Set the width of an element to 75% of its parent element. Example

.w-100 Set the width of an element to 100% of its parent element. Example

.w-auto Set the width of an element to auto, i.e. the browser will Example
calculate and select a width for the specified element.

.mw-100 Set the max-width of an element to 100%. Example

.h-25 Set the height of an element to 25% of its parent element. Example
.h-50 Set the height of an element to 50% of its parent element. Example

.h-75 Set the height of an element to 75% of its parent element. Example

.h-100 Set the height of an element to 100% of its parent Example

element.

.h-auto Set the height of an element to auto, i.e. the browser will Example
calculate and select a height for the specified element.

.mh-100 Set the max-height of an element to 100%. Example

.vw-100 Set the width of an element to 100% of the width of the Example
viewport.

.min-vw-100 Set the min-width of an element to 100% of the width of Example

the viewport.

.vh-100 Set the height of an element to 100% of the height of the Example
viewport.

.min-vh-100 Set the min-height of an element to 100% of the height of Example

the viewport.
Vertical Alignment Classes
You can use the vertical alignment utility classes to quickly change the vertical
alignment of inline, inline-block, inline-table, and table cell elements.

Class Description Test

.align-baseline Align the baseline of the element with the baseline of Example
its parent.

.align-top Align the top of the element with the top of the Example
entire line.

.align-middle Align the element in the middle of the parent Example

element.

.align-bottom Align the bottom of the element with the bottom of Example
the entire line.

.align-text-top Align the top of the element with the top of the Example
parent element's font.

.align-text-bottom Align the bottom of the element with the bottom of Example
the parent element's font.
Position Classes
You can use the position utility classes to quickly configuring the position of an
element.

Class Description Test

.position-static Set the position of element to static. Example

.position-relative Set the position of element to relative. Example

.position-absolute Set the position of element to absolute. Example

.position-fixed Set the position of element to fixed. Example

.position-sticky Set the position of element to sticky. Example

.fixed-top Position an element at the top of the viewport, from Example

edge to edge.

.fixed-bottom Position an element at the bottom of the viewport, Example

from edge to edge.

.sticky-top Position an element at the top of the viewport, from Example

edge to edge, but that will only happen after you scroll
past it.
Display Classes
You can use the display utility classes to quickly and responsively toggle the
display value of an element. You can also control an element's display when
printing the page.

Class Description Test

.d-none Hide an element. It does not take up any space in the Example
layout.

.d-inline Force an element to generate an inline-level box. Example

.d-inline-block Force an element to generate a block box that will be Example

flowed with surrounding content i.e. in the same line as
adjacent content like inline box.

.d-block Force an element to generate a block-level box. Example

.d-table Force an element to behave like a <table> element. Example

.d-table-row Force an element to behave like a <tr> element. Example

.d-table-cell Force an element to behave like a <td> element. Example

.d-flex Force an element to generate a block-level flex container Example

box.

.d-inline-flex Force an element to generate an inline-level flex Example

container box.
You can also use the responsive breakpoints (sm, md, lg, and xl.) with these display
utility classes to show or hide elements depending on viewport width using the
format .d-{breakpoint}-{value}, for example, .d-sm-none, .d-md-block, .d-xl-block, and
so on.

For a complete set of flex utility classes, please check out the Bootstrap flex
reference page.

Tip: You can create print variant of the display classes to change the display value
of elements when printing by simply inserting the string print- after .d-, for
example, .d-print-none, .d-print-inline, .d-print-block, .d-print-table, and so on.

Miscellaneous Classes
Here's the list some more utility classes that can used for various purposes.

Class Description Test

.close Create generic close icon for dismissing content like Example
modals and alerts.

.overflow-auto Provide scrollbars to view overflowed content of an Example

element if required.

.overflow-hidden Hide overflowed content of an element. Example

.stretched-link Make an element clickable by stretching a nested link. Example

.visible Make an element visible, without modifying the display. Example

.invisible Make an element invisible, but it still take up space in Example

the page.

.sr-only Hide an element to all devices except screen readers. Example

.text-hide Replace an element's text content with a background Example
image.

Atm Guide
100% (4)
Atm Guide
23 pages
Advanced Googling
100% (1)
Advanced Googling
10 pages
Bootstrap Tutorial
No ratings yet
Bootstrap Tutorial
46 pages
Bootstrap and J Query
No ratings yet
Bootstrap and J Query
130 pages
Responsive Web Design Using Bootstrap
No ratings yet
Responsive Web Design Using Bootstrap
23 pages
Bootstrap (Front-End Framework)
No ratings yet
Bootstrap (Front-End Framework)
4 pages
Bootstrap
No ratings yet
Bootstrap
17 pages
Java Script
No ratings yet
Java Script
71 pages
.What Is HTML?: Example Explained
100% (1)
.What Is HTML?: Example Explained
162 pages
Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy
No ratings yet
Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy
6 pages
CSS Interview Questions and Answers Set
100% (1)
CSS Interview Questions and Answers Set
10 pages
Bootstrap Overview: Silicus Training Name I V1.0 Silicus Technologies India PVT LTD © 2017 1
100% (2)
Bootstrap Overview: Silicus Training Name I V1.0 Silicus Technologies India PVT LTD © 2017 1
50 pages
CSS Commands
No ratings yet
CSS Commands
373 pages
Js Info-3
100% (1)
Js Info-3
318 pages
CSS Rule: Selector
100% (2)
CSS Rule: Selector
8 pages
Django
No ratings yet
Django
139 pages
Javascript Exercises
No ratings yet
Javascript Exercises
2 pages
JavaScript Notes
No ratings yet
JavaScript Notes
32 pages
Js Cheatsheet 1
No ratings yet
Js Cheatsheet 1
17 pages
CSSW3 Schools
No ratings yet
CSSW3 Schools
126 pages
Cssshortcuts
No ratings yet
Cssshortcuts
1 page
Mongo DB
No ratings yet
Mongo DB
21 pages
Angular Material Tutorial
0% (1)
Angular Material Tutorial
17 pages
Javascript Mobile Application Development: Chapter No. 1 "An Introduction To Apache Cordova"
No ratings yet
Javascript Mobile Application Development: Chapter No. 1 "An Introduction To Apache Cordova"
29 pages
Jquery Ui - Version I: Rakesh Singh
No ratings yet
Jquery Ui - Version I: Rakesh Singh
34 pages
GUI Programming in Python Using Tkinter
No ratings yet
GUI Programming in Python Using Tkinter
47 pages
A Comple Tutorial On Cascading Style Sheets
No ratings yet
A Comple Tutorial On Cascading Style Sheets
186 pages
Web Design Ninja
No ratings yet
Web Design Ninja
16 pages
Javascript
No ratings yet
Javascript
55 pages
Mern Stack Online
100% (1)
Mern Stack Online
22 pages
R Bootstrap PDF
No ratings yet
R Bootstrap PDF
5 pages
HTML Tutorial
No ratings yet
HTML Tutorial
160 pages
MVC Pattern (MVC Framework)
No ratings yet
MVC Pattern (MVC Framework)
27 pages
HTML Interview Questions and Answers
No ratings yet
HTML Interview Questions and Answers
56 pages
What Is The Difference Between Javascript Jquery and Ajax Programming 1
No ratings yet
What Is The Difference Between Javascript Jquery and Ajax Programming 1
3 pages
Flutter Cheat Sheet
No ratings yet
Flutter Cheat Sheet
2 pages
Exercises: Functional Programming: Now, Calling F (X, Y) Is Like Calling Foo (3, X, Y)
No ratings yet
Exercises: Functional Programming: Now, Calling F (X, Y) Is Like Calling Foo (3, X, Y)
2 pages
Bootstrap
No ratings yet
Bootstrap
1 page
Bootstrap5 ITIS243
No ratings yet
Bootstrap5 ITIS243
49 pages
Javascript Notes
No ratings yet
Javascript Notes
54 pages
Crockford Douglas JavaScript
100% (1)
Crockford Douglas JavaScript
39 pages
Responsive Web Design by Tim Davison
No ratings yet
Responsive Web Design by Tim Davison
30 pages
FSD Express - Js Module 5
No ratings yet
FSD Express - Js Module 5
56 pages
CSS Tutorial: Examples in Each Chapter
100% (2)
CSS Tutorial: Examples in Each Chapter
332 pages
HTML Notes For 2024 Update
No ratings yet
HTML Notes For 2024 Update
86 pages
Class Notes On HTML and Css
No ratings yet
Class Notes On HTML and Css
48 pages
UIJAVAKIT
100% (1)
UIJAVAKIT
33 pages
Introduction To BOOTSTRAP
0% (1)
Introduction To BOOTSTRAP
48 pages
HTML1 PDF
100% (1)
HTML1 PDF
35 pages
JavaScript Syllabus
No ratings yet
JavaScript Syllabus
3 pages
CSS3
100% (1)
CSS3
25 pages
HTML JavaScript
No ratings yet
HTML JavaScript
271 pages
Css Intro2023
100% (1)
Css Intro2023
29 pages
HTML Css Notes
No ratings yet
HTML Css Notes
7 pages
NextJs 13 NextAuth Serverless API
No ratings yet
NextJs 13 NextAuth Serverless API
46 pages
HTML Tut
No ratings yet
HTML Tut
82 pages
Full Stack Web Developer Nanodegree Syllabus: Before You Start
No ratings yet
Full Stack Web Developer Nanodegree Syllabus: Before You Start
8 pages
Introduction To HTML (W3school)
No ratings yet
Introduction To HTML (W3school)
57 pages
Web Programming Chapter II (HTML&CSS)
100% (1)
Web Programming Chapter II (HTML&CSS)
100 pages
Bootstrap
No ratings yet
Bootstrap
11 pages
Jquery Plugins
No ratings yet
Jquery Plugins
44 pages
120 Advanced JavaScript Interview Questions
From Everand
120 Advanced JavaScript Interview Questions
Hernando Abella
No ratings yet
JavaScript Manual
100% (1)
JavaScript Manual
170 pages
How - To - Start - Manifesting - Thread - by - Upskillyourlife - Jul 18, 23 - From - Rattibha
No ratings yet
How - To - Start - Manifesting - Thread - by - Upskillyourlife - Jul 18, 23 - From - Rattibha
9 pages
Javascript Dom
No ratings yet
Javascript Dom
20 pages
CSS Manual
No ratings yet
CSS Manual
86 pages
Django Powerpoint
No ratings yet
Django Powerpoint
78 pages
Python Manual
No ratings yet
Python Manual
306 pages
What Is Bootstrap?
No ratings yet
What Is Bootstrap?
166 pages
918kiss APK Download 2019 - 2020
No ratings yet
918kiss APK Download 2019 - 2020
3 pages
ANSWER KEY (2) - 69 Que
No ratings yet
ANSWER KEY (2) - 69 Que
5 pages
I Twin Technology: Submitted in Partial Fulfillment of The Requirements For The Award of The Degree of
No ratings yet
I Twin Technology: Submitted in Partial Fulfillment of The Requirements For The Award of The Degree of
30 pages
SAP HANA Commvault Best Practices
No ratings yet
SAP HANA Commvault Best Practices
2 pages
Associate Web Developer 11 Sample Test - Certification
100% (6)
Associate Web Developer 11 Sample Test - Certification
8 pages
Life Without Smartphone
No ratings yet
Life Without Smartphone
4 pages
Change the Default Remote Desktop (RDP) Port 3389 in Windows _ Windows OS Hub
No ratings yet
Change the Default Remote Desktop (RDP) Port 3389 in Windows _ Windows OS Hub
10 pages
Unix Training Content
No ratings yet
Unix Training Content
5 pages
Verilog Codes
No ratings yet
Verilog Codes
26 pages
Byte 7 6 5 4 3 2 1 0 1 Opcode D W 2 Reg R/M 3 (Optional) 4 (Optional) 5 (Optional) 6 (Optional)
No ratings yet
Byte 7 6 5 4 3 2 1 0 1 Opcode D W 2 Reg R/M 3 (Optional) 4 (Optional) 5 (Optional) 6 (Optional)
8 pages
Dhi NVR5232 Ei
No ratings yet
Dhi NVR5232 Ei
3 pages
ISEM Audio Ego-Phase 3 CD Player With Philips CD-pro II - Ebay
No ratings yet
ISEM Audio Ego-Phase 3 CD Player With Philips CD-pro II - Ebay
3 pages
Data Structures and Algorithms For External Storage: External Sorting. Index Files
No ratings yet
Data Structures and Algorithms For External Storage: External Sorting. Index Files
50 pages
An Introduction To MS Word
No ratings yet
An Introduction To MS Word
4 pages
Acio Interview - What Willbe Asked in Acio Interview - Quora
No ratings yet
Acio Interview - What Willbe Asked in Acio Interview - Quora
3 pages
GoPro Photography - September 2022
No ratings yet
GoPro Photography - September 2022
152 pages
RA8875 - Manual Datasheet
No ratings yet
RA8875 - Manual Datasheet
179 pages
1z0-819_3
No ratings yet
1z0-819_3
47 pages
SNMP Informant How-To - OpenNMS - The OpenNMS Project
No ratings yet
SNMP Informant How-To - OpenNMS - The OpenNMS Project
8 pages
Expert Veri+ed, Online, Free.: Topic 1 - Question Set 1
100% (2)
Expert Veri+ed, Online, Free.: Topic 1 - Question Set 1
183 pages
Avaya CMS Custom Reports
No ratings yet
Avaya CMS Custom Reports
196 pages
IIMA ProdBook
No ratings yet
IIMA ProdBook
174 pages
Hikvision DS-KH2220
No ratings yet
Hikvision DS-KH2220
3 pages
Productivity Software Application T.E
100% (1)
Productivity Software Application T.E
22 pages
Academic Statement of Purpose
No ratings yet
Academic Statement of Purpose
1 page
Routing and Switching Certification DS
No ratings yet
Routing and Switching Certification DS
3 pages
Here Is An Example of A Simple SRS Outline
No ratings yet
Here Is An Example of A Simple SRS Outline
4 pages
This Is To Certify That The Project Entitled Police Station Software
No ratings yet
This Is To Certify That The Project Entitled Police Station Software
32 pages