Introduction
There are different aspects of making use of the framework in web development and more essential in the area of a frontend Engineer, which entails the framework for CSS3 and JavaScript. for the CSS framework we have the framework which is Tailwind and Bootstrap while for JavaScript framework which is AngularJs and the javascript library are Reactjs, Vuejs.. but we are going to be discussing Bootstrap.
Prerequisite
Before you start making use of this front-end framework, there is a need for you to understand the fundamentals which can also be referred to as a prerequisite
And this understanding can only be the way forward to making use of the Bootstrap framework as a frontend developer, this entails having an understanding of how to use HTML5 And CSS3
But there must be a willingness to learn and understand this to be able to use Bootstrap very well.
The goal of this article🎉
After reading this article to the end, every reader should be able to :
Understand what Bootstrap is,
What it includes and the functions it can perform.
The reason for making use of Bootstrap with Html and CSS.
What is Bootstrap
Bootstrap is a free front-end framework for faster and easier web development, it 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
There are different types of Bootstrap
Bootstrap 3
Bootstrap 4
Bootstrap 5 There was an upgrade in the development of this framework(Bootstrap) from 3 and now to 5 and it has been able to work in different ways I mean better than those available before, so we are discussing Bootstrap 5 which I will advise you to go. Note:- The Bootstrap requires a containing element to wrap site contents.
Bootstrap Container what is a container in Bootstrap?
Containers are used to pad the content inside of them, and there are two container classes available:
The .container class provides a responsive fixed width container
The .container-fluid class provides a full-width container, spanning the entire width of the viewport
And their different container Sections:-
Fixed Container A sample of how the fixed container is programed
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Fluid Container A sample of how the fixed container is programed
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Container Padding A sample of how the fixed container is programed
<div class="container pt-3"></div>
Container Border and Color A sample of how the fixed container is programed
<div class="container p-3 my-3 border"></div>
<div class="container p-3 my-3 bg-dark text-white"></div>
<div class="container p-3 my-3 bg-primary text-white"></div>
Responsive Containers A sample of how the fixed container is programed
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
What it includes and the functions it can perform.
Bootstrap makes the website responsive and which makes automatically adjusts itself to look good on all devices, from small phones to large desktops. it includes a lot and functions that help you easily as a frontend engineer get your design done in less time than you think
Functions it can perform
i have discussed one of the functions the bootstrap can perform to make it more responsive which is the Container and others will be listed below, Follow and enjoy the ride😄 😁 😆
Bootstrap Card
A card in Bootstrap 4 is a bordered box with some padding around its content. It includes options for headers, footers, content, colors, etc.
Basic Card
A basic card is created with the .card class, and content inside the card has a .card-body class:
<div class="card">
<div class="card-body">Basic card</div>
</div>
And in a Card, we have the Header, Content, and footer. a code that displays how it is arranged on a card
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
And to add a background color, we are going to be making use of Contextual Cards
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Cards with Contextual Classes</h2>
<div class="card">
<div class="card-body">Basic card</div>
</div>
<br>
<div class="card bg-primary text-white">
<div class="card-body">Primary card</div>
</div>
<br>
<div class="card bg-success text-white">
<div class="card-body">Success card</div>
</div>
<br>
<div class="card bg-info text-white">
<div class="card-body">Info card</div>
</div>
<br>
<div class="card bg-warning text-white">
<div class="card-body">Warning card</div>
</div>
<br>
<div class="card bg-danger text-white">
<div class="card-body">Danger card</div>
</div>
<br>
<div class="card bg-secondary text-white">
<div class="card-body">Secondary card</div>
</div>
<br>
<div class="card bg-dark text-white">
<div class="card-body">Dark card</div>
</div>
<br>
<div class="card bg-light text-dark">
<div class="card-body">Light card</div>
</div>
</div>
</body>
</html>
The code above gives illustrations of the different color that is imbedded in Bootstrap that can be used, check and enjoy the moment😀😃😄😁😆😅😊😇🙂
The reason for making use of Bootstrap with Html and CSS.
The need for responsiveness in a Website or a Web page cannot be overemphasized and making a frontend engineer happy and making the work awesome
Note that you cannot make use of Bootstrap without making use of Html and CSS and if you are reading this article I will encourage you to read my previous articles to have the basic knowledge needed before approaching the CSS Frameworks
Conclusion
Wow😍🥰 I Hope and believe you have gained one or two things from this article, In this fantastic series of Getting Started with Bootstrap. keep an eye out for more from my blog.
You can also read this article to learn more about Html and CSS
You can reach out to me on Twitter to learn more about any subject, and I will respond. Thank you for taking the time to read this😘.
Enjoy🎉