Bootstrap

Now that we know almost everything about Vue.js, let's talk about Bootstrap. Check out the official Bootstrap page at https://v4-alpha.getbootstrap.com/.

Bootstrap—framework for responsive projects

In a nutshell, Bootstrap gives you a broad set of classes that allow building nearly everything with any layout in an easy and effortless way.

Bootstrap provides with you four most important things:

• Easy layouts building at https://v4-alpha.getbootstrap.com/layout/overview/
• Broad range of classes to style nearly any web element at https://v4-alpha.getbootstrap.com/content/
• Self-contained components such as alerts, budges, modals, and so on at https://v4-alpha.getbootstrap.com/components/
• Some utilities for styling images, figures, for positioning, styling, and adding borders at https://v4-alpha.getbootstrap.com/utilities/

How to install Bootstrap? It can be installed from the CDN:

<link rel="stylesheet"  integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

This is, actually, exactly what we have in the PleaseIntroduceYourself application from Chapter 1, Please Introduce Yourself – Tutorial, and in the messy zoo application from this chapter.

Bootstrap components

Bootstrap has a lot of components that can be used just out of the box.

I will not talk about all of them in this chapter, because we will have several opportunities to discover them during the course of the book. Let's look at some of them just to have an idea.

Let's look at the alert components. As you might know, alerts are nice elements that appear on the page when you have successfully filled in some form. Alerts are also those angry red elements that tell you that you've done something wrong. What would you need to create an alert element on the page that would disappear after some time or give the possibility to the user to close it by clicking on the x button? You would probably create a div, add some class to it, and add a bit of JavaScript that would remove the element from the DOM tree after a grace period. Using Bootstrap, you just add alert class to your div and add another class such as alert-warning or alert-info to specify which kind of alert it is:

<div class="alert alert-success" role="alert">
  <strong>Hello!</strong> You have successfully opened this page!
</div>
<div class="alert alert-info" role="alert">
  <strong>Hey!</strong> Important information - this alert cannot be closed.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> It might be raining tonight, take your umbrella!
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Failure!</strong> Since you don't like this failure alert you can simply close it.
</div>

This code will produce nice alert boxes that look like this:

Bootstrap alerts—success, info, warning, and danger

Even a simple element like a button can be styled in hundreds of different ways using Bootstrap. Again, you can have buttons indicating success, danger zone, being informative, or just gray. There's a possibility of grouping buttons and making them look like a link. The code is pretty easy:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

This code will produce buttons as shown here:

Bootstrap buttons

icial documentation page at https://v4-alpha.getbootstrap.com/components/buttons/.

One of my favorite things about Bootstrap is that you might have a trivial element, but then you add some of the Bootstrap's classes to it and it suddenly becomes clean and nice. For example, create a simple page with some <h1> and <p> elements:

<div>
  <h1>Jumbotron</h1>
  <p>
    Lorem ipsum dolor sit amet…
  </p>
</div>

It will look normal, simple. Now, add the container class to the parent div. Isn't it much nicer? Also, add the jumbotron class to it.

The page looked like this earlier:

The content inside the div before adding Bootstrap classes

All of a sudden, the same page looks like this:

The content inside the div after adding Bootstra

Actually, if you check our PleaseIntroduceYourself example from Chapter 1, Please Introduce Yourself – Tutorial (chapter1/please-introuce-yourself/src/App.vue), you will see that this exact class was used for the parent element.

There are a lot of different components: popovers, tooltips, modals, and so on. We will use all of them during the course of the book.

Bootstrap utilities

Do you want to have responsive floats (elements that flow to the left or to the right)? Just add the float-left and float-right classes to your elements, and you don't have to be worried about it anymore:

<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div><br>

Just insert this code into your HTML page (or simply check out the index.html file in the example11-responsive-floats folder), open it, and resize your window.

You can easily control the sizing and spacing with simple classes. Check out https://v4-alpha.getbootstrap.com/utilities/sizing/ and https://v4-alpha.getbootstrap.com/utilities/spacing/.

You can even enable flex-box behavior just by adding the d-flex class to your container. The d comes from display. With more classes attached to your flex element, you can control alignment and direction of your flex-box. Check it out at https://v4-alpha.getbootstrap.com/utilities/flexbox/.

There are a lot more utilities to explore, and we will get into most of them during our journey.

Bootstrap layout

Using Bootstrap, it is easy to control the layout of your system: