You are on page 1of 22

For this tutorial, our folder structure will consist of three folders and one HTML file:

 html – serve as the main file for all markup


 img folder – for images
 css folder – for style sheets (CSS)
 js folder – for JavaScript

Downloading Bootstrap 4
There are two versions available for download: Bootstrap compiled
version and Bootstrap source files.

However, the compiled version is not yet available at the time of writing. You can download
the Bootstrap source files here.
Set Up Necessary Files

For this tutorial, we will focus on picking up necessary files that we need for our one-page
responsive template.

Note: I will create a separate tutorial in the near future on how to set up and use Bootstrap
4 Alpha via SASS.

Once downloaded, unzip the Bootstrap source files and copy the following files inside
the dist folder. You can get these files inside the css and js folder upon opening
the dist folder.

 min.css
 min.js

In addition, we need to download tether.min.js file or use its CDN version from
their website for us to be able to use tooltips in Bootstrap 4 Alpha. Place this file inside the
js folder of our project.

Basic Markup

Our HTML document will begin with the HTML5 <!DOCTYPE> to specify which language
and version our document is using. Then on our <head> section we can place all of our
CSS, JavaScripts and fonts/images links. For performance purposes, you may wish to place
the JavaScript files at the bottom of the document (just before the closing </body> tag).

1 <!-- DOCTYPE -->


<!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>Boostrap 4 - Tutorial</title>
5 <!-- Required meta tags always come first -->
6 <meta charset="utf-8">
<meta name="author" content="Sam Norton">
7 <!-- Bootstrap CSS -->
8 <link rel="stylesheet" href="css/bootstrap.min.css">
9 <link rel="stylesheet" href="css/custom.css">
10 <!-- Fonts -->
11 <link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='styleshe
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400ital
12 <link href='https://fonts.googleapis.com/css?family=Raleway:400,300,600,700,900' rel='s
13 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/fon
14 </head>
15
16
17
We may also add the following code to force Internet Explorer to render to its rendering
mode and the meta viewport property for responsive view.

1 <meta name="viewport" content="width=device-width, initial-scale=1">


2 <meta http-equiv="x-ua-compatible" content="ie=edge">

To start, we will use the template below as our starting HTML for our one-page responsive
template. Notice that I’ve added some hosted library links such as Font Awesome and
Google Fonts.

1
2
3 <!-- DOCTYPE -->
4 <!DOCTYPE html>
5 <html lang="en">
6 <head>
<title>Boostrap 4 - Tutorial</title>
7 <!-- Required meta tags always come first -->
8 <meta charset="utf-8">
9 <meta name="author" content="Sam Norton">
10 <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
11 <!-- Bootstrap CSS -->
12 <link rel="stylesheet" href="css/bootstrap.min.css">
13 <link rel="stylesheet" href="css/custom.css">
14 <!-- Fonts -->
15 <link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='styleshe
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400ital
16 <link href='https://fonts.googleapis.com/css?family=Raleway:400,300,600,700,900' rel='s
17 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/fon
18 </head>
19 <body>
<!---CONTENT HERE-->
20
<!-- JavaScripts -->
21 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></scrip
22 <script src="js/bootstrap.min.js"></script>
23 <script src="js/tether.min.js"></script>
24 </body>
</html>
25
26
27

Working with Grids


The Bootstrap 4 grid system can have 12 columns and you can choose which column scale
you want to display on different viewport sizes. Check out the Bootstrap 4 medium grid
below with classes.

We will not be talking much about the grid system in depth in this tutorial, however we will
go straight on the column scale that we’re going to use on our one-page template.

Let’s first wrap everything inside a div wrapper class and then divide each part of our
documents via section tag and place classes specifically for each.

