Scribd
Upload
13 views

bootstrap

Uploaded by

menefe1575
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

bootstrap

Uploaded by

menefe1575
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Bootstrap

• 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
• Bootstrap also gives you the ability to easily create responsive designs
What is Responsive Web
Design?
• Responsive web design is about
creating web sites which
automatically adjust themselves
to look good on all devices,
from small phones to large
desktops.
Why Use 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 5 is compatible with all modern
browsers (Chrome, Firefox, Edge, Safari, and Opera).
Where to Get Bootstrap 5?
• Include Bootstrap 5 from a CDN ((Content Delivery Network).)

<!-- Latest compiled and minified CSS -->


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstra
p.min.css"rel="stylesheet">

<!-- Latest compiled JavaScript -->


<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap
.bundle.min.js"></script>

• Download Bootstrap 5 from getbootstrap.com


Create Web Page With Bootstrap 5
1. Add the HTML5 doctype: Always include the HTML5 doctype at the beginning of the page, along with the lang
attribute and the correct title and character set

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
2. Bootstrap 5 is mobile-first 5 Example</title>
<meta charset="utf-8">
</head>
•The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary
</html>
depending on the device).
•The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.

<meta name="viewport" content="width=device-width, initial-scale=1">


Bootstrap 5 Grid System
• 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:
Bootstrap Columns
• The basic principle behind Bootstrap is to structure your page into columns. Your page will adjust the number of
columns to display based on the screen width.

• You, as a designer, can control how many columns you want in your page at its full width. You can have up to 12
columns.

• Use the correct class based on how many columns you want.

col-sm-1 col-sm-1 col-sm-1 col-sm-1 col-sm-1 col-sm-1 col-sm-1 col-sm-1 col-sm-1 col-sm-1 col-sm-1 col-sm-1

col-sm-3 col-sm-3 col-sm-3 col-sm-3

col-sm-4 col-sm-4 col-sm-4

col-sm-6 col-sm-6

col-sm-12
Grid Classes
• The Bootstrap 5 grid system has six 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)
• .col-xxl- (xxlarge devices - screen width equal to or greater than
1400px)
Basic Structure of a Bootstrap 5 Grid
• First example: create a row <!-- Control the column width, and how
they should appear on different devices
(<div class="row">). Then, add -->
the desired number of <div class="row">
<div class="col-*-*"></div>
columns (tags with <div class="col-*-*"></div>
appropriate .col-*- </div>
<div class="row">
* classes). The first star (*) <div class="col-*-*"></div>
represents the <div class="col-*-*"></div>
responsiveness: sm, md, <div class="col-*-*"></div>
</div>
lg, xl or xxl, while the
second star represents a <!-- Or let Bootstrap automatically
number, which should add handle the layout -->
<div class="row">
up to 12 for each row. <div class="col"></div>
<div class="col"></div>
<div class="col"></div>
• 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.

Try to add a new div with class="col" inside the row class - this will create four equal-
width columns.
Responsive Columns
• The following example shows how to create four equal-width columns starting
at tablets and scaling to extra large desktops. On mobile phones or screens
that are less than 576px wide, the columns will automatically stack
on top of each other:

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

Resize the browser window to see the effect.


The columns will automatically stack on top of each other when the screen is less than 576px wide.
.col
Two Unequal Responsive Columns
• The following example shows how to get two various-width columns
starting at tablets and scaling to large extra desktops:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Bootstrap Example
<div class="container">
<div class="row" style="margin-top:52px;">
<div id="currency" class="col-sm-6">
<div class="label">Currency App</div>
</div>
<div id="prayer" class="col-sm-6">
<div class="label">Prayer App</div>
</div>
<div id="weather" class="col-sm-6">
<div class="label">Weather App</div>
</div>
<div id="sentiment" class="col-sm-6">
<div class="label">Sentiment App</div>
</div>
</div> See Lab 5

col-sm-6 col-sm-6

col-sm-6 col-sm-6
Bootstrap 5 Navbars
• A navigation bar is a navigation header that is placed at
the top of the page:
Basic Navbar
• With Bootstrap, a navigation bar can extend or collapse, depending on the
screen size.
• A standard navigation bar is created with the .navbar class, followed by a
responsive collapsing class: .navbar-expand-xxl|xl|lg|md|sm (stacks the
navbar vertically on xxlarge, extra large, large, medium or small screens).
• To add links inside the navbar, use either an <ul> element (or a <div>)
with class="navbar-nav". Then add <li> elements with a .nav-item class
followed by an <a> element with a .nav-link class:
Basic Navbar
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-
light">

<div class="container-fluid">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
Collapsible Navigation Bar
• Very often, especially on small screens, you want to hide the
navigation links and replace them with a button that should reveal
them when clicked on.
• To create a collapsible navigation bar, use a button
with class="navbar-toggler", data-bs-toggle="collapse" and data-bs-
target="#thetarget". Then wrap the navbar content (links, etc) inside a
<div> element with class="collapse navbar-collapse", followed by an
id that matches the data-bs-targetof the button: "thetarget".
nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
Navbar Forms and Buttons
• You can also include forms inside the navigation bar:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text"placeholder="Search">
<button class="btn btn-primary"type="button">Search</button>
</form>
</div>
</div>
</nav>
Bootstrap & Navbar

Add a responsive menu to your project

You might also like