Preface
Goal: Using Bootstrap for the first time
1: Layout
No. We do not use Bootstrap yet. We need to talk about something more fundamental.
The Document: HTML Skeleton
This tutorial use header
, main
, and footer
.
There is html5 semantic tag for this.
But this could be as simple as html element below.
<!DOCTYPE html>
<html>
<head>
<title>Your mission. Good Luck!</title>
</head>
<body>
<!-- header -->
<p><i>Your mission, should you decide to accept it.</i></p>
<br/>
<!-- main -->
<div>
<p>To have, to hold, to love,
cherish, honor, and protect?</p>
<p>To shield from terrors known and unknown?
To lie, to deceive?</p>
<p>To live a double life,
to fail to prevent her abduction,
erase her identity,
force her into hiding,
take away all she has known.</p>
</div>
<!-- footer -->
<br/>
<p><i>As always, should you be caught or killed,
any knowledge of your actions will be disavowed.</i></p>
</body>
</html>
Open this html artefact in any browser, using your favorite file manager. And have a look at the result.
2: Loading CSS
There are some alternative to load CSS.
For this tutorial. I suggest to use local CSS. Because we are going to make a custom Bootstrap CSS
Using CDN Bootstrap CSS
It is as simple as
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
And if you need the javascript, you can add:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
Directory Preparation
Now consider create directory for respective assets:
-
css
-
js
We only need css
directory for the rest of this chapter.
But later we need other directory as well such as images
, js
, and sass
.
The js
part is only needed for navbar
.
Using Local Bootstrap CSS
You need to download bootstrap.css
first from the official site.
And put the artefact to css
directory.
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
And the bootstrap.css
is here:
Adding Meta
As the official guidance said.
We have to add a few tag on the head
.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Your mission. Good Luck!</title>
3: Bootstrap: Example Class
Now consider having fun for while. And give more example class, and see what happened.
List Group
We need to see if Bootstrap class work correctly.
Consider add this container
and list-group
class.
<div class="container">
<!-- header -->
<p><i>Your mission, should you decide to accept it.</i></p>
<br/>
<!-- main -->
<ul class="list-group">
<li class="list-group-item">
To have, to hold, to love,
cherish, honor, and protect?</li>
<li class="list-group-item">
To shield from terrors known and unknown?
To lie, to deceive?</li>
<li class="list-group-item">
To live a double life,
to fail to prevent her abduction,
erase her identity,
force her into hiding,
take away all she has known.</li>
</ul>
<!-- footer -->
<br/>
<p><i>As always, should you be caught or killed,
any knowledge of your actions will be disavowed.</i></p>
</div>
The Preview
And have a look at the result by opening the file in Browser.
There is more fun than just this. We are going to explore later.
4: Bootstrap: Navbar Class
For the rest of this show case,
I’m using both navbar header
and footer
.
As Header
Navbar lies on header part.
<!-- header -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
As Footer
Navbar also lies on footer part.
<!-- footer -->
<footer class="footer">
<div class="bg-dark text-light text-center">
© 2020.
</div>
</footer>
Additional CSS
To have proper layout, this navbar require additional CSS.
.layout-base {
padding-top: 3rem;
padding-bottom: 2rem;
}
And for the sticky footer. I grab from the official site.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
You should define styles
on <head>
element.
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/sticky-footer.css">
Screenshot
And have fun with the result. Consider open the file in Browser form file manager.
5: Summary
As a summary from this chapter, all the html element is as shown below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Your mission. Good Luck!</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/sticky-footer.css">
</head>
<body>
<!-- header -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<!-- main -->
<div class="layout-base">
<main role="main" class="container">
<ul class="list-group">
<li class="list-group-item">
To have, to hold, to love,
cherish, honor, and protect?</li>
<li class="list-group-item">
To shield from terrors known and unknown?
To lie, to deceive?</li>
<li class="list-group-item">
To live a double life,
to fail to prevent her abduction,
erase her identity,
force her into hiding,
take away all she has known.</li>
</ul>
</main>
</div>
<!-- footer -->
<footer class="footer">
<div class="bg-dark text-light text-center">
© 2020.
</div>
</footer>
</body>
</html>
What is Next ?
There are, some interesting topic about Navigation Bar in Bootstrap. Consider continue reading [ Bootstrap - Navigation Bar - Class ].
Thank you for reading.