Lecture 8 - Bootstrap

Web Technologies
Bootstrap
Summary of Today’s Lecture
• Bootstrap Introduction
• Bootstrap Grid System
• Bootstrap Grid Classes
• Bootstrap Grid Example (Photo Gallery)
• Bootstrap Column Layouts (Examples)
• Bootstrap Components (Examples)
– Navbar
– Jumbotron
– Breadcrumb
– Tables
– Buttons
– Forms
• Responsive Web Design Example (Restaurant Web Portal )
What is Bootstrap
• Bootstrap is a free and open-source CSS framework directed at
responsive, mobile-first front-end web development.
• It contains CSS- and (optionally) JavaScript-based design templates
for typography, forms, buttons, navigation, and other interface
components.
• It is a powerful front-end framework that helps create websites
faster and easier.
• It was released as an open source product in August 2011 on
GitHub.
What is Grid
• In graphic design, a grid is a structure (usually two-dimensional)
made up of a series of intersecting straight (vertical, horizontal)
lines used to structure content.
• Bootstrap includes a responsive, mobile first grid system that
appropriately scales up to 12 columns as the device or viewport size
increases.
• Bootstrap 4 is mobile first in the sense that the code for Bootstrap
now starts by targeting smaller screens like mobile devices, tablets,
and then “expands” components and grids for larger screens such
as laptops, desktops.
How do grid systems work?
Adding Bootstrap Framework
• Two ways of adding boostrap framework to the HTML file,
• Bootstrap CDN (Content Delivery Network)
– <link rel="stylesheet" href="https://maxcdn
.bootstrapcdn.com/bootstrap/4.4.1/css/boots
trap.min.css">
• Add as a separate file.
– <link rel="stylesheet"
href="bootstrap.min.css">
Working of Bootstrap grid System
• Rows must be placed within a .container class for proper
alignment and padding.
• Use rows to create horizontal groups of columns.
• Content should be placed within columns, and only columns may be
immediate children of rows.
• Predefined grid classes like .row and .col-sm-4 are available
for quickly making grid layouts.
• Grid columns are created by specifying the number of twelve
available columns you wish to span. For example, three equal
columns would use three .col-sm-4.
Container
<div class=“container”> … </div>

element is added to ensure proper centering and width for layout.
.container vs .container-fluid
• 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 (width is always 100%).
.container vs .container-fluid
Row
Once container is added, next you need think in terms of rows.

Add <div class=“row”>... </div> inside container.
Columns
Every row in the grid is made up of 12 units and you can define
the desired size of your columns using those units.
In our example we have defined one column each 4 units wide.
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)
• The classes above can be combined to create more dynamic and
flexible layouts.
Responsive breakpoints
• Bootstrap is developed to be mobile first, we use a handful
of media queries to create sensible breakpoints for our layouts and
interfaces.
• These breakpoints are mostly based on minimum viewport widths
and allow us to scale up elements as the viewport changes.
Basic Structure of Bootstrap Grid
• <div class=“container”>
– <div class="row">
• <div class="col-*-*"></div>
• </div>
• <div class="row">
• </div>
...
• </div>
• </div>
Extra Small Grid Example
• <div class="container">
<div class="row">
<div class="col-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-9 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Small Grid Example
<div class="row">
<div class="col-sm-3 bg-success">
</div>
<div class="col-sm-9 bg-warning">
</div>
</div>
</div>
Medium Grid Example
<div class="row">
<div class="col-sm-3 col-md-6">
</div>
<div class="col-sm-9 col-md-6">
</div>
</div>
</div>
Large Grid Example
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
</div>
</div>
</div>
Extra Large Grid Example
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
</div>
</div>
</div>
• <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-
xl-2">
• <a href="photo1.html"><img class="photo_list"
src="./images/img_1.jpg" alt="graffiti cover
image"/></a></div>
• <div class="col-12 col-sm-6 col-md-4 col-lg-3
col-xl-2">
image"/></a></div>
col-xl-2">
image"/></a></div>
col-xl-2">
image"/></a></div>
col-xl-2">
image"/></a></div>
Example (Auto Column Layout)
• 
<div class="row">
<div class="col">1 of 2</div>
</div>


<div class="row">
</div>
Example (Three equal columns)
• Get three equal-width columns starting at desktops and scaling to
large desktops.
• On mobile devices, tablets and below, the columns will automatically
stack.
• <div class="col-md-4" style="background-
color:lavender;">.col-md-4</div>
color:lavenderblush;">.col-md-4</div>
– </div>
• </div>
Example (Three unequal Columns)
– </div>
• </div>
Example (Two nested columns)
color:lavender;">.col-md-8
» <div class="col-md-6" style="background-
color:lightcyan;">.col-md-6</div>
» <div class="col-md-6" style="background-
color:lightgray;">.col-md-6</div>
– </div>
• </div>
– </div>
• </div>
Example (Column breaks)
• <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
• 

• <div class="w-100"></div>

