Scribd
Upload
3 views50 pages

Bootstrap

The document provides an overview of responsive web design and the Bootstrap framework, highlighting its features such as mobile-first design, ease of use, and browser compatibility. It explains how to get started with Bootstrap, including using CDN or downloading it, and details the structure of Bootstrap grids, containers, typography, tables, images, jumbotrons, and alerts. Additionally, it covers various classes and components available in Bootstrap for creating responsive and visually appealing web pages.

Uploaded by

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

Bootstrap

The document provides an overview of responsive web design and the Bootstrap framework, highlighting its features such as mobile-first design, ease of use, and browser compatibility. It explains how to get started with Bootstrap, including using CDN or downloading it, and details the structure of Bootstrap grids, containers, typography, tables, images, jumbotrons, and alerts. Additionally, it covers various classes and components available in Bootstrap for creating responsive and visually appealing web pages.

Uploaded by

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

CA-104 (B)

Web Programing
Bootstrap
Husain Dawoodi
System Analyst
UGC Computer Center, School of Computer Sciences
Responsive Web Design
• Responsive web design is about creating web pages that
look good on all devices!
• A responsive web design will automatically adjust for
different screen sizes and viewports.
• Responsive web design automatically adjust themselves to
look good on all devices, from small phones to large
desktop.
• Bootstrap is the most popular HTML, CSS, and JavaScript
framework for developing responsive, mobile-first
Overview of websites.
• Bootstrap is a free front-end framework for faster and
Bootstrap easier web development
• Bootstrap also gives you the ability to easily create
responsive designs
• Easy to use: Anybody with just basic knowledge of HTML
and CSS can start using Bootstrap
• Responsive features: Bootstrap's responsive CSS adjusts to
phones, tablets, and desktops

Why Use • Mobile-first approach: In Bootstrap, mobile-first styles are


part of the core framework
Bootstrap • Browser compatibility: Bootstrap is compatible with all
modern browsers (Chrome, Firefox, Internet Explorer 10+,
Edge, Safari, and Opera)
• There are two ways to start using Bootstrap on your own
web site.
• Include Bootstrap from a CDN (Content Delivery
Network).
• Download Bootstrap

Getting • One advantage of using the Bootstrap CDN:


• Many users already have downloaded Bootstrap from
Started CDN when visiting another site. As a result, it will be
loaded from cache when they visit your site, which
leads to faster loading time. Also, most CDN's will
make sure that once a user requests a file from it, it
will be served from the server closest to them, which
also leads to faster loading time.
1. Add the HTML5 doctype

• <!DOCTYPE html>

2. Bootstrap is mobile-first

• Bootstrap is designed to be responsive to mobile devices.


Mobile-first styles are part of the core framework.
• To ensure proper rendering and touch zooming, add the following
<meta> tag inside the <head> element:
• <meta name="viewport" content="width=device-width,

First Web initial-scale=1">


• The width=device-width part sets the width of the page to follow
the screen-width of the device (which will vary depending on the

Page device).
• The initial-scale=1 part sets the initial zoom level when the page is
first loaded by the browser.

3. Containers

• Bootstrap also requires a containing element to wrap site contents.


• There are two container classes to choose from:
• The .container class provides a responsive fixed width container
• The .container-fluid class provides a full width container, spanning
the entire width of the viewport
.Container Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
.Container-Fluid Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Bootstrap Containers

• Containers are used to pad the


content inside of them, and there
are two container classes available:
• The .container class provides a
responsive fixed width
container
• The .container-fluid class
provides a full width container,
spanning the entire width of
the viewport (width is always
100%).
• Container Padding: By default,
containers have 15px left and right
padding, with no top or bottom
padding.
• The .container-sm|md|lg|xl classes creates responsive
containers.

Responsive • The max-width of the container will change on different


screen sizes/viewports

Containers <div class="container-sm">.container-sm</div>


<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
• Bootstrap's grid system is built with flexbox and allows up to 12
columns across the page.
• If you do not want to use all 12 columns individually, you can
group the columns together to create wider columns
Bootstrap Grid • The grid system is responsive, and the columns will re-arrange
automatically depending on the screen size.
System • Make sure that the sum adds up to 12 or fewer (it is not
required that you use all 12 available columns).
• The Bootstrap grid system has five classes:
.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater
than 576px)
.col-md- (medium devices - screen width equal to or
greater than 768px)
Grid Classes .col-lg- (large devices - screen width equal to or greater
than 992px)
.col-xl- (xlarge devices - screen width equal to or greater
than 1200px)
• The classes above can be combined to create more
dynamic and flexible layouts.
Basic Structure of a Bootstrap
Grid
create a row (<div class="row">).

