Get Bootstrap Clone Using Bootstrap
by Keith Rowles • 01/03/2024CSS
Summary
Experimenting using Bootstrap CSS to recreate the get Bootstrap documents website with a sprinkle of css.
- Top navigation bar is responsive with a hamburger menu
- Light and dark mode
- Responsive right side table of contents
I made everything responsive except the left menu.
Tech
- Bootstrap
- CSS
- HTML
- Glitch
HTML
Here are the resources in the head of the document.
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
/>
<!-- local dev server -->
<script src="js/color-modes.js" defer></script>
CSS
/* Page Grid */
.bd-layout {
display: grid;
grid-template-areas: 'sidebar main';
grid-template-columns: 1fr 5fr;
gap: 1.5rem;
}
.bd-gutter {
--bs-gutter-x: 3rem;
}
/* Sidebar */
.bd-sidebar {
grid-area: sidebar;
}
.bd-sidebar {
position: -webkit-sticky;
position: sticky;
top: 5rem;
display: block !important;
height: calc(100vh - 6rem);
padding-left: 0.25rem;
margin-left: -0.25rem;
overflow-y: auto;
}
/* Main */
.bd-main {
grid-area: main;
}
.bd-main {
display: grid;
grid-template-areas:
'intro toc'
'content toc';
grid-template-rows: auto 1fr;
grid-template-columns: 4fr 1fr;
gap: inherit;
}
/* Table of Contents */
.bd-toc {
grid-area: toc;
}
.bd-toc {
position: -webkit-sticky;
position: sticky;
top: 5rem;
right: 0;
z-index: 2;
height: calc(100vh - 7rem);
overflow-y: auto;
}
.bd-toc nav ul {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.bd-toc-collapse {
display: block !important;
}
.bd-toc nav a.active {
font-weight: 500;
}
.bd-toc nav a:hover,
.bd-toc nav a.active {
color: var(--bd-toc-color);
border-left-color: var(--bd-toc-color);
}
.bd-toc nav a {
display: block;
padding: 0.125rem 0 0.125rem 0.75rem;
color: inherit;
text-decoration: none;
border-left: 0.125rem solid transparent;
}
/* Intro Block */
.bd-intro {
grid-area: intro;
}
/* Content Block */
.bd-content {
grid-area: content;
min-width: 1px;
}
main a,
main button,
main input,
main select,
main textarea,
main h2,
main h3,
main h4,
main [tabindex='0'] {
scroll-margin-top: 80px;
scroll-margin-bottom: 100px;
}
@media (max-width: 768px) {
.bd-main {
display: grid;
grid-template-areas:
'intro'
'toc'
'content';
grid-template-rows: auto auto 1fr;
grid-template-columns: 1fr;
gap: inherit;
}
.bd-toc {
height: auto;
position: relative;
top: auto;
}
}
.bi {
width: 1em;
height: 1em;
fill: currentcolor;
}
Demo
Here is a link to the demonstration on Glitch.
Link to Demo