What is Bootstrap ?
Bootstrap is one of the popular front-end frameworks which has a nice set of predefined CSS codes. The updated version of Bootstrap5 was officially released on 16 June 2020. Bootstrap is a CSS framework that makes mobile-friendly web development and provides responsiveness.
The framework is available for free and can be utilized in two ways either by downloading the zip files and incorporating Bootstrap libraries/modules into the project or by directly including the Bootstrap URL and using the online version.
Bootstrap QuickStart
Table of Content
- Features of Bootstrap
- Reason to learn Bootstrap?
- Bootstrap Components
- Bootstrap Integration Techniques
- Advantages and Disadvantages
Features of Bootstrap
- Bootstrap is the Fastest and Easiest way to create web pages.
- Bootstrap is widely used to create Platform-independent web pages.
- Bootstrap is popular for creating Responsive web pages.
Reasons to learn Bootstrap?
- Using pre-styled components makes development faster.
- Bootstrap is based on the mobile-first concept that works well on all screen sizes.
- Bootstrap makes it easy to Use the grid system for a well-organized and responsive page layout without complex coding.
- Bootstrap offers pre-built components and styles, making projects faster to complete.
Bootstrap Components
The table below illustrates the Bootstrap Components.
Component | Description |
---|---|
Bootstrap Containers | Containers are used to create a responsive fixed-width layout. |
Bootstrap Colors | Bootstrap provides a variety of color classes. |
Bootstrap Text Colors | Text Colors Classes are used for changing text color. |
Bootstrap Responsive Columns | Grid system for creating responsive layouts. |
Bootstrap Columns | Bootstrap offers different available column classes that can be utilized to manage the widths of non-grid elements. |
Bootstrap Tables | Styled and responsive HTML tables. |
Bootstrap Alerts | Displaying contextual feedback messages. |
Bootstrap Buttons | Pre-styled buttons with various options. |
Bootstrap Cards | Flexible and extensible content containers. |
Example 1: Here is an example to illustrate Bootstrap 5 styling including, Cards, Container, buttons, colors, and text-colors.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<div class="card my-4 mx-auto"
style="width:200px">
<div class="card" style="width:200px ">
<img class="card-img-top" src=
"https://media.w3wiki.net/img-practice/prod/courses/504/Web/Content/DSA-to-Dev_1705410853.webp"
alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">
DSA to Dev:
A Complete Guide
</h4>
<p class="card-text">
Developer Guy love to develop
front-end and back-end
</p>
<a href="https://www.w3wiki.net/"
class="btn btn-success mx-4">
Learn More
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Bootstrap Integration Techniques
Bootstrap can be integrated into our project either through CDN links or by using package managers like npm.
Method 1: Using Bootstrap 5 CDN
You can import Bootstrap 5 from a CDN (Content Delivery Network). You can get CDN support for Bootstrap’s CSS and JavaScript.
<!-- Compiled CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
Method 2: Using Bootstrap 5 NPM
You can also get Bootstrap 5 via NPM(Node Package Manager).
npm install bootstrap
Example 2: Here is an example to illustrate Bootstrap 5 styling including, colors, text-color, and buttons.
<!DOCTYPE html>
<html>
<head>
<title>
Bootstrap 5 | Buttons
</title>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
</head>
<body>
<div style="text-align: center;width: 600px;"></div>
<div style="width: 600px; height: 200px;
margin:20px;text-align: center;">
<button type="button" class="btn btn-primary">
Primary
</button>
<button type="button" class="btn btn-secondary">
Secondary
</button>
<button type="button" class="btn btn-success">
Success
</button>
<button type="button" class="btn btn-danger">
Danger
</button>
<button type="button" class="btn btn-warning">
Warning
</button>
</div>
</body>
</html>
Output:
Advantages and Disadvantages
Advantages
- Large and active community support.
- Responsive features make it easy to create mobile-friendly websites without extra custom coding and media queries.
- Bootstrap offers efficient web development with its pre-designed components and responsive grid system.
Disadvantages
- Bootstrap is beginner-friendly, but learning all its features and utility classes may take time.
- Due to the large file size, Bootstrap impacts website performance resulting in faster load times.
- Websites developed only with Bootstrap may have a generic appearance, and extra effort may be needed for a distinct look.