1. Then, add the desired number of columns (tags with appropriate


.col-*-* classes).
• The first star (*) represents the responsiveness: sm, md, lg or xl
• The second star represents a number, which should add up to 12 for each row.

2. Instead of adding a number to each col, let bootstrap handle the


layout, to create equal width columns:
• two "col" elements = 50% width to each col.
• three cols = 33.33% width to each col.
• four cols = 25% width, etc.
• You can also use .col-sm|md|lg|xl to make the columns responsive.
Basic Structure of a Bootstrap
Grid (Contd..)
• Three Equal Columns
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
• Responsive Columns
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
• Two Unequal Responsive Columns
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Bootstrap Typography
• Bootstrap Default Settings:
• Bootstrap uses a default font-size of 16px, and its
line-height is 1.5.
• The default font-family is "Helvetica Neue", Helvetica,
Arial, sans-serif.
• In addition, all <p> elements have margin-top: 0 and
margin-bottom: 1rem (16px by default).
• Display headings are used to stand out more than
normal headings (larger font-size and lighter
font-weight), and there are four classes to choose
from: .display-1, .display-2, .display-3, .display-4
• .font-weight-bold : Bold text
• .font-weight-bolder: Bolder text
• .font-italic: Italic text
• .font-weight-light: Light weight text
• .font-weight-lighter: Lighter weight text
Bootstrap • .font-weight-normal: Normal text
• .lead: Makes a paragraph stand out
Typography • .small: Indicates smaller text (set to 80% of the size of the parent)

(Contd..) • .text-left: Indicates left-aligned text


• .text-*-left: Indicates left-aligned text on small, medium, large or xlarge screens
• .text-center: Indicates center-aligned text
• .text-*-center: Indicates center-aligned text on small, medium, large or xlarge screens
• .text-decoration-none: Removes the underline from a link
• .text-right: Indicates right-aligned text
• .text-*-right: Indicates right-aligned text on small, medium, large or xlarge screens a
• .text-justify: Indicates justified text
• .text-monospace: Monospaced text
• .text-break: Prevents long text from breaking layout
• .text-nowrap: Indicates no wrap text
• .text-lowercase: Indicates lowercased text
• .text-reset: Resets the color of a text or a link (inherits the
color from its parent)
Bootstrap • .text-uppercase: Indicates uppercased text
Typography • .text-capitalize: Indicates capitalized text

(Contd..) • .initialism: Displays the text inside an <abbr> element in a


slightly smaller font size
• .list-unstyled: Removes the default list-style and left margin on
list items (works on both <ul> and <ol>). This class only applies
to immediate children list items
• .list-inline: Places all list items on a single line (used together
with .list-inline-item on each <li> elements)
• .pre-scrollable: Makes a <pre> element scrollable
Bootstrap Typography (Contd..)

Text Colors: The classes for text colors are:


.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
.text-secondary
.text-white
.text-dark,
.text-body (default body color/often black)
.text-light.
Bootstrap Typography (Contd..)
Background Colors: The classes for background colors are: .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark
and .bg-light.
Bootstrap Tables

• A basic Bootstrap table has a light


padding and horizontal dividers.
• Basic Table: The .table class adds
basic styling to a table
• Striped Rows: The .table-striped
class adds zebra-stripes to a table
• Bordered Table: The
.table-bordered class adds borders
on all sides of the table and cells
• Hover Rows: The .table-hover
class adds a hover effect (grey
background color) on table rows
Bootstrap Tables (Contd…)

• Black/Dark Table: The .table-dark


class adds a black background to
the table
• Dark Striped Table: Combine
.table-dark and .table-striped to
create a dark, striped table
• Hoverable Dark Table: The
.table-hover class adds a hover
effect (grey background color) on
table rows
• Borderless Table: The
.table-borderless class removes
borders from the table
Bootstrap Tables (Contd…)

Contextual Classes: Contextual classes can be used to color the whole


