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.org/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.org/"
class="btn btn-success mx-4">
Learn More
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Output
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.
Contact Us