Quick Intro to Bootstrap

When it comes to styling the font end, there are a lot of options. Should you stick with CSS and HTML for full control and endless challenge or pick up a styling library for easy ebb and flow? If you're here, I'm guessing you picked the latter! Great choice, CSS can become extremely cumbersome. Let Bootstrap carry you to success! Installation is simple, just run

$ npm install bootstrap

Bootstrap is a very popular front-end design framework. Originally called Twitter Blueprint, it was designed by Mark Otto and Jacob Thornton over at Twitter. It is designed to be a responsive, mobile-first CSS framework. And although right now Bootstrap on its own depends on jQuery to power certain UI components, Bootstrap 5, which is the next version to be released, will be dropping jQuery entirely in favor of vanilla Javascript! A library that is not only kept up, but is also releasing new versions? A luxury.

Ignore for a second that I said Bootstrap still uses jQuery. Not only is Bootstrap free, but it also has some state-of-the-art features. According to wappalyzer, over 4,888,000 websites use it to design their interfaces, the most notable sites being companies such as:

• NBA
• Target
• Bloomberg Business
• and even Walmart!

And it is popular for a reason. The advantages include a responsive grid, a multitude of components, eloquent documentation, customization, and much more. As I stated before, diving into HTML and CSS can get real messy, real fast. Bootstrap has you covered.

<div class="container">
  <div class="row">
    <div class="col-sm">
      column 1
    </div>
    <div class="col-sm">
      column 2
    </div>
    <div class="col-sm">
      column 3
    </div>
  </div>
</div>

One thing I learned was that making a website look like a website is actually really quite tricky. Making columns and rows is a good place to start. And with Bootstraps flex grid capabilities, you can move your columns around to create the skeleton for your website easily. Paired with their readily available stylesheet, you can even let them handle the CSS.

If you are building your app with React (my favorite JavaScript library), you can install React-Bootstrap instead. React-bootstrap is probably the most popular library for adding Bootstrap components into React. There’s also reactstrap and React UI, but in my opinion it all boils down to what’s easiest to install and use! To set up React-Bootstrap run

$ npm install react-bootstrap bootstrap

Like most React elements, you'll need to import the components you wish to use like Button or Alert. They also provide CSS. To achieve the same column effect as before with HTML divs, instead you can use the Col component like so:

<Container>
  <Row>
    <Col>1 of 1</Col>
  </Row>
</Container>

Bootstrap can allow you to easily make something like my example quickly, without fighting with HTML for hours. Of course, this is just a small tease of what you can do with Bootstrap. Get started and see how creative you can be using this flexible library!