Scribd
Upload
31 views38 pages

Chapter Five-Bootstrap

Uploaded by

beshahashenafi32
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
31 views38 pages

Chapter Five-Bootstrap

Uploaded by

beshahashenafi32
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/ 38

Chapter Five

Bootstrap
Introduction
 The most popular HTML, CSS, and JavaScript framework for
creating responsive, mobile-first websites.
 With just the knowledge of HTML and CSS anyone can get started
with Bootstrap.
 Bootstrap's responsive CSS adjusts to Desktops, Tablets and
Mobiles
 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
Cont…

 Responsive web design is about creating web sites


which automatically adjust themselves to look good on
all devices, from small phones to large desktops.
 Where to Get Bootstrap 5?
 There are two ways to start using Bootstrap 5 on your
own web site.
 Include Bootstrap 5 from a CDN
 Download Bootstrap 5 from getbootstrap.com
Cont…

 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.
Containers
 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
Cont…
 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:

 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%):
Cont…

 Container Border and Color


 The max-width of the container will change on different screen
sizes/viewports:
 <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.
Grids

 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).
Cont…
Cont…

 Grid Classes
 The Bootstrap grid system has four classes:
 xs (for phones - screens less than 768px wide)
 sm (for tablets - screens equal to or greater than 768px wide)
 md (for small laptops - screens equal to or greater than 992px
wide)
 lg (for laptops and desktops - screens equal to or greater than
1200px wide)
Cont…

 First example:
 create a row (<div class="row">). Then, add the desired number
of columns (tags with appropriate .col-*-* classes).
 The first star (*) represents the responsiveness: sm, md, lg, xl or xxl, while
the second star represents a number, which should add up to 12 for each
row.
 Second example:
 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, while three cols = 33.33% width to each col. Four
cols = 25% width, etc. You can also use .col-sm|md|lg|xl|xxl to make
the columns responsive.
Cont…

<div class="container-fluid mt-3">


<h1>Three equal width columns</h1>
<p>Note: Try to add a new div with class="col" inside the
row class - this will create four equal-width columns.</p>
<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>
Cont…
 <h1> - <h6>
 Bootstrap 5 styles HTML headings (<h1> to <h6>) with a bolder font-weight
and a responsive font-size.
 You can also use .h1 to .h6 classes on other elements to make them behave
as headings
 <small>
 In Bootstrap 5 the HTML <small> element (and the .small class) is used to
create a smaller, secondary text in any heading:
 <mark>
 Bootstrap 5 will style <mark> and .mark with a yellow background color and
some padding:
 E.g: <p>Use the mark element to <mark>highlight</mark> text.</p>
Cont…

 <abbr>
 Bootstrap 5 will style the HTML <abbr> element with a dotted border
bottom and a cursor with question mark on hover:
 E.g: <p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>
 Bootstrap will style the HTML <blockquote> element in the following way:
 <blockquote>
 <p>Live as if you were to die tomorrow. Learn as if you were to live
forever..</p>
 <footer>Mahatma Gandhi</footer>
 </blockquote>
Use class .blockquote-reverse to show the quote on the right.
Cont…

 <code>
 Bootstrap will style the HTML <code> element in the following
way:
 <p>The following HTML elements: <code>span</code>,
<code>section</code>, and <code>div</code> defines a section in a
document.</p>
 <kbd>
 Bootstrap will style the HTML <kbd> element in the following
way:
 <p>Use <kbd>ctrl + c</kbd> to copy some text </p>
Cont…
Cont…
 Text Colors
 Bootstrap 5 has some contextual classes that can be used to provide
"meaning through 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) and .text-
light:
 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.
 Note that background colors do not set the text color, so in some cases
you'll want to use them together with a .text-* color class.
Tables
 A basic Bootstrap 5 table has a light padding and horizontal
dividers.
 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:
 Black/Dark Table
 The .table-dark class adds a black background to the table:
Cont…

 Dark Striped Table


 Combine .table-dark and .table-striped to create a dark, striped table:
 Borderless Table
 The .table-borderless class removes borders from the table:
 Contextual Classes
 Contextual classes can be used to color the whole table (<table>), the
table rows (<tr>) or table cells (<td>).
Cont…
Cont…

 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):