1
2
<!--wrapper start-->
3 <div class="wrapper" id="wrapper">
4 <!--header section-->
5 <header>
6 </header>
7 <!--about us section-->
<section class="aboutus" id="aboutus">
8 </section>
9 <!--features section-->
10 <section class="features" id="features">
11 </section>
<!--contact us section-->
12
<section class="contact" id="contact">
13 </section>
14 <!--footer section-->
15 <section class="footer" id="footer">
16 </div>
</section>
17 </div>
18 <!--wrapper end-->
19
20
Next, we will add the bootstrap’s container class to wrap elements and contain its grid
system. We will be using a fixed container. This means that as the viewport changes, its
width remains intact, until it meets a certain breakpoints.

Note that we will not put a container div on the header section as we want it to expand all
throughout the browser size. Let’s do that now.

1
2
3 <!--wrapper start-->
4 <div class="wrapper" id="wrapper">
5 <!--header section-->
6 <header>
</header>
7 <!--about us section-->
8 <section class="aboutus" id="aboutus">
9 <div class="container">
10 </div>
11 </section>
<!--features section-->
12 <section class="features" id="features">
13 <div class="container">
14 </div>
15 </section>
<!--contact us section-->
16 <section class="contact" id="contact">
17 <div class="container">
18 </div>
19 </section>
20 <!--footer section-->
<section class="footer" id="footer">
21 <div class="container">
22 </div>
23 </div>
24 </section>
25 </div>
<!--wrapper end-->
26
27
28
To continue, we need to add rows and columns inside container divs. The basic purpose
of rows is to wrap up column while column contains the content. Let’s start adding rows and
columns with some additional classes. Do not worry about these classes, we will talk more
about them later.

1 <!--wrapper start-->
<div class="wrapper" id="wrapper">
2 <!--header section-->
3 <header>
4 </header>
<!--about us section-->
5
<section class="aboutus" id="aboutus">
6 <div class="container">
7 <div class="row">
8 <div class="col-lg-12">
9 </div>
</div>
10 <div class="row">
11 <div class="col-md-3">
12 </div>
13 <div class="col-md-3">
14 </div>
<div class="col-md-3">
15 </div>
16 <div class="col-md-3">
17 </div>
18 </div>
</div>
19 </section>
20 <!--features section-->
21 <section class="features" id="features">
22 <div class="container">
23 <div class="row">
<div class="col-md-6">
24 </div>
25 </div>
26 <div class="row">
27 <div class="col-md-6">
28 </div>
</div>
29 </div>
30 </section>
31 <!--contact us section-->
32 <section class="contact" id="contact">
<div class="container">
33 <div class="row">
34 <div class="col-lg-12">
35 </div>
36 </div>
37 </div>
</section>
38 <!--footer section-->
39 <section class="footer" id="footer">
40 <div class="container">
41 <div class="row">
<div class="col-lg-12">
42
</div>
43 </div>
44 </div>
45 </div>
46 </section>
</div>
47 <!--wrapper end-->
48
49
50
51
52
53
54
55
56
57
58

Using Jumbotron

Jumbotron draws marketing messages and calls to action. Bootstrap Jumbotron


(formerly hero unit) is a large banner like section with large text, light gray background
wrap with box that has a border radius in it.

To create a Jumbotron, you need to add the jumbotron class to a div element and then add
header tags to it. On our template we’re going to use jumbotron class but it we’ll customize
how it looks. To make it more modern template, we’re going to use jumbotron to create a
parallax displacement effect. Add the code below inside the header section.

Note: We’ve also added a jumbotron-fluid class to make it fluidly responsive.

1
2 <!--header section-->
3 <header>
<div class="jumbotron jumbotron-fluid" id="banner">
4 <div class="parallax text-center" style="background-image: url(img/cover.jpg);">
5 <div class="parallax-pattern-overlay">
6 <div class="container text-center" style="height:580px;padding-top:170px;">
7 <a href="#"><img id="site-title" src="img/logo.png" alt="logo"/></a>
8 <h2 class="display-2">Boostrap 4 Alpha is here!</h2>
<h3 class="learn">Wanna know how to use it?</h3>
9 </div>
10 </div>
11 </div>
12 </header>
13

