Bootstrap

Bootstrap
• Bootstrap is a free front-end framework for faster and easier web

development
• Bootstrap includes HTML and CSS based design templates for typography,
forms, buttons, tables, navigation, modals, image carousels and many other,
as well as optional JavaScript plugins.
• Bootstrap also gives you the ability to easily create responsive designs
What is Responsive Web Design?
Responsive web design is about creating web sites which automatically

adjust themselves to look good on all devices, from small phones to large
desktops.
Why Use Bootstrap?
Advantages of 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, mobile-first styles are part of the core
framework
• Browser compatibility: Bootstrap 4 is compatible with all modern browsers
(Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera).
Where to Get Bootstrap 4?

There are two ways to start using Bootstrap 4 on your own web site.
• Include Bootstrap 4 from a CDN
• Download Bootstrap 4 from getbootstrap.com
• Include Bootstrap 4 from a CDN

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


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


<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
• Download Bootstrap 4 from getbootstrap.com
Create Web Page with Bootstrap
1. Add the HTML 5 doctype:
Bootstrap uses HTML elements and CSS properties, so you have to add
the HTML 4 doctype at the beginning of the page with lang attribute
and correct character set.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 4 is mobile-first:
• Bootstrap 4 is designed to be responsive to mobile devices. Mobile-first
styles are part of the core framework.
• To ensure proper rendering and touch zooming, add the
following <meta> tag inside the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1">
• The width=device-width part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device).
• The initial-scale=1 part sets the initial zoom level when the page is
first loaded by the browser.
3. Containers:
There are two container classes :
1. The .container class provides a responsive fixed width
container
2. The .container-fluid class provides a full width container,
spanning the entire width of the viewport
Container
In Bootstrap, container is used to set the content's margins dealing
with the responsive behaviors of your layout. Containers are used to
pad the content inside of them
Container class is used to create boxed content.
There are two container classes in Bootstrap:
1.The .container class provides a responsive fixed width container
2.The .container-fluid class provides a full width container, spanning
the entire width of the viewport
Container Container-fluid
• Fixed Container
Use the .container class to create a responsive, fixed-width container.
Note that its width (max-width) will change on different screen sizes:
Max-Width
Extra Large(>=1200) 1140px (.container.xl)
Large(>=992) 960px (.container.lg)
Medium(>=768) 720px (.container.md)
Small(>=576) 540px (.container.sm)
Extra Small(<576) 100% (Auto)

<!doctype html>
<html lang="en">
<head>
<title>Title</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/
css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/
1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container" style="border: 2px solid black;">
Welcome to edubridge
</div>

</body>
</html>
Fluid Container
Use the .container-fluid class to create a full width container, that will
always span the entire width of the screen (width is always 100%):
<body>
<div class="container-fluid" style="border: 2px solid black;">
</div>

Container Padding
By default, containers have 15px 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-
3 means "add a top padding of 16px":
<body>
<div class="container pt-3" style="border: 2px solid black;">
</div>
</body>
//It will add top and bottom padding of 16px.

<div class="container p-3 my-3 border">
Bootstrap 4 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:
span1 span1 span1 span1 span1 span1 span1 span1 span1 span1 span1 span1
span 4 span 4 span 4
span 4 span 8
Span 6 Span 6
Span 12
The grid system is responsive, and the columns will re-arrange automatically depending on
the screen size.
Bootstrap 4 Text/Typography
• Bootstrap 4 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
• 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
<body>
<div class="container">
<h1>Display headings</h1>
<h1 class="display-1">display 1</h1>
</div>
</body>
<small>
• In Bootstrap 4 the HTML <small> element is used to create a lighter,
secondary text in any heading:
<body>
<p>In Bootstrap 4 the HTML <small> element is used to create a lighter, secondary text in any
heading:
</p>
<h1>h1 heading <small>secondary text</small></h1>
</div>
</body>
Grid Classes
The Bootstrap 4 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)
• .col-lg- (large devices - screen width equal to or greater than 992px)
• .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
<div class="row">
<div class="col">.col</div>
</div>
.col .col .col

<div class="row">
<div class="col-sm-3">.col-sm-3</div>
</div>
.col-sm-3 .col-sm-3 .col-sm-3
On mobile phones or screens that are less than 576px wide, the
columns will automatically stack on top of each other:
Offsetting Columns
• Move columns to the right using .col-md-offset-* classes. These classes
increase the left margin of a column by * columns:

