What is Bootstrap ?
Bootstrap is one of the most popular front end design frameworks for building responsive web and mobile apps.
Bootstrap was first created by a designer from twitter.
Bootstrap CSS contains predefined css classes which helps the developer to create a Responsive website much faster rather than spending time on creating your own css.
For me Bootstrap is more of like a tool, that comes with a bunch of predefined CSS classes and JS functions which helps to build responsive and dynamic websites.
But Bootstrap is not the only Framework in the market. There are several competitors.
E.g.
Tailwind CSS
Material UI
ZURB foundations
And many more
Bootstrap works really well with React js and their combination is pretty popular in the front end developer’s community.
The latest version of Bootstrap available is Bootstrap 5.2.
Click HERE to check the version history of Bootstrap till date.
When you want to use Bootstrap in our HTML, we need to add the CSS link as a CDN ( Content Delivery Network ). It means we need to embed the path of the CSS source file inside our HTML <head> tag.
Something like the following
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
And the JS as following inside “<body></body>” tag
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</script>By doing this we make sure all the CSS classes and JS functions are available inside our current HTMl file which we are working on.
<button type=”button” class=”btn btn-primary“>Primary</button>
This “btn btn-primary” class is responsible for creating this style below in the button.
Thus it is saving a lot of time for us by adding prewritten styles, and it also makes the whole page responsive.
Bootstrap styles are available for all different parts of the page.
- Layout
- Content
- Forms
- Components ( Buttons, Carousel, Accordion , Navbar etc )
The following video shows how to create a profile page using Bootstrap 4. You will get an idea about how to use Bootstrap CSS to create a simple responsive page.