Basic Typography Classes


Bootstrap has special classes for displaying headings that designed to stand out more than
the normal headings. Basically, there are four size/class display headings:

 display-1
 display-2
 display-3
 display-4
A larger number means bigger text size. In our example above (header section), we’ve
used display-2 inside the h2 tag these will render the text on second size level.

Now, let’s add the following code to our About Us section:

<div class="heading text-center">


1<img class="dividerline" src="img/sep.png" alt="">
2<h2>About Boostrap 4 Alpha</h2>
3<img class="dividerline" src="img/sep.png" alt="">
4<h3><mark>Bootstrap</mark> is the world’s most popular framework for building responsive,
5JavaScript to make starting any project easier than ever. On <mark>August 19</mark>, Boot
going to be a couple of alphas before they move to the beta phase, but this gives us a gl
6</div>
There’s nothing special in this code; I just added a div with classes along with images and
header tags inside but notice the <mark> tag. This is an HTML5 element to represents text
as marked or highlighted to emphasize a word or a sentence. Basically Bootstrap also has
its own rendering on this element. See the image below.

We will discuss typography classes more in a separate article.

Creating Cards

Cards are new components in Boostrap 4 Alpha. Cards work as a container with light styles
in replaced with wells, panels and thumbnails. It supports variety of style options such as
alignment, colors, headings and more.
To create a card, simply add the card and card-block classes to a div. For its title add card-
title class and card-text for its regular text.

Copy and paste and paste the code below to your markup inside the About Us section.

1 <div class="row">
<div class="col-md-3">
2 <div class="card">
3 <img class="card-img-top" src="img/card1.jpg" alt="Card image cap">
4 <div class="card-block">
5 <h4 class="card-title">This is Card #1</h4>
6 Some quick example text to build on the card title and make up the bulk of the card's
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Le
7 </div>
8 </div>
9 </div>
10 <div class="col-md-3">
11 <div class="card card-inverse card-primary text-center">
<img class="card-img-top" src="img/card2.jpg" alt="Card image cap">
12 <div class="card-block">
13 <h4 class="card-title">This is Card #2</h4>
14 Some quick example text to build on the card title and make up the bulk of the card's
15 <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Le
</div>
16 </div>
17 </div>
18 <div class="col-md-3">
19 <div class="card card-inverse card-success text-center">
20 <img class="card-img-top" src="img/card3.jpg" alt="Card image cap">
<div class="card-block">
21 <h4 class="card-title">This is Card #3</h4>
22 Some quick example text to build on the card title and make up the bulk of the card's
23 <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Le
24 </div>
25 </div>
</div>
26 <div class="col-md-3">
27 <div class="card card-inverse card-info text-center">
28 <img class="card-img-top" src="img/card4.jpg" alt="Card image cap">
29 <div class="card-block">
<h4 class="card-title">This is Card #4</h4>
30 Some quick example text to build on the card title and make up the bulk of the card's
31 <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Le
32 </div>
33 </div>
34 </div>
</div>
35
36
37
38
39
40
41
42

Adding Tooltips

Bootstrap 4 Alpha requires a third-party library called tether to enable tooltips. To use
tooltips simply include tether.min.js just before the bootstrap.js file.

To use tooltip via tether simply create a link the attribute data-toggle=”tooltip” and then
include your text tooltip inside the title attribute. Check out the sample code below.

1 <a href="#" data-toggle="tooltip" title="This is a tooltip">Bootstrap 4 alpha</a>

On the example above we’ve used anchor tags but tooltips is not limited only on this. You
can also use it inside buttons and divs. To initialize all tooltips on a page you need to add a
JavaScript code below the tether.min.js source link to select tooltips by their data-
toggle attribute.

You can simply use the following code.