<body>
<div class="container" style="border: 2px solid red;" >
<div class="row">
<div class="col-5 offset-md-3" style="background-
color: deeppink;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atq
ue asperiores molestias sequi animi veniam assumenda odit ut, repellat, est do
loribus velit. Commodi consequuntur distinctio ipsam excepturi molestiae nam
quod laborum?</div>
<div class="col-2 offset-md-2" style="background-
color: aqua;"> hello bootstrap</div>
</div>
</div>
</body>
Bootstrap 4 Jumbotron
• A jumbotron indicates a big grey box for calling extra attention to some special content or
information.
• Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap
elements/classes.
• Use a <div> element with class .jumbotron to create a jumbotron:
1.Jumbotron inside the container:

<body>
<div class="container" >
<div class="jumbotron">
<h1>This is jumbotron</h1>

<p>A jumbotron indicates a big grey box for calling extra attention to some spec
ial content or information.</p>
</div>
</div>
</body>
The Inside container is used in jumbotron, if you want the
jumbotron to not extend to the edge of the screen.
2.Jumbotron Outside Container
• It is used when you want the jumbotron to extend to the screen edges.
• Put the jumbotron outside the <div class="container">.
<body>
<div class="jumbotron">
<h2>Jumbotron outside the container</h2>
<p>A jumbotron indicates a big grey box for calling extra attention
to some special content or information.</p>
</div>
<div class="container" style=“border:2px solid black;”>
<h1>This is container</h1>
<p>A jumbotron indicates a big grey box for calling extra attentio
n to some special content or information.</p>
</div>
</body>
3.Full-width Jumbotron
• To get a jumbotron without rounded borders, you have to add
the .jumbotron-fluid class and a .container or .container-fluid inside
it.
<body>
<div class="jumbotron jumbotron-fluid" >
<div class="container" style="border: 2px solid black;">
<h2>Jumbotron outside the container</h2>

<p>A jumbotron indicates a big grey box for calling extra attention to s
ome special content or information.</p>

</div>
</div>
</body>
Bootstrap 4 Alerts
Bootstrap 4 provides an easy way to create predefined alert messages:
Alerts are created with the .alert class, followed by one of the
contextual classes .alert-success, .alert-info, .alert-warning, .alert-
danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark:
<body>
<div class="alert alert-warning">
<strong>Waring </strong> Indicates warning that might need att
ension
</div>
</div>
</body>
 Closing Alerts
• If you want to close the alert message, you have to add an .alert-
dismissable class to the alert container. Then add class="close" and data-
dismiss="alert" to a link or a button element (when you click on the close
sign, the alert box will be closed.)
<body>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</
button>
<strong>Success!</
strong> This alert box could indicate a successful or positive action.
</div>
</div>
</body>
jjjjjNote: × (×) is an HTML entity that is the preferred icon for close
buttons, rather than the letter "x".
 Animated Alerts
• You can use .fade and .show classes to add a fading effect when closing
the alert message.
<body>
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="close" data-
dismiss="alert">×</button>
<Strong>Success </Strong> is used to send success message
</div>
</div>
</body>
Bootstrap 4 Buttons
 Button Styles
• Bootstrap 4 provides different styles of buttons:
• Basic
Primary Secondary Success Info warning Danger
Dark Light Link
The button classes can be used on <a>, <button>, or <input> elements:

<body>
<h3>Bootstrap 4 Buttons</h3>
<a href="Demo1.html“ class="btn btn-primary" role="button">Click Me</a>
<button type="button" class="btn btn-basic">Button</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>
<input type="sumbit“ class="btn btn-dark" value="Dark"></button>
<input type="button" class="btn btn-light" value="Light">
<button type="button" class="btn btn-link" >Link</button>
</div>
</body>
 Button Sizes
• Use the .btn-lg class for large buttons or .btn-sm class for small buttons:
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-success" >Success</button>
<button type="button" class="btn btn-warning btn-sm">Warning</button>
</div>
 Block Level Buttons

• Add class .btn-block to create a block level button that spans the
entire width of the parent element.
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
 Active/Disabled Buttons
• A button can be set to an active (appear pressed) or a disabled
(unclickable) state:
The class .active makes a button appear pressed, and
the disabled attribute makes a button unclickable. Note that <a>
elements do not support the disabled attribute and must therefore use
the .disabled class to make it visually appear disabled.
<button type="button" class="btn btn-success active">Active</button>
<a href="Demo1.html" class="btn btn-secondary disabled" role="button">Disabled</a>
<a href="Demo1.html" class="btn btn-secondary active" role="button">Disabled</a>
</div>
 Button Groups
• Bootstrap 4 allows you to group a series of buttons together (on a
single line) in a button group:
• Use a <div> element with class .btn-group to create a button group:
<div class="btn-group">
<button type="button" class="btn-primary">Save</button>
<button type="button" class="btn-primary">Update</button>
<button type="button" class="btn-primary">Delete</button>
</div>
</div>
Save Update Delete

 Vertical Button Groups
