Bootstrap helps with creation of Websites that are:
Foremost, Bootstrap provides a consistent, uniform appearance and design. With very little effort, Bootstrap can be used to transform a hodge-podge site into a professional, visually appealing design.
Sites created with Bootstrap are designed to look & function well on any device including desktops, laptops, tablets and smartphones. Bootstrap is "mobile-first" which means the design for smaller mobile devices is considered foremost.
Bootstrap is a mature, tested code-base that is entirely based on standards and cross-browser compliance. Sites that properly utilize what Bootstrap offers will also benefit from this compatibility.
Let's look at a super simple comparison of a Web page with and without Bootstrap.
As you can see, once Bootstrap is added, the Web page instantly gets a new look. You simply reference any
of Bootstrap’s reusable CSS classes in the HTML markup. In this example, I used Bootstrap's text-center
class to easily center the text.
How to... Bootstrap
<div class="text-center">
<h1>Hello World</h1>
<p>
There's Bootstrap 4 here.
</p>
</div>
Of course, I could have accomplished the same thing without using Bootstrap. I could have simply created my own CSS classes.
Creating my own CSS would have been fine for this simple example. But, for more complex pages would I want to keep writing CSS classes for every style change that is needed? Would that CSS be re-usable, and tested across multiple browsers? Would I want to add CSS definitions to make the design “responsive” for different device widths? Of course, the answer is “No”, and that’s exactly why I’m here writing about the very popular Bootstrap.