Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to clone sidebar by default using Bootstrap?
On a web page, a sidebar is a vertical column that is placed either on the left or right side. Further information or navigation links are frequently displayed using it. The responsive and mobile-first "offcanvas" component of Bootstrap slides into view from the side of the screen.
Bootstrap, a CSS framework, offers several tools and capabilities for creating websites that are responsive on all devices. The sidebar is one of Bootstrap's most frequently utilized elements. This divides the page into 12 columns, and the sidebar is made using this framework. We will use the CSS grid framework with some unique styles to make the sidebar.
Approach - 1
In this example we will create a nav sidebar using bootstrap. The sidebar will get cloned with bootstrap.
Algorithm
Step-1Create a new HTML file and include the Bootstrap CSS and JavaScript files.
Step-2 Add a container div and a row div inside it.
Step-3 Add divs with <ul> <li> tags to create rows in sidebar.
Step-4 Add the navigation menu items in rows.
Step-5 Add the main content of the page inside the second div.
Step-6> Customize the CSS styles to make the sidebar fixed and responsive.
Example
<html>
<head>
<style>
.sidebar {
background-color: skyblue;
height: 100%;
width: 500px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
padding-right: 60px;
transition: 0.5s;
}
.sidebar h2,
li {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: white;
display: block;
/* Transition effect of h2 and li */
transition: 0.3s;
}
.sidebar li:hover {
/* Sidebar items change color
when hovered over */
color: white;
}
.content {
background-color: white;
position: absolute;
top: 0;
left: 200px;
right: 0;
bottom: 0;
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}
input[type="checkbox"] {
display: none;
}
/* Toggling of sidebar */
input:checked~.content {
left: 0;
}
input:checked~label {
left: 0;
}
/* Styling of the button */
label {
z-index: 2;
position: absolute;
top: 0;
left: 200px;
background-color: Skyblue;
color: white;
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}
</style>
</head>
<body>
<!-- This division contains
the sidebar and its content -->
<div class="main-wrap">
<input id="slide-sidebar" type="checkbox"
role="button"/>
<label for="slide-sidebar">
<span>menu</span>
</label>
<div class="sidebar">
<h2>ABC.com</h2>
<ul>
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>Career</li>
<li>Contact Us</li>
</ul>
</div>
<div class="content">
<h1 style="color: Blue;">
Welcome To ABC Business
</h1>
</div>
</div>
</body>
</html>
Approach - 2
In this example, we will design a sidebar that opens on a button click.
Algorithm
Step-1 Create a new HTML file and include the Bootstrap CSS and JavaScript files.
Step-2 Add the div and navigation menu items in rows.
Step-3 Add the main content of the page inside the second div.
Step-4 Customize the CSS styles to make the sidebar fixed and responsive.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.sidebar {
width: 0;
height: 100%;
/* 0 width */
position: fixed;
/* Fixed place */
z-index: 1;
/* Stay on top */
top: 0;
left: 0;
background-color: skyblue;
/* Disable horizontal scroll */
overflow-x: hidden;
/* Place content 60px from the top */
padding-top: 60px;
/* Transition effect to slide
in the sidebar */
transition: 0.5s;
}
/* The sidebar links */
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: white;
display: block;
transition: 0.3s;
}
/* Mouse over the navigation
links, to change their color */
.sidebar a:hover {
color: blue;
}
/* Position and style the close
button at top right corner */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* The button used to open the sidebar */
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: skyblue;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: skyblue;
}
#main {
/* If you want a transition effect */
transition: margin-left 0.5s;
padding: 20px;
}
@media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
</style>
</head>
<body>
<div id="newSidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn"
onclick="closeNav()">
Menu
</a>
<a href="#">This is sidebar menu</a>
</div>
<div id="main">
<h1 style="color: Blue;">
Welcome to ABC Business
</h1>
<button class="openbtn" onclick="openNav()">Menu
</button>
<h2>
Click button to open menu </h2>
</div>
<script>
function openNav() {
document.getElementById(
"newSidebar").style.width = "200px";
document.getElementById(
"main").style.marginLeft = "200px";
}
function closeNav() {
document.getElementById(
"newSidebar").style.width = "0";
document.getElementById(
"main").style.marginLeft = "0";
}
</script>
</body>
</html>
Conclusion
Using Bootstrap to clone a sidebar is a quick and efficient approach to providing practical functionality and enhancing user interaction with your website. Understanding the components of Bootstrap and how to use them to build a sidebar is crucial to make a responsive website. While cloning a sidebar, it's also crucial to keep in mind the particular requirements of your website and its visitors.
174 Views