1 <script type="text/javascript">
2 $(function () {
3 $('[data-toggle="tooltip"]').tooltip()
4 })
</script>
5
Let’s see it in action in our features section. Copy and paste the code below inside the col-
lg-12 class.

<div class="heading text-center">


1<img class="dividerline" src="img/sep.png" alt="">
2<h2>Enhanced Features</h2>
<img class="dividerline" src="img/sep.png" alt="">
3<h3><a href="#" data-toggle="tooltip" title="This is a tooltip">Bootstrap 4 alpha</a> has a
4inverse</a> class that gives a background to the table itself. Another cool thing about t
5ease of use. Thanks to <a href="#" data-toggle="tooltip" title="Tether is a JavaScript libr
6on the page. For example, you might want a tooltip or dialog to open, and remain, next to
</div>

Table Class Prefix “Inverse”


Bootstrap 4 Alpha has added a new prefix –inverse class that inverts the color of the table
itself.

Add the class table-inverse to enable this feature.

Let’s see in action. Copy the code below inside the features section right after the code
above.

1 <div class="row">
<div class="col-md-6">
2 <table class="table table-inverse">
3 <thead>
4 <tr>
5 <th colspan="3" class="text-center">Bootstrap 3</th>
6 </tr>
<tr>
7 <th>Size</th>
8 <th>Device</th>
9 <th>Class</th>
10 </tr>
11 </thead>
<tbody>
12 <tr>
13 <td>Extra Small</td>
14 <td>Less than 768px</td>
15 <td>col-xs</td>
</tr>
16 <tr>
17 <td>Small</td>
18 <td>768px and up</td>
19 <td>col-sm</td>
20 </tr>
<tr>
21 <td>Medium</td>
22 <td>992px and up</td>
23 <td>col-md</td>
24 </tr>
25 <tr>
<td>Large</td>
26 <td>1200px and up</td>
27 <td>col-lg</td>
28 </tr>
29 </tbody>
</table>
30 </div>
31 <div class="col-md-6">
32 <table class="table table-inverse">
33 <thead>
34 <tr>
<th colspan="3" class="text-center">Bootstrap 4</th>
35 </tr>
36 <tr>
37
38
39
40
41
42
43
44 <th>Size</th>
45 <th>Device</th>
<th>Class</th>
46 </tr>
47 </thead>
48 <tbody>
49 <tr>
50 <td>Extra Small</td>
<td>Less than 34em</td>
51 <td>col-xs</td>
52 </tr>
53 <tr>
54 <td>Small</td>
<td>34em and up</td>
55 <td>col-sm</td>
56 </tr>
57 <tr>
58 <td>Medium</td>
59 <td>48em and up</td>
<td>col-md</td>
60 </tr>
61 <tr>
62 <td>Large</td>
63 <td>62em and up</td>
<td>col-lg</td>
64
</tr>
65 <tr>
66 <td>Extra Large</td>
67 <td>75em and up</td>
68 <td>col-xl</td>
</tr>
69 </tbody>
70 </table>
71 </div>
72 </div>
73
74
75
76
77
78
79
As you can see there is nothing special here just a regular table but Bootstrap 4 will handle
the styles. See the image below.
Bootstrap 4 Forms

Bootstrap 4 Forms are responsive that stacked vertically on viewports by default using
the display: block and width: 100% styles. These gives the user a better look on all
viewports, but can still be customized.

To use Bootstrap’s Form, simply add the form-control class on all of the field sets such as
input, text-area and so on. You also need to add <fieldset> tag along with the form-
group class inside it.

Let’s see this in action. Replace the code you’ve set on the contact us section with the code
below.

