Me: Please write an bootstrap5 template for me. The layout has two column and the left is of fixed width and the right occupied the remaining space. The left side is used for menus and the right is for main content. The layout should be responsive and on mobile the left column should become a top navbar on top.
ChatGPT:
Sure, here's a Bootstrap 5 template that meets your requirements:
php
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 Template</title>
<!-- Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" integrity="sha512-DK5d07CpGXplLHRRXLsbL0DxetP/lK9zTkDKk1t0Q2t0vxqb+ztK1hA7Vg5a0Z5O5Zo9Rr0ed/NSJr1y3+1fMw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Custom CSS -->
<style>
/* Set fixed width for left column */
.left-column {
width: 250px;
}
/* Set top navbar for mobile */
@media (max-width: 991.98px) {
.left-column {
width: 100%;
}
.top-navbar {
display: block;
}
.left-menu {
display: none;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Left Column -->
<div class="col-lg-3 left-column">
<nav class="top-navbar d-none d-lg-block">
<!-- Top Navbar for Desktop -->
</nav>
<div class="left-menu">
<!-- Left Menu for Desktop -->
</div>
</div>
<!-- Right Column -->
<div class="col-lg-9">
<!-- Main Content -->
</div>
</div>
</div>
<!-- Bootstrap 5 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" integrity="sha512-j9tCjs7mClvofMyuV7wY+Z5u5D5B5l5uV7THF9yLG+aeD8NvMKNRr0YHkNy2QW3U8bJG/Am6U0yhxUdtvrW8Cg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
Here's an explanation of the code:
- The
container-fluidclass is used to create a full-width container. - The
rowclass is used to create a row for the two columns. - The
col-lg-3class is used to set the width of the left column to 3 columns on large screens and above. - The
col-lg-9class is used to set the width of the right column to 9 columns on large screens and above. - The
left-columnclass is a custom class that sets a fixed width of 250px for the left column. - The
top-navbarclass is a custom class that is used to create a top navbar for mobile screens. - The
left-menuclass is a custom class that is used to create a left menu for desktop screens. - The
d-noneandd-lg-blockclasses are Bootstrap classes that are used to hide the top navbar on screens smaller than large and show it on large screens and above. - The
@mediarule is used to apply custom styles for