Developing Top Header Section of the Bootstrap Website | Tutorial – 6
In this bootstrap framework responsive website development tutorial we will develop the top header section of our portfolio website.
We will learn –
- How to use external CSS file to add styling
- How to use bootstrap spacing utilities or responsive padding and margin
- How to use the fontawesome icons
- How to use the bootstrap grid system
Setting up everything Library into our Project Offline –
Download this entire test code folder which will the full folder hierarchy with the necessary library files already set up – DOWNLOAD HERE
The folder hierarchy should look like this –
- test code
- bootstrap
- css
- bootstrap.min.css
- js
- bootstrap.min.js
- jquery-3.3.1.slim.min.js
- popper.min.js
- css
- css
- style.css (our custom css file)
- fontawesome-free-5.6.3-web
- css
- all.css (the only one we need to link in our project for font awesome icons)
- js
- etc
- etc
- css
- default.html
- bootstrap
If you already have the entire code folder from the previous tutorial, then the only changes you have to do is in the default.html page and style.css page as give below –
default.html page –
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="fontawesome-free-5.6.3-web/css/all.css">
<!-- Our Custom CSS style sheet -->
<link rel="stylesheet" href="css/style.css">
<title>Home - Simple Snippets</title>
</head>
<!-- xs<576 | 576<sm<768 | 768<md<992 | 992<lg<1200 | 1200<xl -->
<body>
<header>
<div class="p-1" id="topHeader">
<div class="container">
<div class="row">
<div class="col-12 text-right">
<a class="p-1" href="tel:+919090909090"> <i class="fas fa-phone"></i> +(91) 9090909090 </a>
<a class="p-1" href="mailto:[email protected]"> <i class="fas fa-envelope"></i> [email protected] </a>
</div>
</div>
</div>
</div>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="bootstrap/js/jquery-3.3.1.slim.min.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>style.css page –
.myrows{
border: 3px solid green;
padding: 5px;
}
.mycols{
border: 3px solid red;
}
.mycontainer{
background-color: aqua;
}
#topHeader{
border-bottom: 1px solid #ebebeb;
}
#topHeader a{
color: #2c3e50;
font-weight: 600;
font-size: 0.89rem;
}