1 <!--Contact Us-->
<section class="contact" id="contact">
2
<div class="container">
3 <div class="row">
4 <div class="col-lg-12">
5 <div class="heading">
6 <img class="dividerline" src="img/sep.png" alt="">
<h2>Contact Us</h2>
7 <img class="dividerline" src="img/sep.png" alt="">
8 <h3>Feel free to reach out for any questions!
9 </h3>
10 </div>
11 </div>
</div>
12 </div>
13 <div class="container mx-width">
14 <div class="row">
15 <div class="done">
<div class="alert alert-success">
16 <button type="button" class="close" data-dismiss="alert">×</button>
17 Your message has been sent. Thank you!
18 </div>
19
20
21
22 </div>
23 <div class="col-md-12">
24 <form>
25 <fieldset class="form-group">
26 <input type="text" class="form-control" id="Name" placeholder="Name">
</fieldset>
27 <fieldset class="form-group">
28 <input type="email" class="form-control" id="Email" placeholder="Email">
29 </fieldset>
30 <fieldset class="form-group">
<textarea class="form-control" rows="3" placeholder="Message"></textarea>
31
</fieldset>
32 <button type="submit" class="contact submit">Submit</button>
33 </form>
34 </div>
35 </div>
</div>
36 </section>
37
38
39
40
Notice that I’ve also added some support class alert-success to notify the user that the
form was successfully submitted.

Footer and Icons

Bootstrap 3 offers a dozen reusable glyphicons components which can be used for different
purposes. For Bootstrap 4 Alpha this feature was dropped. For our footer section we’re
going to include Font-Awesome (https://fortawesome.github.io/Font-Awesome/ ) icon
classes for our social media icons. Copy the code below in your footer section.

1 <ul>
2 <li><a href="#"><i class="fa fa-facebook"></i></a></li>
3 <li><a href="#"><i class="fa fa-twitter"></i></a></li>
4 <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
5 <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
</ul>
6 &copy; 2015 - Designmodo.com
7
With all of the code we’ve written so far, you will have exactly the same output as the image
below.
Customizing Styles

Now that we have everything set up on our HTML, we need to customize our styles to make
our one- page template look awesome. Open up the custom.css and add the general
styles below for our basic elements and classes.

1 body {
font-family:'Lato', sans-serif;
2
font-size:1em;
3 color:#777;
4 font-weight:300;
5 line-height:1.7;
6 overflow-x:hidden;
}
7
8 h1,h2,h3,h4,h5,h6 {
9 color:#333;
10 line-height:1.4;
11 font-weight:700;
12 }
13
.mx-width {
14 max-width:960px;
15 margin:0 auto;
16 }
17
18 a,a:hover {
color:#563d7c;
19 text-decoration:none;
20 }
21
22 img{
23 width:100%;
24 max-width: 100%;
height:auto;
25 }
26
27 .card-img-top{
28 width:100%;
29 height:auto;
30 }
31
header {
32 padding-bottom:50px;
33 }
34
35 .display-2 {
36 font-family:'Lato';
font-size:60px;
37 line-height:1;
38 font-weight:300;
39 color:#fff
40
41
42
43
44 }
45
46 .learn {
47 font-family:'Lato';
48 font-size:27px;
line-height:1.4;
49 font-weight:300;
50 color:#fff;
51 }
52
53 .jumbotron-fluid {
54 padding:0;
}
55
56
57
58
59
Next, we will set up some styles for our parallax effect via parallax and parallax-pattern-
overlay class.

1
2 .parallax {
3 text-align:center;
background-position:center center;
4 background-repeat:no-repeat;
5 background-size:cover;
6 background-attachment:fixed!important;
7 overflow:hidden;
}
8
9
.parallax-pattern-overlay {
10 background-image:url(../img/pattern.png);
11 background-repeat:repeat;
12 }
13
For our heading class we need to set up a specific maximum width of 960px and then give
each header tags some font-size and some more styles to emphasize each.

1 .heading {
padding-bottom:15px;
2
text-align:center;
3 max-width:960px;
4 margin:0 auto;
5 padding-top:80px;
6 }
7
8
9
.heading h2 {
10
font-weight:600;
11 font-family:'Raleway';
12 font-size:40px;
13 color:#333;
14 margin:0;
padding:5px;
15 }
16
17 .heading h3 {
18 font-size:1em;
19 line-height:1.7;
20 }
21
#site-title {
22 max-width:150px;
23 }
24
25
Next, let’s add some styles to our forms. The Bootstrap default forms will have a normal
amount of padding and a nice border radius but for our one-page responsive template we’re
going to apply a flat design concept. Copy and paste the styles below.

