Scribd
Upload
8 views65 pages

Bootstrap

Uploaded by

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

Bootstrap

Uploaded by

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

Bootstrap

• Bootstrap is the most popular HTML, CSS, and


JavaScript framework for developing
responsive, mobile-first websites.
• Bootstrap is completely free to download and
use!
What is Bootstrap?
• Bootstrap is a free front-end framework for
faster and easier web development
• Bootstrap includes HTML and CSS based
design templates for typography, forms,
buttons, tables, navigation, modals, image
carousels and many other, as well as optional
JavaScript plugins
• Bootstrap also gives you the ability to easily
create responsive designs
What is Responsive Web Design?
• Responsive web design is about creating web
sites which automatically adjust themselves to
look good on all devices, from small phones to
large desktops.

• Bootstrap was developed by Mark Otto and


Jacob Thornton at Twitter, and released as an
open source product in August 2011 on GitHub.
• In June 2014 Bootstrap was the No.1 project on
GitHub!
Why Use Bootstrap?
• Easy to use: Anybody with just basic knowledge
of HTML and CSS can start using Bootstrap
• Responsive features: Bootstrap's responsive
CSS adjusts to phones, tablets, and desktops
• Mobile-first approach: In Bootstrap 3, mobile-
first styles are part of the core framework
• Browser compatibility: Bootstrap is compatible
with all modern browsers (Chrome, Firefox,
Internet Explorer, Edge, Safari, and Opera)
• 1. Add the HTML5 doctype
• Bootstrap 5 uses HTML elements and CSS
properties that require the HTML5 doctype.
• Always include the HTML5 doctype at the
beginning of the page, along with the lang
attribute and the correct title and character set:
– <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
</head>
</html>
• 2.Bootstrap 5 is mobile-first
• Bootstrap 5 is designed to be responsive to mobile
devices. Mobile-first styles are part of the core
framework.
• To ensure proper rendering and touch zooming,
add the following <meta> tag inside
the <head> element:
– <meta name="viewport" content="width=device-
width, initial-scale=1">
• The width=device-width part sets the width of the
page to follow the screen-width of the device
(which will vary depending on the device).
• The initial-scale=1 part sets the initial zoom level
• 3. Containers
• Bootstrap 5 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
Bootstrap 5 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
• Container Padding
• By default, containers have left and right
padding, with no top or bottom padding.
Therefore, we often use spacing utilities, such
as extra padding and margins to make them
look even better. For example, .pt-5 means
"add a large top padding":
• Example
– <div class="container pt-5"></div>
Container Border and Color
• Other utilities, such as borders and colors, are
also often used together with containers:
• Example
– <div class="container p-5 my-5 border"></div>

<div class="container p-5 my-5 bg-dark text-


white"></div>

<div class="container p-5 my-5 bg-primary text-


