Scribd
Upload
5 views

Ch5 Bootstrap

Uploaded by

takitakir64
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

Ch5 Bootstrap

Uploaded by

takitakir64
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 31

Chapter Five

Bootstrap

1
Introduction
Bootstrap’s primary objective is to create responsive,
mobile-first websites.
Mobile-first design approach enables web designers to
start product design for mobile devices first.
This can be done by sketching the website’s design for the
smallest screen first and gradually working up to larger
screen sizes.
But how are these style changes possible across all
devices?
Through custom media query rules

2
Takeaway question
1. What was the initial purpose behind the development of
Bootstrap?
2. Explain the concept mobile-first design?
3. What methods can we use to create responsive web
pages?

3
Media queries
Media query is a CSS technique introduced in CSS3.
Media queries are a way for web developers to apply styles
to a webpage based on characteristics of the device or
browser that is being used to view it.
These characteristics can include screen width, height, and
device orientation,
A media query consists of a condition and a set of styles
that should be applied if that condition is true.
If the condition is met (for example, if the screen width is
less than 600 pixels), the specified styles will be applied;
otherwise, they will be ignored.
4
Media queries example
 /* Styles for all screens */

body {
font-size: 16px;
}
 /* Media query for screens with a width of 600 pixels or less */

@media (max-width: 600px)


{
body {
font-size: 14px;
}
}
5
Takeaway question
1. Write a simple media query that adjusts the font size to
18 pixels for screens with a width of 800 pixels or more.
Assume the default font size is 16 pixels.
2. Write a media query that changes the body background
color to green only if the screen width is between 400
and 600 pixels.

6
Solution
1. @media (min-width: 800px) {
body {
font-size: 18px;
}
}
2. @media (min-width: 400px) and (max-width: 600px)
{
body {
background-color: green;
}
}
7
Why use bootstrap?
Bootstrap addresses several challenges that web developers
commonly face
Responsive Design: Bootstrap provides a responsive grid
system and a set of pre-built components that automatically
adjust to different screen sizes.
Cross-Browser Compatibility: Bootstrap is designed and
tested to work well across major browsers, helping developers
avoid compatibility issues
Development Speed: Bootstrap includes a variety of ready-to-
use components like navigation bars, buttons, forms, and more.
These components can be easily integrated into a project

