In the remaining chapters, we are going to be doing a lot of work in the browser. Creating an attractive UI can be a difficult thing to do, especially in an era when we may also be targeting mobile devices in different layout modes. In order to make things easier for ourselves, we are going to rely quite heavily on Bootstrap. Bootstrap was designed to be a mobile device first UI framework that smoothly scales up to PC browsers. In this section, we are going to lay out the base template that contains the standard Bootstrap elements, and then have a look at how to lay out a simple page using features such as the Bootstrap grid system.
We are going to start with the starter template from Bootstrap (https://getbootstrap.com/docs/4.1/getting-started/introduction/#starter-template). With this particular template, we avoid the need to download and install the various CSS stylesheets and JavaScript files; instead, we rely on well-known Content Delivery Networks (CDNs) to source these files for us.
The starter template looks as follows:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap
/4.1.3/css/bootstrap.min.css" integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<title>
<
<Template Bootstrap>
>
</title>
</head>
<body>
<!--
Content goes here...
Start with the container.
-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
The starting point for laying out content is the container. This goes in the preceding content section. The following code shows the div section:
<div class="container">
</div>
Inside the container, Bootstrap attempts to lay items out in a grid pattern. Bootstrap operates a system where each row of the screen can be represented as up to 12 discrete columns. By default, these columns are evenly spread out across the page so we can make complicated layouts just by choosing the appropriate number of columns to occupy for each part of our UI. Fortunately for us, Bootstrap provides an extensive set of predefined styles that help us to make layouts for different types of devices, whether they are PCs, mobile phones, or tablets. These styles all follow the same naming convention of .col-<<size-identifier>>-<<number-of-columns>>:
| Type | Extra small devices | Small devices | Medium devices | Large devices |
| Dimensions | Phones < 768px | Tablets >= 768px | Desktops >= 992px | Desktops >= 1200px |
| Prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
The way that the number of columns works is that each row should ideally add up to 12 columns. So, if we wanted to have a row made of content covering three columns, then six columns, and finally another three columns, we would define our rows to look like this inside our container:
<div class="row">
<div class="col-sm-3">Hello</div>
<div class="col-sm-6">Hello</div>
<div class="col-sm-3">Hello</div>
</div>
That styling defines how this would appear on small devices. It is possible to override the styles for larger devices. For instance, if we wanted large devices to use columns of five, two, and five, we could apply this styling:
<div class="row">
<div class="col-sm-3 col-lg-5">Hello</div>
<div class="col-sm-6 col-lg-2">Hello</div>
<div class="col-sm-3 col-lg-5">Hello</div>
</div>
This is the beauty of a responsive layout system. It allows us to generate content that is appropriate for our devices.
Let's take a look at how to add some content to our page. We are going to add jumbotron to our first column, some text into our second column, and a button in our third column:
<div class="row">
<div class="col-md-3">
<div class="jumbotron">
<h2>
Hello, world!
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
eget mi odio. Praesent a neque sed purus sodales interdum. In augue sapien,
molestie id lacus eleifend...
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Learn more</a>
</p>
</div>
</div>
<div class="col-md-6">
<h2>
Heading
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
eget mi odio. Praesent a neque sed purus sodales interdum. In augue sapien,
molestie id lacus eleifend...
</p>
<p>
<a class="btn" href="#">View details</a>
</p>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary btn-lg btn-block active">
Button
</button>
</div>
</div>
Again, we are using CSS styling to control what our display looks like. By giving a div section a styling of jumbotron, Bootstrap immediately applies that styling for us. We controlled exactly what our button looks like by choosing to make it the primary button (btn-primary) and so on.
jumbotron normally stretches across the width of all of the columns. We put it inside a three-column div just so we can see that the width and styling is controlled by the grid layout system and that jumbotron does not have some special properties that force it to lay out across the page.