• </div>
Example (Offsetting Column)
• <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .col-sm-
offset-2 .col-md-6 .col-md-offset-0</div>
• <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
– </div>
• </div>
Example (Offsetting Column)
• <div class="col-md-4">.col-md-4</div>
• <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
• </div>
• </div>
• </div>
Bootstrap Jumbotron
• A jumbotron is used to showcase key content on a website.
• It indicates a big grey box for calling extra attention to some special content or
information.
• <div class="jumbotron">
• <h1>Bootstrap Tutorial</h1>
• <p>Bootstrap is the most popular HTML, CSS, and JS
framework for developing responsive, mobile-first
projects on the web.</p>
• </div>
• <p>This is some text.</p>
• <p>This is another text.</p>
• </div>
Bootstrap Jumbotron
• <div class="jumbotron">
• <h1>Bootstrap Tutorial</h1>
• <p>Bootstrap is the most popular HTML, CSS, and JS
framework for developing responsive, mobile-first
projects on the web.</p>
• </div>
• </div>
• <p>This is some text.</p>
• <p>This is another text.</p>
• </div>
Bootstrap Buttons
– <button type="button" class= "btn btn-primary">hello click me</button>
– <button type="button" class= "btn btn-seondary">hello click
me</button>
– <button type="button" class= "btn btn-success">hello click me</button>
– <button type="button" class= "btn btn-danger">hello click me</button>
– <button type="button" class= "btn btn-info">hello click me</button>
– <button type="button" class= "btn btn-light disabled">hello click
me</button>
– <button type="button" class= "btn btn-outline-danger btn-sm">hello
click me</button>
• </div>
Buttons groups
• <h2>Button Group</h2>
• <p>The .btn-group class creates a button group:</p>
• <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>
• </div>
Bootstrap Navbar
• <nav class="navbar navbar-expand-sm bg-light">
• <ul class="navbar-nav">
• <li class="nav-item">
• <a class="nav-link" href="#">Link 1</a>
• </li>
• </li>
• </li>
• </ul>
• </nav>
Navbar Options
• <nav class="navbar navbar-expand-sm bg-light
justify-content-center">
...
</nav>
• <nav class="navbar navbar-expand-sm bg-dark

navbar-dark">...</nav>
• 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)
• 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.
Navbar Options
navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg" alt="Logo" style="width:40
px;"> </a>
...
</nav>
• Top Fixed Navbar

navbar-dark fixed-top">
...
</nav>
• Bottom Fixed Navbar
navbar-dark fixed-bottom">
...
</nav>
Bootstrap Breadcrumb
• Breadcrumb indicates the current page’s location within a navigational hierarchy.
• <nav>
• <ol class="breadcrumb">
• <li class="breadcrumb-item active">Home</li>
• </ol>
• </nav>
• <nav>
• <li class="breadcrumb-item"><a href="#">Home</a></li>
• <li class="breadcrumb-item active">Library</li>
• </ol>
• </nav>
• <nav>
• <li class="breadcrumb-item"><a href="#">Home</a></li>
• <li class="breadcrumb-item"><a href="#">Library</a></li>
• <li class="breadcrumb-item active">Data</li>
• </ol>
• </nav>
Bootstrap Tables
•
• <table class="table">
• <thead><tr>
• <th>Firstname</th>
• <th>Lastname</th>
• <th>Email</th></tr>
• </thead>
• <tbody>
• <tr>
• <td>John</td>
• <td>Doe</td>
• <td>[email protected]</td>
• </tr>
• <tr>
• <td>Mary</td>
• <td>Moe</td>
• </tr>
• <tr>
• <td>July</td>
• <td>Dooley</td>
• </tr>
• </tbody>
• </table>
Bootstrap Table (Striped)
• <table class="table table-striped">
• <thead>
• <tr>
• <th>Firstname</th>
• <th>Lastname</th>
• <th>Email</th>
• </tr>
• </thead>
• <tbody>
• <tr>
• <td>John</td>
• <td>Doe</td>
• </tr>
• <tr>
• <td>Mary</td>
• <td>Moe</td>
• </tr>
• <tr>
• <td>July</td>
• <td>Dooley</td>
• </tr>
• </tbody>
• </table>
Bootstrap Forms (Stacked)
• <form>
– <div class= "form-group">
• <label for="user"> studentname: </label>
• <input type="text" name="" id="user" class="form-control">
– </div>
• <label for="password"> Password: </label>
• <input type="text" name="" id="password" class="form-control">
– </div>
• <label for="email"> Email: </label>
• <input type="text" name="" id="" class="form-control">
– </div>
– <input type="submit" name="" class= "btn btn-success">
• </form>
• </div>
Bootstrap Forms (Inline)
• <form class=“form-inline”>
• <label for="user"> studentname: </label>
• <input type="text" name="" id="user" class="form-control">
– </div>
• <label for="password"> Password: </label>
• <input type="text" name="" id="password" class="form-control">
– </div>
• <label for="email"> Email: </label>
• <input type="text" name="" id="" class="form-control">
– </div>
– <input type="submit" name="" class= "btn btn-success">
• </form>
• </div>
Restaurant Portal (Extra-Small Screen)
Home.html
Restaurant Portal (Small Screen)
Home.html
Aboutus.html
Contactus.html
Contactus.html
Summary of Today’s Lecture
• Bootstrap Introduction
• Bootstrap Grid System
• Bootstrap Grid Classes
• Bootstrap Grid Example (Photo Gallery)
• Bootstrap Column Layouts (Examples)
• Bootstrap Components (Examples)
– Navbar
– Jumbotron
– Breadcrumb
– Tables
– Buttons
– Forms
• Responsive Web Design Example (Cuisine Web Portal )
References
• https://getbootstrap.com/docs/4.5/getting-started/introduction/
• https://getbootstrap.com/docs/4.4/layout/grid/
• https://www.w3schools.com/bootstrap4/bootstrap_grid_system.as
p
• https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)
• https://v5.getbootstrap.com/docs/5.0/getting-
started/introduction/

Lecture 8 - Bootstrap

Uploaded by

Copyright:

Available Formats

Lecture 8 - 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

Lecture 8 - Bootstrap

Uploaded by

Copyright:

Available Formats

Web Technologies

<div class=“container”> … </div>

• The .container-fluid class provides a full width container, spanning

Once container is added, next you need think in terms of rows.

•

• <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

• <nav class="navbar navbar-expand-sm bg-dark

• Top Fixed Navbar

You might also like