table (<table>), the table rows (<tr>) or table cells (<td>).
• .table-primary => Blue: Indicates an important action
• .table-success => Green: Indicates a successful or positive
action
• .table-danger => Red: Indicates a dangerous or potentially
negative action
• .table-info => Light blue: Indicates a neutral informative
change or action
• .table-warning => Orange: Indicates a warning that might
need attention
• .table-active => Grey: Applies the hover color to the table
row or table cell
• .table-secondary => Grey: Indicates a slightly less important
action
• .table-light => Light grey table or table row background
• .table-dark => Dark grey table or table row background
Bootstrap Tables
(Contd…)
• Table Head Colors: The .thead-dark
class adds a black background to table
headers, and the .thead-light class adds
a grey background to table headers
• Small table: The .table-sm class makes
the table smaller by cutting cell padding
in half
• Responsive Tables: The
.table-responsive class adds a scrollbar
to the table when needed (when it is
too big horizontally)
• Bootstrap Image Shapes:
• Rounded Corners: The .rounded class adds rounded corners
to an image
Bootstrap Images • Circle: The .rounded-circle class shapes the image to a circle
• Thumbnail: The .img-thumbnail class shapes the image to a
thumbnail (bordered)
Bootstrap Tables (Contd…)
• Aligning Images: Float an image to the right with the
.float-right class or to the left with .float-left
• Centered Image: Center an image by adding the utility
classes .mx-auto (margin:auto) and .d-block
(display:block) to the image
<img src="paris.jpg" class="mx-auto d-block">

• Responsive Images:
• Images come in all sizes. So do screens.
Responsive images automatically adjust to fit the
size of the screen.
• Create responsive images by adding an .img-fluid
class to the <img> tag. The image will then scale
nicely to the parent element.
• The .img-fluid class applies max-width: 100%; and
height: auto; to the image:
<img class="img-fluid" src="img_chania.jpg" alt="Chania">
• A jumbotron indicates a big grey box for calling extra attention to some special content or
information
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>

Bootstrap • Full-width Jumbotron: If you want a full-width jumbotron without rounded borders, add the
.jumbotron-fluid class and a .container or .container-fluid inside of it
<div class="jumbotron jumbotron-fluid">
Jumbotron <div class="container">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>
</div>
Bootstrap Wells (v. 3)

• The .well class adds a rounded border


around an element with a gray background
color and some padding
• Can Change the size of the well by adding
the .well-sm class for small wells or .well-lg
class for large wells
• Bootstrap provides an easy way to create predefined alert
messages
• Alerts are created with the .alert class
Bootstrap Alerts • Followed by one of the four contextual classes
• .alert-success
• .alert-info
• .alert-warning
• .alert-danger
Bootstrap Alerts • Alert Links: Add the alert-link class to any
links inside the alert box to create "matching
(Contd..) colored links"
• Closing Alerts: To close the alert message, add a .alert-dismissible class to
the alert container. Then add class="close" and data-dismiss="alert" to a
link or a button element (when you click on this the alert box will
disappear)
<div class="alert alert-success alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Success!</strong> Indicates a successful or positive action.

Bootstrap </div>

Alerts
(Contd..)
Bootstrap Buttons
• The .btn classes can be used on <a>, <button>, or <input> elements
• <button type="button" class="btn">Basic</button>
<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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
Bootstrap Buttons (Contd..)
• <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-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
Bootstrap Buttons (Contd..)
• Button Sizes: Use the .btn-lg class for large buttons or .btn-sm class for
small buttons
• Block Level Buttons: Add class .btn-block to create a block level button
that spans the entire width of the parent element.
• Active/Disabled Buttons: A button can be set to an active (appear
pressed) or a disabled (unclickable) state. The class .active makes a
button appear pressed, and the disabled attribute makes a button
unclickable.
• Spinner Buttons:
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
Bootstrap Button Groups
• Bootstrap allows you to group a series of buttons
together (on a single line) in a button group.
• Use a <div> element with class .btn-group|-lg|-sm to
create a button group.
<div class="btn-group">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn
btn-primary">Samsung</button>
<button type="button" class="btn
btn-primary">Sony</button>
</div>
• Vertical Button Groups: Use the class
.btn-group-vertical to create a vertical button group
Bootstrap Badges
• Badges are used to add additional information to any content.
• Use the .badge class together with a contextual class (like
.badge-secondary) within <span> elements to create
rectangular badges
<h1>Example heading <span class="badge
badge-secondary">New</span></h1>
• Contextual Badges: Use any of the contextual classes (.badge-*)
to change the color of a badge
<span class="badge badge-primary">Primary</span>
• Pill Badges: Use the .badge-pill class to make the badges more
round
<span class="badge badge-pill
badge-primary">Primary</span>
• Badge inside an Element:
<button type="button" class="btn btn-primary">
Messages <span class="badge badge-light">4</span>
</button>
Bootstrap Progress Bars
• Basic Progress Bar: To create a default progress bar, add a .progress class to a container element and add the .progress-bar class to its child
element.
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>

