DuomlyThis post was originally published at https://www.blog.duomly.com/how-to-build-bootstrap-admin-template-tutorial/
Into to building a Bootstrap admin template
Last week I published an article about Bootstrap 5, where we showed you how to build a simple portfolio web page, and it seems like a lot of you really like it.
That’s why today I decided to prepare you a new Bootstrap tutorial, where we are going to build a Bootstrap 5 admin template for the blog management application, step by step.
Also, if you’d like to build a dashboard with Bootstrap 4, remember to check out our previous tutorial here.
For today’s tutorial, you will need three images, one logo, one user image, and one image you like. Also, Bootstrap 5 documentation can help understand what’s going on.
P.S. Of course, I’ve got a video tutorial, where you can go through the building process with me. So, if you like coding with Youtube, or prefer to watch then read, join me here.
Let’s start!
1. How to start the Bootstrap template?
We've already spoken in the previous article about starting the Bootstrap project, but to not make it complicated, let's repeat the steps, so you'll remember how to do it.
Let's start by creating a folder for our admin template. Inside the folder, you need to create a simple index.html file, and there we are going to implement CDNs with Bootstrap files. Besides that, I'll also add the styles.css file, which we will create in a second.
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"/>
<title>Admin Panel UI</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css" />
<!-- JavaScript and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
</head>
<body></body>
</html>
Ok, when that's ready, let's go and create the styles.css file in the same folder. We will use it for the custom styles for our admin template.
2. How to build horizontal navigation in Bootstrap?
Now, we can start creating the first elements of our admin template. In this project, we will have two navigations, one horizontal and one vertical.
Let’s start by creating the horizontal one first, and inside the body tags, let’s add the following code.
<!-- Top Nav -->
<nav class="py-3 px-4 navbar navbar-expand-lg auto-hiding-navbar fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex" id="navbarSupportedContent">
<form class="search-form d-flex ml-auto mt-1 mb-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Hello Admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">User Settings</a>
<a class="dropdown-item" href="#">Create New Account</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Logout</a>
</li>
</ul>
</div>
</nav>
<!-- End Top Nav -->
Great, we have the first element ready, so we need to make some custom styling. Let’s open the styles.css file, and let’s add a few lines of CSS.
body {
background: #f6f6f6;
height: 100vh;
}
nav {
background-color: white;
}
.search-form {
width: 50%;
}
Great! Let’s now add the vertical navigation.
3. How to add vertical navigation in Bootstrap?
In most dashboards or admin templates, the vertical menu is a very common feature, so that we will add one in our admin template.
Let’s go to the index.html file and add the following code.
<div class="row">
<!-- Sidebar -->
<div class="col-1">
<nav id="sidebar" class="col sidebar">
<a class="navbar-brand" href="#">
<img src="./assets/logo.png" alt="logo" class="logo" />
</a>
<ul class="nav flex-column vertical-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-house-door-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 10.995V14.5a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5V11c0-.25-.25-.5-.5-.5H7c-.25 0-.5.25-.5.495z"/>
<path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-file-post" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4z"/>
<path d="M4 5.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-7z"/>
<path fill-rule="evenodd" d="M4 3.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z"/>
<path fill-rule="evenodd" d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z"/>
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bar-chart-line-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<rect width="4" height="5" x="1" y="10" rx="1"/>
<rect width="4" height="9" x="6" y="6" rx="1"/>
<rect width="4" height="14" x="11" y="1" rx="1"/>
<path fill-rule="evenodd" d="M0 14.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5z"/>
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chat-left-dots" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v11.586l2-2A2 2 0 0 1 4.414 11H14a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
<path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
</a>
</li>
</ul>
</nav>
</div>
<!-- End Sidebar -->
In this section, we used Bootstrap icons, so feel free to take a look at the Bootstrap icons section.
Besides that, I used here the first image, logo.png.
Now, it’s time to make some styling to make our vertical navigation good looking.
#sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 9999;
box-shadow: -1px 0 0 rgba(0, 0, 0, .1);
max-width: 10vw;
}
#sidebar .nav-item {
text-align: center;
padding: 25px 0;
}
#sidebar .nav-item a {
color: rgba(0,0,0,.2);
}
#sidebar .nav-item a.active {
color: #0d6efd;
}
.vertical-nav {
margin-top: 20vh;
}
.logo {
max-height: 30px;
margin: 15px 25px;
}
a.navbar-brand {
text-align: center;
width: 100%;
display: block;
}
Great, one of the most significant elements of the dashboard is ready. Let’s got to the main page of our admin template.
4. Building sections in the admin template
When the navigations are ready, we can start planning what we are going to put inside the main page of our admin dashboard.
We will add two rows, with five cards to the main page of our admin template. The first element we are going to put in is a card with recently published posts.
Let’s add the code.
<div class="main col-11">
<div class="row first-row">
<div class="col-4">
<section id="recently-posted">
<div class="card">
<div class="card-header">
Recently Published Posts
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row g-0">
<div class="col-md-3">
<img src="./assets/post1.jpeg" alt="Post One Photo" class="img-fluid rounded-lg">
</div>
<div class="col-md-9">
<div class="card-body">
<h6 class="card-title">Lorem ipsum dolor sit amet...</h6>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Added 3 days ago</small></p>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row g-0">
<div class="col-md-3">
<img src="./assets/post1.jpeg" alt="Post One Photo" class="img-fluid rounded-lg">
</div>
<div class="col-md-9">
<div class="card-body">
<h6 class="card-title">Lorem ipsum dolor sit amet...</h6>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Added 3 days ago</small></p>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row g-0">
<div class="col-md-3">
<img src="./assets/post1.jpeg" alt="Post One Photo" class="img-fluid rounded-lg">
</div>
<div class="col-md-9">
<div class="card-body">
<h6 class="card-title">Lorem ipsum dolor sit amet...</h6>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Added 3 days ago</small></p>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
</div>
In this code, we used the second photo, so remember to add the photo with your path and file name.
The first section is there, and that’s also the time to add another column to this row with another section. We will take care of the styling after all elements are available.
Inside the row div, and below the col-4 let’s add the next sections - statistics.
<div class="col-8">
<section id="statistics">
<div class="card">
<div class="card-header">
Statisctics
</div>
<div class="stats py-3 px-4">
<div class="py-4">
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 57%" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="card-text">Visited the blog</p>
</div>
<div class="py-4">
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="card-text">Read posts</p>
</div>
<div class="py-4">
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="card-text">Subscribed to the newsletter</p>
</div>
<div class="py-4">
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="card-text">Subscribed to the newsletter</p>
</div>
</div>
</div>
</section>
</div>
The first row of the admin panel is there, not styled yet, but we will jump into styling while we will have all the elements.
That’s why we need to add the missing row of our admin template.
Let’s create the second row, just when the first row tag closes, and let’s add the third element, which is a card with the latest comments.
<div class="row second-row">
<div class="col-4">
<section id="recently-commented">
<div class="card">
<div class="card-header">
Latest comments
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row g-0">
<div class="col">
<div class="card-body">
<h6 class="card-title">Username</h6>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. <small class="text-muted">Added 3 days ago</small></p>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row g-0">
<div class="col">
<div class="card-body">
<h6 class="card-title">Username</h6>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. <small class="text-muted">Added 3 days ago</small></p>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row g-0">
<div class="col">
<div class="card-body">
<h6 class="card-title">Username</h6>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. <small class="text-muted">Added 3 days ago</small></p>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
</div>
</div>
Another card is there, so the admin can see the newest comments that were done on the blog.
There are still two more cards that we will add. The next one will be the simple form where notes can be typed and saved for later.
So, still inside the <div class=„row second-row”> let’s add another column with section.
<div class="col-5">
<section id="notes-form">
<div class="card">
<div class="card-header">
Write a note
</div>
<div class="card-body px-4">
<form>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Your Note</label>
<textarea rows=7 class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
</div>
</section>
</div>
Now, we can add the last element, which is a card with the most active user. In this card, we will use the user image and badge to show the number of comments that the user did in the selected time.
Still inside the <div class=„row second-row”> let’s add the last element.
<div class="col">
<section id="active-user">
<div class="card mt-2">
<div class="card-header">
Most Active User
</div>
<div class="card-body text-center">
<div class="img-container mb-4">
<img src="./assets/user.jpeg" class="card-img-top" alt="User">
</div>
<h6 class="card-title mb-4">John Doe</h6>
<p class="card-text">Commented <span class="badge bg-light text-dark">198</span> times</p>
<p class="card-text">Posted <span class="badge bg-light text-dark">12</span> articles</p>
</div>
</div>
</section>
</div>
If all the elements are there, let’s go to our styles.css file, and let’s make it look good!
5. Styling elements
Now your admin template may look a little bit messy because we need to set some more paddings, margins, and sizes!
Let’s open the styles.css file, and let’s add a few lines of CSS code.
section {
margin: 10px;
}
.main {
padding: 2rem;
padding-top: calc(4rem + 74px)
}
.main .first-row, .main .second-row {
padding-bottom: 3rem;
}
.main .row .card {
height: 100%;
}
.card {
border: 0;
box-shadow: 2px 0 10px rgba(0, 0, 0, .1);
max-height: 100%;
}
.card-header {
background: white;
font-weight: 700;
padding: 20px;
}
.card-body {
padding: 0.5rem;
font-size: 12px;
}
#recently-posted .card img {
padding-top: 0.5rem;
}
.stats .card-text {
padding-top: 5px;
padding-left: 2px;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
}
.img-container {
height: 120px;
width: 120px;
text-align: center;
margin: auto;
display: block;
margin-top: 20px;
}
.card-img-top {
height: 100%;
width: 100%;
border-radius: 100%;
}
.badge {
font-size: 18px;
}
And voila! Our admin template is ready! Here’s how it should look like!
Congratulations!
Conclusion
We’ve just created another project using Bootstrap 5! So, now you know how to build a simple web page and also how to create an admin template.
If you didn’t read the first tutorial about Bootstrap 5, where you can also find out what’s new in this version, check here:
How to Create a Simple Web Page Using Bootstrap 5
If you’d like to take a look at the dashboard that we’ve done with Bootstrap 4, check it here:
How to Build Dashboard With Bootstrap Tutorial
Besides that, feel free to join us at Duomly where we have a Bootstrap course, where you can learn how to build an e-commerce.
Thank you for reading,
Anna from Duomly