• Bootstrap 4 also supports vertical button groups:
• Use the class .btn-group-vertical to create a vertical button group:
<div class="btn-group-vertical " >
<button type="button" class="btn-primary">Delete</button>
</div>
</div>
 Nesting Button Groups & Dropdown Menus
• Nest button groups to create dropdown menus.
<div class="btn-group ">
<button type="button" class="btn btn-primary dropdown-
toggle" data-toggle="dropdown">Select</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="Demo1.html">Demo1</a>
<a class="dropdown-item" href="#">Tablet</a>
</div>
</div>
</div>
 Split Button Dropdowns
<div class="btn-group">
<button type="button" class="btn btn-primary">Select</button>
<button type="button" class="btn btn-primary dropdown-
toggle dropdown-toggle-split" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Home</a>
<a class="dropdown-item" href="Demo1.html">Demo1</a>
</div>
</div>
</div>
Bootstrap 4 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-
primary">Welcome to Edubridge</span></h1>
<p>Example heading <span class="badge badge-
secondary">New</span></p>
</div>

Pill Badges
Primary S
Use the .badge-pill class to make the badges more round:
<h1>Example heading <span class="badge badge-primary badge-
pill">Welcome to Edubridge</span></h1>
<p>Example heading <span class="badge badge-secondary">New</
span></p>
</div>
 Badge inside an Element
• An example of using a badge inside a button:
<button class="btn btn-primary">Select
<span class="badge badge-light ">(Home Page)</span>
</button>
</div>
• Bootstrap 4 Progress Bars
 Basic Progress Bar
• A progress bar can be used to show a user how far along user is in a
process.
To create a default progress bar, add a .progress class to a container

element and add the .progress-bar class to its child element. Use the
CSS width property to set the width of the progress bar:
<div class="progress">
<div class="progress-bar" style="width: 60%;"></div>
</div>
</div>
 Progress Bar Labels
• Add text inside the progress bar to show the visible percentage:
<div class="progress-bar" style="width: 60%;">60%</div>
</div>
</div>
 Colored Progress Bars

By default progress bar is blue(primary).
<div class="progress-bar progress-bar-
striped" style="width: 40%;">40%</div>
</div>
<div class="progress mt-3">
<div class="progress-bar progress-bar-striped progress-bar-
animated" style="width: 40%;">40%</div>
</div>
</div>
Bootstrap 4 Pagination
If you have page with lots of pages, you may wish to add some sort
of pagination to each page.
Previous 11 2 3 Next
To create basic pagination, add the .pagination 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="#">Next</a></li>
</ul>
</div>
 Active State
The .active class is used to “highlight” the current page.
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
Previous 1 2 3 Next
Bootstrap 4 Cards
• A card in Bootstrap 4 is a bordered box with some padding around its
content. It includes options for headers, footers, content, colors, etc.
A basic card is created with the .card class, and content inside the card
has a .card-body class:
<div class="card">
<div class="card-body">Basic card</div>
</div>
Basic card
To add a background color the card, use contextual classes (.bg-

primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-
secondary, .bg-dark and .bg-light.
Titles, text, and links
Use .card-title to add card titles to any heading element. The .card-

text class is used to remove bottom margins for a <p> element if it is the
last child (or the only one) inside .card-body. The .card-link class adds a
blue color to any link, and a hover effect.
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some
example text.</p>
<a href="#" class="card-link">Card link</a>
</div>
</div>
Card Images
Add .card-img-top or .card-img-bottom to an <img> to place the image at
the top or at the bottom inside the card. Note that we have added the
image outside of the .card-body to span the entire width:
<div class="card" style="width:400px">
<img class="card-img-
top" src="img_avatar1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>

Bootstrap

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap

Uploaded by

Copyright:

Available Formats

Bootstrap

• Bootstrap is a free front-end framework for faster and easier web

What is Responsive Web Design?

Responsive web design is about creating web sites which automatically

Where to Get Bootstrap 4?

Large(>=992) 960px (.container.lg)

Medium(>=768) 720px (.container.md)

Small(>=576) 540px (.container.sm)

Extra Small(<576) 100% (Auto)

//It will add top and bottom padding of 16px.

span 4 span 4 span 4

.col .col .col

.col-sm-3 .col-sm-3 .col-sm-3

1.Jumbotron inside the container:

Dark Light Link

The button classes can be used on <a>, <button>, or <input> elements:

 Block Level Buttons

Save Update Delete

To create a default progress bar, add a .progress class to a container

 Colored Progress Bars

To create basic pagination, add the .pagination to an <ul> element.

To add a background color the card, use contextual classes (.bg-

Use .card-title to add card titles to any heading element. The .card-

You might also like