1 input.form-control {
background:#fff;
2 border:solid 1px #ddd;
3 color:#000;
4 padding:15px 30px;
5 margin-right:3%;
6 margin-bottom:30px;
outline:none;
7 border-radius: 0;
8 }
9
10 textarea.form-control {
11 background:#fff;
12 color:#000;
border:solid 1px #ddd;
13 padding:15px 30px;
14 margin-bottom:40px;
15 outline:none;
16 height:200px;
border-radius: 0;
17 }
18
19 button.contact.submit {
20 background:#333;
21 font-family:'Lato',sans-serif;
22 color:#fff;
font-size:1em;
23
24
25
26
27 font-weight:400;
text-align:center;
28
margin:0;
29 border:none!important;
30 border-radius:3px;
31 padding:15px 45px;
32 }
33
button.contact.submit:hover {
34 background:#563d7c;
35 }
36
37 .form-control:focus{
38 border-color: #563d7c;
39 outline: 0;
}
40
41 .done {
42 display:none;
43 }
44
45
46
47
Afterward, let’s add styles to the footer. We will set up a nice background color light violet
and give some styles for our footer text and icons. Nothing special here.

1 .footer {
background:#563d7c;
2
margin-top:120px;
3 position:relative
4 }
5
6 .footer .container {
7 padding:60px 0 20px;
}
8
9 .footer ul {
10 margin:0 auto;
11 margin-bottom:30px;
12 margin-top:10px;
13 text-align:center;
list-style-type:none;
14 padding-left:0;
15 }
16
17 .footer ul li {
18 text-align:center;
19
20
21
22
23
display:inline-block;
24 background:rgba(0,0,0,0.2);
25 color:#fff;
26 line-height:45px;
27 margin:0 4px;
width:45px!important;
28 height:45px!important;
29 -webkit-border-radius:3px;
30 border-radius:3px;
31 }
32
33 .footer ul li:hover {
background:#2a2a2a;
34 }
35
36 .footer ul li:hover a {
37 color:#fff;
38 }
39
40 .footer ul li a {
color:#fff;
41 width:42px!important;
42 height:42px!important;
43 }
44
45 .footer ul li a i {
line-height:45px;
46 color:#fff;
47 }
48
49 .footer p {
50 color:#fff;
51 font-size:.9em;
line-height:24px;
52 font-weight:300;
53 text-align:center;
54 text-transform:uppercase;
55 }
56
.footer a,.footer a:hover {
57
color:#fff;
58 }
59
60
61
62
63
As a final touch, customize some elements on 768px viewport via media queries specifically
with some of our columns sizes to make it look good on this screen size.

1
2 @media screen and (max-width:768px) {
3
4 input.contact.col-md-6{
width:40.5%;
5 margin: 15px 15px 0 58px;
6 }
7
8 textarea.contact.col-md-12 {
9 margin: 15px 15px 0 58px;
}
10
11
button#submit.contact.submit{
12 margin: 15px 15px 0 42px;
13 }
14
15 }
16
Conclusion

There you have it! Feel free to customize the design or the code that we set up above.

Remember that at the time of this article, the first alpha version of Bootstrap 4 was just
released — that means there might be few alpha series in the near future so it’s good to
check out their official website once in a while.

If you want to learn more about Bootstrap 4, you can always refer to the
documentation here.

Check out and download to see the Bootstrap 4 template in action.

Did you learn a lot on this tutorial? Leave a comment below and let us know what you think.

You might also like