Scribd
Upload
59 views

Introduction To Bootstrap

Bootstrap

Uploaded by

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

Introduction To Bootstrap

Bootstrap

Uploaded by

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

Introduction to Bootstrap

(Practical)
Today, we will learn how to style
HTML documents using Bootstrap, a
powerful CSS framework. Bootstrap
makes it easy to create attractive and
responsive websites without writing
complex code. Let's get started and
explore the wonderful world of
Bootstrap!
Adding Bootstrap to
Your HTML
To use Bootstrap, we need to include its
CSS and JavaScript files in our HTML
document.
Start by downloading Bootstrap from the
official website or using a content delivery
network (CDN) link.
Here's an example of how to include
Bootstrap in your HTML file using the CDN
link:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
>
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</script>
</head>
<body>
<!- Your content goes here -->
</body>
</html>
Styling Button
Bootstrap provides prestyled buttons that
can be easily added to your web page.
Let's see an example of how to create a
primary button:
<button class="btn btnprimary">
Click Me!
</button>
You can also use other classes to style
buttons differently, such as btnsuccess,
btn-danger, or btn-warning.
Responsive Grid Layout
Bootstrap offers a responsive grid
system to help structure your
webpage's layout.
The grid is made up of rows and
columns, allowing you to create
flexible and responsive designs.
Here's an example of a simple grid
layout with two columns:
<div class="container">
<div class="row">
<div class="colmd-6">
<p>This is the content of the first column.</p>
</div>
<div class="colmd-6">
<p>This is the content of the second
column.</p>
</div>
Navigation Bar
A navigation bar is an essential
component of any website.
Bootstrap makes it easy to create
a stylish and responsive
navigation bar.

Let's see an example of a basic


navigation bar:
<nav class="navbar navbarexpand-lg navbar-light bg-light">
<a class="navbarbrand" href="#">Navbar</a>
<button class="navbartoggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbartoggler-icon"></span> </button>
<div class="collapse navbarcollapse" id="navbarNav">
<ul class="navbarnav">
<li class="navitem active">
<a class="navlink" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="navitem">
<a class="navlink" href="#">Features</a> </li>
<li class="navitem">
<a class="navlink" href="#">Pricing</a> </li>
<li class="navitem">
<a class="navlink disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li>
</ul>
</div>
</nav>
Styling Images
Bootstrap provides utility classes
to style images easily.
You can add classes like rounded,
img-fluid, or shadow to enhance
the look of your images.
Here's an example of how to style
an image using Bootstrap:
<img src="path/to/your/image.jpg" class="rounded
img-fluid shadow" alt="My Image">
The Complete Code (HTML
File)
Here's a complete code containing all the code
examples.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css">
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/dist/js/
bootstrap.min.js">
</script>
</head>
<body>
<h1>Welcome to Bootstrap!</h1>

<h2>Styling Buttons</h2>
<button class="btn btn-primary">Click Me!</button>
<h2>Responsive Grid Layout</h2>
<div class="container">
<div class="row">
<div class="col-md-6">
<p>This is the content of the first column.</p>
</div>
<div class="col-md-6">
<p>This is the content of the second column.</p>
</div>
</div>
</div>
<h2>Navigation Bar</h2>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-
controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<h2>Styling Images</h2>
<img src="path/to/your/image.jpg" class="rounded img-fluid
shadow" alt="My Image">
</body>
</html>

You might also like