DEV Community

Cover image for Day 1: Bootstrap Basics
Kemystra
Kemystra

Posted on

Day 1: Bootstrap Basics

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"/>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

(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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

To specify the width of elements with columns, use this syntax:

<div class="col-x-y">
  !<-- Element to be resized -->
</div>
Enter fullscreen mode Exit fullscreen mode

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!

Follow me on Github!
Also on Twitter!

Top comments (0)