The Feynman technique says that teaching a subject makes you better at it, which is what I'm trying to do here. You may correct me if you saw mistakes in this post
Styling with Bootstrap!
Bootstrap is a CSS Framework to help people write CSS (duh!).
To get started, we need to import the necessary stylesheet for it to do its magic ✨.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
After that, anything that we want to be affected by Bootstrap responsive design need to be nested into a div with container-fluid class:
<div class="container-fluid">
<!-- Put the affected elements here! -->
</div>
Done? Then you're set!
How to style elements
To style an element, put a specific class on the element. For example, to center a text:
<p class="text-center">LOL</p>
That's it! No additional stylesheets, just classes 🎉! These classes are pre-determined, so you can search this on the internet.
These classes can be combined, like this:
<button class="btn btn-default">
I am a button
</button>
(We're gonna talk about buttons soon 👀)
There are numerous other classes, like img-responsive that makes your image responsive to the screen size.
Buttons
Buttons need a specific class btn to be considered as... buttons. They also have a default style (see the example above)
Other than that, they also have btn-block that makes them behave like a block element.
<button class="btn btn-default btn-block">
I'm blocked
</button>
They stretch horizontally, while forcing other elements after it to go below the button.
They also have other styles besides default; btn-primary, btn-info, btn-danger, etc.
Color management in Bootstrap
In buttons, we have the primary, info, danger color, etc.
However, this is not limited to buttons. Text also have this color specification, as well as links.
IMO, this avoid the problem of too rainbow-y styles, where developers keep shoving colors, forming a unicorn fugly site. Definitely gonna help me next time I'm building a site.
Grid systems 🔥
By default, Bootstrap apply an invisible grid inside the container. Its a 12-columns grid, with flexible rows.
Putting elements into the same row looks like this:
<div class="row">
<!-- 1st element -->
<!-- 2nd element -->
</div>
To specify the width of elements with columns, use this syntax:
<div class="col-x-y">
!<-- Element to be resized -->
</div>
Where x is the screen size (md, xs, etc.), while y is the number of columns.
Afterwords
That's how far I've got today. It felt like writing this post is harder than the actual learning 🤣. Anyway, see you guys tomorrow!
Top comments (0)