• Progress Bar Labels:


<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>

• Colored Progress Bars:


<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div>

• Striped Progress Bars: Use the .progress-bar-striped class to add stripes to the progress bars
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

• Animated Progress Bar: Add the .progress-bar-animated class to animate the progress bar
<div class="progress-bar progress-bar-striped progress-bar-animated"style="width:40%"></div>
Bootstrap Progress Bars (Contd..)
• Multiple Progress Bars: Progress bars can also be stacked
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
• Basic Pagination : To create a basic pagination, add the .pagination class to an <ul> element.
Then add the .page-item to each <li> element and a .page-link class to each link inside <li>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
• Pagination Sizing : Add class .pagination-lg for larger blocks or .pagination-sm for smaller

Bootstrap blocks
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
Pagination <li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
• Pagination Alignment : To change the alignment of the pagination
<ul class="pagination justify-content-center" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<ul class="pagination justify-content-end" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
Bootstrap List Groups
• To create a basic list group, use an <ul> element with class .list-group, and <li> elements
with class .list-group-item
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
• List Group With Linked Items: To create a list group with linked items, use <div> instead
of <ul> and <a> instead of <li>. Optionally, add the .list-group-item-action class if you
want a grey background color on hover
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">First item</a>
<a href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
• Horizontal List Groups: Add the .list-group-horizontal class to .list-group to display items
horizontally
• Contextual Classes: .list-group-item-success, list-group-item-secondary,
list-group-item-info, list-group-item-warning, .list-group-item-danger,
.list-group-item-primary, list-group-item-dark and list-group-item-light
Bootstrap Dropdowns
• A dropdown menu is a toggleable menu that allows the
user to choose one value from a predefined list
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
• Dropdown Divider: .dropdown-divider class is used to
separate links inside the dropdown menu with a thin
horizontal border
• Dropdown Header: .dropdown-header class is used to
add headers inside the dropdown menu
• Dropdown Position: You can also create a "dropright"
or "dropleft" menu, by adding the .dropright or
.dropleft class to the dropdown element
• Dropup: you want the dropdown menu to expand
upwards instead of downwards, change the <div>
element with class="dropdown" to "dropup"
Bootstrap Collapse
• Basic Collapsible: Collapsible are useful when you want to hide and show large amount
of content
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
• By default, the collapsible content is hidden. However, you can add the .show class to
show the content by default
Bootstrap Navigation Bar
• A navigation bar is a navigation header that is placed at the top of the page
• With Bootstrap, a navigation bar can extend or collapse, depending on the screen size
• A standard navigation bar is created with the .navbar class, followed by a responsive collapsing
class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or
small screens)
• To add links inside the navbar, use a <ul> element with class="navbar-nav". Then add <li>
elements with a .nav-item class followed by an <a> element with a .nav-link class
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
• Vertical Navbar: Remove the .navbar-expand-xl|lg|md|sm class to create a vertical navigation
bar
• Centered Navbar: Add the .justify-content-center class to center the navigation bar
Bootstrap Tabs
• Tabs are created with <ul class="nav nav-tabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
• Pills are created with <ul class="nav nav-pills">. Also
mark the current page with <li class="active">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>

Bootstrap Pills
Bootstrap Forms
• Bootstrap Form Layouts: Bootstrap provides two types of form
layouts:
• Stacked (full-width) form
• Inline form (Add class .form-inline to the <form> element)
Bootstrap Form
Inputs
• Bootstrap supports the following form controls:
• input
• textarea
• checkbox
• radio
• select
• Use the .form-control class to style inputs with full-width and proper
padding
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Bootstrap Form Inputs (Contd..)
• Bootstrap Checkboxes:
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
• Use the .form-check-inline class if you want the checkboxes to appear on the
same line
Bootstrap Form Inputs (Contd..)
• Bootstrap Radio Buttons:
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
• Use the .form-check-inline class if you want the radio buttons to appear on the
same line
• Bootstrap Select List:
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>

Bootstrap <option>4</option>
</select>
</div>
Form Inputs
(Contd..)
• Form Control File and Range: Add the .form-control-range
class to input type"range" or .form-control-file to input
type"file" to style a range control or a file field with full-width
<input type="range" class="form-control-range">
<input type="file" class="form-control-file border">
Bootstrap
Form Inputs
(Contd..)

You might also like