8
Bootstrap.css
In order to use Bootstrap, you need to integrate it into your
development environment.
Step 1: Download Bootstrap
 Visit the official Bootstrap website (https://getbootstrap.com/)
and click on the "Download" button.
 Unzip the downloaded folder to access the necessary CSS and
JS files.
Step 2: Include Bootstrap Files in Your Project
In your HTML file, include the Bootstrap CSS file in the <head>
section.
<link rel="stylesheet"
href="path/to/bootstrap/css/bootstrap.min.css">
9
Bootstrap.css
 You can also add it by linking to the Bootstrap CDN (Content Delivery
Network)
<link rel="stylesheet“
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstr
ap.min.css">
Step 3: Start Using Bootstrap Classes
Once you've included the Bootstrap files, you can start using
Bootstrap classes in your HTML.
Bootstrap.min.css contains prewritten style rules written in CSS
If we want to apply these styles, we assign one of the pre-written
CSS classes to an HTML element. For example,
 <img src=“apple1.jpg" class="rounded-circle" alt=“apple tree">
 The .rounded-circle class shapes the image to a circle

10
Components commonly found in bootstrap
Containers: Containers in Bootstrap are used to wrap and
contain the page's content. They provide a consistent
margin and padding, helping with the layout and spacing
of elements.
Grids: Bootstrap's grid system allows you to create a
responsive layout by dividing the page into a grid of rows
and columns.
Tables: Bootstrap provides styles for tables, making them
look cleaner and more visually appealing. It includes
features like striped rows, hover effects.

11
Cont’d
Jumbotron: A jumbotron is a large, prominent container
for showcasing key content. It's often used for hero
sections or prominently displaying important information.
Alerts: Bootstrap alerts are used to convey important
information to the user. They can be styled to indicate
success, warning, or error messages.
Cards: Cards are flexible content containers in Bootstrap.
They can include images, text, buttons, and more,
providing a versatile way to display information.

12
Containers
The Bootstrap framework uses a grid system to create
content layouts.
When building a website using the Bootstrap framework,
you need to specify a containing element for holding the
bootstrap grid system.
The purpose of the grid system is to set the layout of the
web pages and it comprises a series of rows with columns
in each row.
Bootstrap requires a containing element to wrap site
contents
They are the most basic layout tool available to the
13 framework.
Containers cont’d
The first type of container, is referred to as the class
container
The effect this class has is to center the container on standard
desktop browser views with a width over 540px
The container class uses max-width breakpoints, a CSS rule
that triggers upon a specific width.
The second type of container, is referred to as the fluid
container
Rather than centering the container and adjusting the size at
breakpoints, the container fluidly resizes to the width of the
body element.

14
Class container
 To assign a div, main or section element a container class, we use
class=”container”
 The container snaps to the following pixel widths.
540px, 720px, 960px, 1140px, 1320px
 Between snaps it centers the container to the browser viewport.
 <body>
<h1>Bootstrap Container</h1>
<p>The div below has container, and border classes
attached.</p>
<div class="container">100% wide until small breakpoint
</div>
</body>
15
Fluid container
The standard container snaps to pre-set pixel widths based
on the size of the browser viewport.
The class container-fluid, however, adjusts to the
browser viewport’s size without snapping.
Rather than centering the container and adjusting the size
at breakpoints, the container fluidly resizes to the width of
the body element.
The container is always 100% the width of the browser
viewport.

16
Bootstrap Grid System
A grid is a structure comprising a series of lines (vertical or
intersecting) that divide a page into columns
This structure helps designers to arrange content on a
page
To align and layout content, the Bootstrap grid system uses
a series of containers, rows, and columns.
To create a layout in bootstrap,
1. You first create a container (<div class="container">).
2. Next, a row (<div class="row">) inside container class
3. Then, a desired number of columns (<div class="col">) to
add inside the <div> with row class
17
example
Example, two column split:
< div class=“fluid-container">
< div class="row border">
< div class="col border">
< h4 >This is the first column.</ h4 >
</ div >
< div class="col border">
< h4 >This is the second column</ h4 >
</ div > What do you think the
</ div > output will look like?
</ div >
18
Grid cont’d
When we use the “col” class, Bootstrap will evenly
distribute the space between the columns (if there are two
columns in one row, the two will share the space equally);

19
If we do not want to use all 12 column individually, we can
group the columns together to create wider columns

col-* classes are used to define the width of individual


columns within the grid system, and
they typically range from col-1 to col-12 representing different
column widths.
<div class="row">
<div class="col-6">Column 1 (width 6)</div>
<div class="col-6">Column 2 (width 6)</div>
</div>
The sum of the column values within a row should not exceed
12 to maintain a proper Bootstrap grid system
20
Bootstrap Basic Table
 A basic Bootstrap table has a light padding and only horizontal
dividers.
 The table class adds basic styling to a table
<table class="table">
<tr>
<th>Firstname</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>[email protected]</td>
</tr>
</table>

21
More classes to style tables
 Striped Rows: table-striped class adds zebra-stripes to a table
 Bordered Table: table-bordered class adds borders on all sides of the
table and cells
 Hover Rows: table-hover class adds a hover effect (grey background
color) on table rows
 Condensed Table: table-condensed class makes a table more
compact by cutting cell padding in half
 Contextual classes to color table rows (<tr>) or table cells (<td>):
Active: applies the hover color to the table row or table cell
Success: indicates a successful or positive action
Info: indicates a neutral informative change or action
Warning: indicates a warning that might need attention
Danger: indicates a dangerous or potentially negative action

22
Bootstrap alerts
Alert boxes are used quite often to make an information
that requires immediate attention of end users standout
such as warning, error or confirmation messages
Example,

23
Bootstrap alerts
We use .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 for proper styling
Example,
<div class="alert alert-primary" >
 This is a primary alert—check it out!
 </div>

24
Bootstrap Cards
A card is a flexible and extensible content container that
holds a few pieces of related information.
Each card is a single card class, which is then further
divided into three parts. Card Header, Card Body, Card
Footer

25
Basic Card
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>

26
Header and Footer
The header of the card is made up of an image or a title.
If you use an image header you can move the heading into the card
body, and write it as a single article of text
The card body, content inside the card has a .card-body class.
The card footer, can hold a summary of the card, details of the
author, a call to action button, social media links
<div class="card">
<div class="card-header">header</div>
<div class="card-body">content</div>
<div class="card-footer">footer</div>
</div>

27
Cards are made up of the following class structure:
Card
card-header
card-img-top
card-body
card-title
card-text
card-footer
btn btn-primary

28
The .card-columns class creates a
masonry-like grid of cards

29
The basic class names, in alphabetical order
are:
 Active  Display  List
 Alert  Drop M
 Align  embed  Mark
 Badge  Fade  Modal
 Bg  Fixed  Nav
 Blockquote  Float  Next
 Border  Font  No
 Btn  Form  Offset
 Card H  Order
 Carousel  Has P
 Clearfix  Initialism  Page
 Close  Input  Position
 Col  invalid-feedback  Progress
 Container  Is  Rounded
 Custom  justify-content
D  Lead

30
Cont’d
row
shadow
sr-only
stretched
success
tab
table
tooltip
visible
w
was-validated

31

You might also like