white"></div>
Responsive Containers
• You can also use the .container-sm|md|lg|
xl classes to determine when the container
should be responsive.
• The max-width of the container will change on
different screen sizes/viewports.
• Example
– <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>
<div class="container-xxl">.container-xxl</div>
Bootstrap 5 Grids
Bootstrap 5 Grid System
• 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
• The grid system is responsive, and the columns
will re-arrange automatically depending on the
screen size.
• Make sure that the sum adds up to 12 or fewer
(it is not required that you use all 12 available
columns).
Grid Classes
• The Bootstrap 5 grid system has six 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)
– .col-lg- (large devices - screen width equal to or greater
than 992px)
– .col-xl- (xlarge devices - screen width equal to or greater
than 1200px)
– .col-xxl- (xxlarge devices - screen width equal to or greater
than 1400px)
• The classes above can be combined to create more
dynamic and flexible layouts.
Three Equal Columns
<div class="container-fluid mt-3">
<h1>Three equal width columns</h1>
<div class="row">
<div class="col p-3 bg-primary
text-white">.col</div>
<div class="col p-3 bg-dark text-white">.col</div>
<div class="col p-3 bg-primary
text-white">.col</div>
</div>
</div>
Responsive Columns
• The following example shows how to create four
equal-width columns starting at tablets and scaling
to extra large desktops. On mobile phones or
screens that are less than 576px wide, the columns
will automatically stack on top of each other:
• Example
• <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
• The following example shows how to get two
various-width columns starting at tablets and
scaling to large extra desktops:
• Example
• <div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Bootstrap 5 Images
Rounded Corners
• The .rounded class adds rounded corners to
an image:
– <img src="cinqueterre.jpg" class="rounded"
alt="Cinque Terre" width="304" height="236">
Circle
• The .rounded-circle class shapes the image to
a circle:
– <img src="cinqueterre.jpg" class="rounded-
circle" alt="Cinque Terre"width="304"
height="236">
Thumbnail
• The .img-thumbnail class shapes the image to
a thumbnail (bordered):
– <img src="cinqueterre.jpg" class="img-
thumbnail" alt="Cinque Terre">
Aligning Images
• Float an image to the left with the .float-
start class or to the right with .float-end:
– <img src="paris.jpg" class="float-start">
<img src="paris.jpg" class="float-end">
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="ny.jpg" alt="New York">
Bootstrap 5 Buttons
• Bootstrap 5 provides different styles of
buttons:
– Basic
– Primary
– Secondary
– Success
– Info
– Warning
– Danger
– Dark
– Light
– Link
Example
• <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>
The button classes can be used on <a>, <button>,
or <input> elements:
• <a href="#" class="btn btn-success">Link
Button</a>
• <button type="button" class="btn btn-
success">Button</button>
• <input type="button" class="btn btn-
success" value="Input Button">
• <input type="submit" class="btn btn-
success" value="Submit Button">
• <input type="reset" class="btn btn-
success" value="Reset Button">
Button Outline
• Bootstrap 5 also provides eight outline/bordered buttons.
• Move the mouse over them to see an additional "hover" effect:
• Primary, Secondary, Success, Info, Warning, Danger, Dark, Light
• Example
• <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 Sizes
• Use the .btn-lg class for large buttons or .btn-
sm class for small buttons:
• Large, Default, Small
• Example
• <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>
Button Groups
• Bootstrap 5 allows you to group a series of buttons together
(on a single line) in a button group:
• AppleSamsungSony
• Use a <div> element with class .btn-group to create a button
group:
• Example
– <div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn
btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
• Instead of applying button sizes to every button in a group,
use class .btn-group-lg for a large button group or the .btn-
group-sm for a small button group:
Vertical Button Groups
• Bootstrap 5 also supports vertical button groups:
• Use the class .btn-group-vertical to create a
vertical button group:
• Example
• <div class="btn-group-vertical">
<button type="button" class="btn btn-
primary">Apple</button>
<button type="button" class="btn btn-
primary">Samsung</button>
<button type="button" class="btn btn-
primary">Sony</button>
</div>
• Example
– <div class="btn-group">
<button type="button" class="btn btn-
primary">Apple</button>
<button type="button" class="btn btn-
primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary
dropdown-toggle" data-bs-toggle="dropdown">Sony</b
utton>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Bootstrap 5 Pagination
• If you have a web site with lots of pages, you may wish to
add some sort of pagination to each page.
• To create a basic pagination, add the .pagination class to
an <ul> element.
• Then add the .page-item to each <li> element and a .page-
link class to each link inside <li>:
• Example
– <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>
Active State
• The .active class is used to "highlight" the current page:
• Example
– <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 active"><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>
Disabled State
• The .disabled class is used for un-clickable links:
– <ul class="pagination">
<li class="page-item disabled"><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>
Breadcrumbs
• Another form for pagination, is breadcrumbs:
– Photos
– Summer 2017
– Italy
– Rome
• The .breadcrumb and .breadcrumb-item classes indicates
the current page's location within a navigational hierarchy:
• Example
– <ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Photos</a></li>
<li class="breadcrumb-item"><a href="#">Summer
2017</a></li>
<li class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>
Bootstrap 5 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-bs-toggle="dropdown">Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1 </a></li>
<li><a class="dropdown-item" href="#">Link 2 </a></li>
<li><a class="dropdown-item" href="#">Link 3 </a></li>
</ul>
</div>
Dropdown Divider
• The .dropdown-divider class is used to separate links
inside the dropdown menu with a thin horizontal border:
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Another
link</a></li>
</ul>
Dropdown Position
• You can also create a "dropend" or "dropstart"
menu, by adding the .dropend or .dropstart class
to the dropdown element.
• Note that the caret/arrow is added automatically:
• Dropright
– <div class="dropdown dropend">
• Dropleft
– <div class="dropdown dropstart">
Collapse
• Basic Collapsible
• Collapsibles are useful when you want to hide
and show large amount of content:

