Scribd
Upload
74 views4 pages

Day 5. Bootstrap 5 & Bootstrap Component

Bootstrap 5 is the latest version of the popular front-end framework, featuring a Flexbox-based grid system that simplifies responsive design. It includes pre-defined CSS classes for layout and interactivity, allowing developers to create structured web pages easily. Bootstrap also offers various components like forms, navbars, and a robust grid system, along with advantages such as fewer cross-browser bugs and extensive community support.

Uploaded by

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

Day 5. Bootstrap 5 & Bootstrap Component

Bootstrap 5 is the latest version of the popular front-end framework, featuring a Flexbox-based grid system that simplifies responsive design. It includes pre-defined CSS classes for layout and interactivity, allowing developers to create structured web pages easily. Bootstrap also offers various components like forms, navbars, and a robust grid system, along with advantages such as fewer cross-browser bugs and extensive community support.

Uploaded by

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

5.

Bootstrap 5 & Bootstrap Component


Bootstrap 5

Bootstrap 5 is the latest version of the widely popular front-end framework, Bootstrap.
Bootstrap 5 has a lot of new exciting features and capabilities that make building
responsive designs even easier than before. The biggest add-on is that it is heavily built on
Flexbox.

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/
Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
<h1>Hello, world! </h1>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL
"
crossorigin="anonymous"></script>
</body>

</html>

The first <link> element contains Bootstrap’s CSS library, that allows us to use Bootstrap’s
classes in our webpage. The first <script> element pulls in the jQuery library in order to use
Bootstrap’s pre-built JavaScript functionality, included in the last <script> element.
How does Bootstrap work?
It uses pre-defined CSS classes to design the layout of your webpage and adds interactivity
via JavaScript. By simply defining the “class” attribute on an element, Bootstrap applies
styling and interactivity to that element.
Bootstrap uses a 12-column grid system that’s responsive, meaning it automatically
rearranges when the screen size changes.
Now, to get started with a layout, you first create a .container class element to put all the
content of your website in. The .container-fluid class provides a container that spans the full
width of the viewport/screen. You cannot nest containers.
Next, you add a .row class element that will contain your .col elements. You put columns
inside rows, and rows inside containers. So, a two-column webpage would look something like:

<div class="container">
<div class="row">
<div class="col-md-6">
<!-- First Column -->
</div>
<div class="col-md-6">
<!-- Second Column -->
</div>
</div>
</div>
You can get more reference from below URLs:
https://www.w3schools.com/bootstrap/
https://getbootstrap.com/
Bootstrap Components

Bootstrap Grid
In order to make them appear nicely like this, and to also make sure they work well
responsively, we’ll need to wrap the cards in a grid. The grid is one of the core pieces of
Bootstrap, and many developers use the library solely because of the grid.

<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-3">Column</div>
<div class="col-sm-6 col-lg-3">Column</div>
<div class="col-sm-6 col-lg-3">Column</div>
<div class="col-sm-6 col-lg-3">Column</div>
</div>
</div>
Above the sm breakpoint, we want each of the cards to take up half the width, so we’ll give
the columns a col-sm-6 class. When the screen reaches the lg breakpoint though, we want
four cards in the width, so we’ll do col-lg-3.
Bootstrap Form
The controls — like the <input> and <textarea>—are styled with the form-control class. They
make it look like a classical Bootstrap form:

<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone
else. </div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Bootstrap Navbar
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A
standard navigation bar is created with <nav class="navbar navbar-default">.
You can refer full list of components from below URLs:
https://getbootstrap.com/docs/5.3/getting-started/introduction/
Bootstrap Advantages

1. Fewer Cross browser bugs.


2. Responsive structures and styles.
3. Several JavaScript plugins using the jQuery.
4. Good documentation and community support.
5. Great grid system.
6. Loads of free and professional templates, WordPress themes and plugins.
7. Bootstrap approaches with pre-styled components for alerts, dropdowns, nav bars, etc.
Hence, being a feature-rich, Bootstrap provides numerous advantages of using it.

You might also like