Professional Documents
Culture Documents
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).
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
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
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.
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
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.
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.
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.
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.
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.
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 © 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.
Did you learn a lot on this tutorial? Leave a comment below and let us know what you think.