Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

Web Development Lesson Nine

This document provides an overview of Bootstrap, a free front-end CSS framework designed for faster and easier web development, emphasizing its responsive design capabilities. It covers the history of Bootstrap, environment setup, and details about containers and grid layouts, including examples of how to implement them. The document highlights Bootstrap's mobile-first approach and browser compatibility, making it accessible for users with basic HTML and CSS knowledge.

Uploaded by

oluwafemiarike517
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Web Development Lesson Nine

This document provides an overview of Bootstrap, a free front-end CSS framework designed for faster and easier web development, emphasizing its responsive design capabilities. It covers the history of Bootstrap, environment setup, and details about containers and grid layouts, including examples of how to implement them. The document highlights Bootstrap's mobile-first approach and browser compatibility, making it accessible for users with basic HTML and CSS knowledge.

Uploaded by

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

WEB DEVELOPMENT

LESSON NINE

By Oluwadamilare Idowu Joshua


Table of Content

Bootstrap
● What is Bootstrap
● Bootstrap Environment Setup
● Bootstrap Containers
● Bootstrap Grid layout
What is a Bootstrap?
Bootstrap is a free front-end CSS framework for faster and
easier web development, it gives you the ability to easily
create responsive designs.

Bootstrap History
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and
released as an open source product in August 2011 on GitHub.

What is a 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)
Bootstrap Environment Setup
A quick way to add bootstrap to your project is to;
● download Bootstrap from getbootstrap.com or
● copy and paste the following codes in your html <head> tag

<!-- compiled and minified CSS -->


<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.m
in.css" rel="stylesheet">

<!-- compiled JavaScript -->


<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bun
dle.min.js"></script>
Bootstrap Containers
Containers are used to pad the content inside of them, and there are two
container classes available:

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
Bootstrap Containers
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a
.container class.</p>
<p>The .container class provides
a responsive fixed width
container.</p>
<p>Resize the browser window to
see that its width (max-width) will
change at different breakpoints.</p>
</div>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container,
spanning the entire width of the viewport.</p>
</div>
Bootstrap Containers
<div class="container p-3 my-3 border">
<h1>My First Bootstrap Page</h1>
<p>This container has a border and some
extra padding and margins.</p>
</div>
<div class="container p-3 my-3 bg-dark
text-white">
<h1>My First Bootstrap Page</h1>
<p>This container has a dark background
color and a white text, and some extra
padding and margins.</p>
</div>
<div class="container p-3 my-3 bg-primary
text-white">
<h1>My First Bootstrap Page</h1>
<p>This container has a blue background
color and a white text, and some extra
padding and margins.</p>
</div>
<!-- p=>padding, my=>margin-->
Bootstrap Grid Layout
A Grid layout is an arrangement of items in rows and columns. In Bootstrap grid system
is responsive, and the columns will re-arrange automatically depending on the screen
size

Grid Classes

The Bootstrap grid system has five basic 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)
Bootstrap Grid Layout
The following is a basic structure of a Bootstrap grid:

<!-- personalise the column width, and how they should appear on
different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Bootstrap Grid Layout
(explaining the bootstrap structure from the previous slide)
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 or xl, 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. three cols = 33.33% width to each col. four cols =
25% width, etc. You can also use .col-sm|md|lg|xl to make the columns
responsive.
Bootstrap Grid Layout
<div class="container-fluid">
<h1>Three equal width columns</h1>
<div class="row">
<div class="col" style="background-color:lavender;">.col</div>
<div class="col" style="background-color:orange;">.col</div>
<div class="col" style="background-color:lavender;">.col</div>
</div>
<h1>Responsive Columns</h1>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
</div>
<h1>Two Unequal Responsive Columns</h1>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
</div>
</div>
Bootstrap Grid Layout

You might also like