DEV Community 👩‍💻👨‍💻

Cover image for Intro to Bootstrap
ABailey92
ABailey92

Posted on

Intro to Bootstrap

In order to become a bootstrap expert you will need to first grasp the fundamentals of HTML and CSS. Without this, you will not understand how to implement bootstrap and will find yourself becoming frustrated with a program designed to make your life easier.

Brushed up on your HTML & CSS?


Great now you're ready to dive into bootstrap! First, I bet you're wondering, "what exactly is bootstrap?". Well, bootstrap is a library that, in short, makes web development shorter and easier. It also makes pages more responsive. Getting started is as easy as copying and pasting the CDN located at get boostrap here. From there the documentation is very user friendly and most elements can be styled by simply adding bootstrap specified classes to them.

Alt Text

In the example above changing your alert button is as simple as adding the class of "alert alert-primary", "alert alert-dark" and so on. The first class of "alert" tells bootstrap to make the div rounded and thin, essentially making it into an alert bar. The second class will tell bootstrap the color you would like your alert bar. Primary is blue, secondary is gray, and danger is red. There are many other colors too, and all it takes is a few minutes to read the documentation on how to specify which color you want.

The only thing left to do is try it out!


I suggest looking at examples here and playing around with it until you feel more comfortable implementing this into your own personal project.

Here is to consistent, responsive, and beautiful websites in a fraction of the time.

Top comments (1)

Collapse
jimcmorrison profile image
JimCMorrison

Bootstrap is really useful in dressing up a project. Nice quick share on the subject!

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.