Introduction to Bootstrap
In this article I will cover the basics to help you get started working with Bootstrap and also a brief history of how it got started. This article is meant for anyone who has experience with html/css/javascript.
So who created Bootstrap? Bootstrap was created by Mark Otto(@mdo) and Jacob Thornton(@fat) at Twitter mid 2010. Before Bootstrap was Bootstrap it known as Twitter Blueprint and it was not an open source project. Twitter Blueprint served as a styling guide for internal tools development. After a year it became open source and was release Friday, August 19, 2011. Since the release it had over twenty released and two major re-writes.
Now that we know a little background information of bootstrap and who created it.Lets shift to what Bootstrap is and how to get started. Bootstrap is a Front-end library. If this is your first library, you may yourself what does Front-end library mean? A Front-end library is something you import into your project or application to make the appearance of your project better looking. If your mind is saying well I can just do that with CSS. And you would be right….. But the purpose of importing this library or any library is that it comes with a lot of pre-packaged things to help you complete tasks or even your project a bit quicker and easier.
So you think you are ready to get started eh? Navigate to your html document and inside your <head> tag before all other stylesheet links paste the following :
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"Also many of the features in Bootstrap require Javascript to function so to accommodate we will need to add the following link to a script tag at the bottom of your page:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>Now you have full access to one of the webs most popular Front End Libraries, now what? Here are a few simple things to step your projects game up:
Lets make an image fit perfectly on our mobile device- Inside your image tag give it a class “img-responsive” and BAM! It now adjusts to the phones screen size.
Do you have an element you want in the center of your page? This can now be easily done…….all we need to do is add the class ‘text-center’ to an element and there you go, a perfectly centered item on the page
A very attractive feature and one that is most commonly used in the library is to turn a button blue. This is usually a button we want to bring the users attention to, to perform an action. To accomplish this change your ‘btn-default’ class to ‘btn-primary’ and your button goes from ordinary to extraordinary.
Got a button that you want to be big and red???? To accomplish this, simply create a button and give it a class of ‘btn-danger’ (NOTE: this button will still need a btn and btn-block class)