– <button data-bs-toggle="collapse" data-bs-


target="#demo">Collapsible</button>

<div id="demo" class="collapse">


Beeja Academy is a best ....
</div>
• By default, the collapsible content is hidden.
• However, you can add the .show class to show
the content by default:
• Example
• <div id="demo" class="collapse show">
Navbars
• 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-xxl|xl|lg|md|
sm (stacks the navbar vertically on xxlarge, extra
large, large, medium or small screens).
• To add links inside the navbar, use either
an <ul> element (or a <div>) with class="navbar-
nav". Then add <li> elements with a .nav-
item class followed by an <a> element with
a .nav-link class
<nav class="navbar navbar-expand-sm bg-light">

<div class="container-fluid">
<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>
</div>
Vertical Navbar
• Remove the .navbar-expand-* class to create a
navigation bar that will always be vertical:
• Example
– <!-- A grey vertical navbar -->
<nav class="navbar bg-light">
...
</nav>
Centered Navbar
• Add the .justify-content-center class to center
the navigation bar:
• Example
• <nav class="navbar navbar-expand-sm bg-light
justify-content-center">
...
</nav>
Colored Navbar
• Use any of the .bg-color classes to change the
background color of the navbar (.bg-primary, .bg-
success, .bg-info, .bg-warning, .bg-danger, .bg-
secondary, .bg-dark and .bg-light)
• Tip: Add a white text color to all links in the
navbar with the .navbar-dark class, or use
the .navbar-light class to add a black text color.
• <nav class="navbar navbar-expand-sm bg-light
navbar-light">
Forms
• All textual <input> and <textarea> elements
with class .form-control get proper form
styling
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="email" class="form-label">Email:</label>
<input type="email" class="form-
control" id="email" placeholder="Enter email" name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-
control" id="pwd" placeholder="Enter password" name="pswd">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-
input" type="checkbox“ name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit
</button>
</form>
Form Row/Grid (Inline Forms)
• If you want your form elements to appear side by side,
use .row and .col:
• <form>
<div class="row">
<div class="col">
<input type="text" class="form-
control" placeholder="Enter email" name="email">
</div>
<div class="col">
<input type="password" class="form-
control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Disabled and Readonly
• Use the disabled and/or readonly attributes to
disable the input field:
• Example
• <input type="text" class="form-
control" placeholder="Normal input">
<input type="text" class="form-
control" placeholder="Disabled
input" disabled>
<input type="text" class="form-
control" placeholder="Readonly
input" readonly>
Color Picker
• To style an input with type="color" properly,
use the .form-control-color class:
• Example
• <input type="color" class="form-control form-
control-color" value="#CCCCCC">
• The .input-group class is a container to enhance an
input by adding an icon, text or a button in front or
behind the input field as a "help text".
• To style the specified help text, use the .input-group-
text class:
– <form>
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-
control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-
control" placeholder="Your Email">
<span class="input-group-text">@example.com</span>
</div>
Checkboxes
• Checkboxes are used if you want the user to
select any number of options from a list of preset
options.
• Example
– <div class="form-check">
<input class="form-check-
input" type="checkbox" id="check1" name="option1"
value="something" checked>
<label class="form-check-label">Option 1</label>
</div>
Radio buttons
• Radio buttons are used if you want to limit the user to just
one selection from a list of preset options.
– <div class="form-check">
<input type="radio" class="form-check-
input" id="radio1" name="optradio" value="option1" checked>Opti
on 1
<label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
<input type="radio" class="form-check-
input" id="radio2" name="optradio" value="option2">Option 2
<label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" disabled>Option 3
<label class="form-check-label"></label>
</div>
Custom Range
• To style a range menu, add the .form-range class to
the input element with type="range":
• Example
– <label for="customRange" class="form-label">Custom
range</label>
<input type="range" class="form-
range" id="customRange">
Tables
• A basic Bootstrap 5 table has a light padding and
horizontal dividers.
• The .table class adds basic styling to a table
<div class="container mt-3">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and
horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
• 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
• 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
Class Description
.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

You might also like