Scribd
Upload
11 views31 pages

Ch5 Bootstrap

Uploaded by

takitakir64
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
11 views31 pages

Ch5 Bootstrap

Uploaded by

takitakir64
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/ 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