Images
 Rounded Corners
 The .rounded class adds rounded corners to an image:
 <img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
 Circle
 The .rounded-circle class shapes the image to a circle:
 Thumbnail
 The .img-thumbnail class shapes the image to a thumbnail (bordered):
 Aligning Images
 Float an image to the left with the .float-start class or to the right with .float-end:
 Centered Image
 Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block
(display:block) to the image:
Jumbotron
 A jumbotron was introduced in Bootstrap 3 as a big padded box for calling extra
attention to some special content or information.
 Jumbotrons are no longer supported in Bootstrap 5. However, you can use a <div>
element and add special helper classes together with a color class to achieve the
same effect:
 This component can optionally increases the size of headings and add a lot of
margin for landing page content.
<div class="jumbotron">
<div class="container">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p><a class="btn btn-primary btn-lg" role="button"> Learn more</a>
</p>
</div>
</div>
Alerts
 Bootstrap 5 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:
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
 Alert Links
Add the .alert-link class to any links inside the alert box to create "matching colored
links":
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this
message</a>.
</div>
Cont…

 Closing Alerts
 To close the alert message, add a .alert-dismissible class to the
alert container.
 Then add class="btn-close" and data-bs-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">
<button type="button" class="btn-close" data-bs-
dismiss="alert"></button>
<strong>Success!</strong> This alert box could indicate a
successful or positive action.
</div>
Cont…

 Animated Alerts
 The .fade and .show classes adds a fading effect when closing
the alert message:
<div class="alert alert-danger alert-dismissible fade show"
Button

 Bootstrap provides different styles of buttons:

 Bootstrap has the following classes:


 .btn
 .btn-default
 .btn-primary
 .btn-success
 .btn-info
 .btn-warning
 .btn-danger
 .btn-link
Cont…
 <button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</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-link">Link</button>
 Button size

 Bootstrap provides four button sizes:


 <button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Cont…

A button can be set to an active (appear pressed) or a disabled (unclickable) state:


 <button type="button" class="btn btn-primary active">Active Primary</button>
 <button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Glyphicons

 Bootstrap provides 260 glyphicons from the Glyphicons Halflings set.


 Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.
 Here are some examples of glyphicons:
 Envelope glyphicon:
 Print glyphicon:
 Search glyphicon:
 Download glyphicon:
 <span class="glyphicon glyphicon-name"></span>
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
Progress Bar

 A progress bar can be used to show a user how far along he/she is in a process.
 Bootstrap provides several types of progress bars.
 A default progress bar in Bootstrap looks like this:
 To create a default progress bar, add a .progress class to a <div> element:
<div class="container">
<h2>Progress Bar With Label</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-
valuemin="0" aria-valuemax="100" style="width:70%"> 70%
</div>
</div>
Cont…

 Contextual classes are used to provide "meaning through colors".


 The contextual classes that can be used with progress bars are:
 .progress-bar-success
 .progress-bar-info
 .progress-bar-warning
 .progress-bar-danger
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-
valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
Cont…
 Progress bars can also be striped:
 Add class .progress-bar-striped to add stripes to the progress bars:
 <div class="progress">
<div class="progress-bar progress-bar-success progress-bar-
striped" role="progressbar" aria-
valuenow="40" ariavaluemin="0" ariavaluemax="100" style="width:40%">40%
Complete (success)
</div>
</div>
 Add class .active to animate the progress bar:
 <div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div>
Stacked Progress Bars

<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
Free Space
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
Warning
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
Danger
</div>
</div>
Basic Pagination

 If you have a web site with lots of pages, you may wish to add
some sort of pagination to each page.
 A basic pagination in Bootstrap looks like this:
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
 The active state shows what is the current page:
Add class .active to let the user know which page he/she is on:
Breadcrumbs

 Another form for pagination, is breadcrumbs:


 The .breadcrumb class indicates the current page's location within a navigational hierarchy:
<div class="container">
<h2>Breadcrumbs</h2>
<p>The .breadcrumb class indicates the current page's location within a navigational
hierarchy:</p>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul>
</div>
Cont…

 <ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
Read more on the following

 Card
 Modal
 Tooltip
 Icons
 Filters

You might also like