Table of Contents
How do you “learn” Bootstrap? You start building!
Today, we’ll dive into the world of Bootstrap, a powerful front-end framework that helps you create responsive, stylish websites with minimal effort.
Hey! Please note I said “minimal effort” not “no effort”—there is a learning curve, be forewarned.
We’re going to use Bootstrap to style Frontend Mentor’s Fylo dark theme landing page. Of course, we’re also going to build the landing page.
Yet again a project inspired by DM’s never-ending trials in becoming a designer. Those classes are pushing his no-stress boundaries 😬
Related: How to Build an E-commerce Product Page with React and Vite
That’s when this busy dev comes to the rescue (no joke, I’m extremely busy, he owes me big time).
Bootstrap is a fantastic tool to have under your belt so be excited!
This project jogged into memory my first Bootstrap project 🥲 It was far less awesome looking and used an older version of Bootstrap (since time is fluid y’all) but, in case you’re curious, I thought of sharing it.
We’ll cover everything from setting up Bootstrap to building out that responsive dark theme landing page.
Let’s go!
What is Bootstrap?
Three fun facts about Bootstrap:
- It’s open-source
- It’s a front-end framework
- It was developed by Twitter
I bet the third must’ve come as a surprise 😏
Bootstrap is designed to help you build responsive, mobile-first websites quickly and efficiently.
With a collection of pre-styled and ready-to-use components like navigation bars, modals, buttons, forms, and more, Bootstrap lets you focus on designing and developing.
Why Use Bootstrap?
Bootstrap offers several benefits such as:
- Responsive design: Bootstrap’s grid system and pre-styled components make creating websites that look great on any device easy.
- Consistent styling: Bootstrap ensures a consistent look and feel across your site, as all components follow the same design principles.
- Time efficiency: With a wide range of ready-to-use components, you can save time on styling and focus more on functionality.
- Community support: As a popular framework, Bootstrap has a large community and plenty of resources, tutorials, and plugins available.
That said, Bootstrap is one of many available frameworks. Alternatives like Tailwind CSS and Material UI follow a similar approach in simplifying design while offering their own set of features.
Want to see Material UI in action? Check out my updated portfolio built using Gatsby and Material UI!
In this project, we’ll also customize components to match the project’s design criteria.
Setting up Bootstrap
Before we start using Bootstrap, we need to set it up in the project’s HTML file.
There are a few ways to get started with Bootstrap, but I’ll focus on the CDN (Content Delivery Network) method. By using a CDN, I can quickly and easily add Bootstrap to the project without having to download any files.
Note 🤓
A CDN is a network of servers that deliver web content to users based on their geographic location.
Here’s how to do it:
- Open the HTML file in a text editor
- Add the following
<link>tag in the<head>section to include the Bootstrap CSS:
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">Tip: The contents of the
<link>tag depend on when you’re reading this and the version of Bootstrap available at the time!
There’s a third step of adding the necessary script files to allow component functions (like clicks on modals and tooltips), however, we’re not using any in this project so we’ll skip this step.
Using Bootstrap components
Now that we have Bootstrap set up, let’s start using its components to style our HTML elements. We’ll cover some of the most commonly used components: the grid system and flexbox, navigation bar, buttons, and form.
Bootstrap provides a flexible and responsive navigation bar component. We’ll use navbar to style a responsive navigation header that consists of the logo and navigation menu:
<div class="lpWrap">
<nav class="navbar pt-4">
<div class="navWrapper container">
<div id="logo">
<div class="logoWrapper nav-brand">
<a href="#">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/logo.svg>" alt="Fylo logo" width="100" class="mt-2">
</a>
</div>
</div>
<div id="navMenu">
<div class="menuWrapper">
<ul class="navbar-nav d-flex flex-row align-items-center">
<li class="nav-item"><a href="#" class="nav-link">Features</a></li>
<li class="nav-item ms-4 ms-md-5"><a href="#" class="nav-link">Team</a></li>
<li class="nav-item ms-4 ms-md-5"><a href="#" class="nav-link">Sign In</a></li>
</ul>
</div>
</div>
</div>
</nav>
....Rest of code I’ll use flexbox to display elements like the nav menu which consists of a list of menu items.
Boostrap classes: d-flex flex-row align-items-center (items centered in a row).
I’m also heavily setting visual formatting using margins and paddings with classes like pt-4 (padding-top) and mt-2 (margin-top).
The margins of the nav items will be responsive when specifying screen size, ms-md-5 (margin-start, or margin-left, increasing on medium-sized screens and larger).
I’ve already declared root styles of the project in CSS. This is where we’ll customize Bootstrap to match design requirements.
:root {
--primary-intro-email: hsl(217, 28%, 15%);
--primary-main: hsl(218, 28%, 13%);
--primary-foot: hsl(216, 53%, 9%);
--primary-testimonials: hsl(219, 30%, 18%);
--accent-cyan: hsl(176, 68%, 64%);
--accent-blue: hsl(198, 60%, 50%);
--accent-red: hsl(0, 100%, 63%);
--neutral-white: hsl(0, 0%, 100%);
--fs-body: 14px;
--fm-ext: Raleway;
--fm-body: "Open Sans";
--fw-light: 400;
--fw-bold: 700;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
background: var(--primary-intro-email);
color: var(--neutral-white);
font-family: var(--fm-body);
font-size: var(--fs-body);
}Bootstrap buttons and position
Next, let’s add a header comprised of the main image, intro text, and action button.
<header>
<div class="heroWrapper container text-center">
<div class="heroImg mx-auto w-100">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/illustration-intro.png>" alt="Intro header illustration" class="respImg img-fluid mx-auto d-block mt-4 mb-3">
</div>
</div>
<div class="wave position-relative">
<div class="container text-center">
<hgroup class="px-md-3 px-sm-5 w-100 mx-auto position-relative">
<h1>All your files in one secure location, accessible anywhere.</h1>
<p class="px-3 mt-3 w-100 mx-auto">Fylo stores all your most important files in one secure location. Access them wherever vouneed share and collaborate with friends, family, and co-workers.</p>
</hgroup>
<button class="actionBtn btn btn-light border-0 mb-5 rounded-pill">Get Started</button>
</div>
<div class="desktop-bg w-100 d-none d-sm-block position-absolute bottom-0 center-50 z-n1">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/bg-curvy-desktop.svg>" alt="" class="img-fluid mx-auto h-100">
</div>
<div class="mobile-bg w-100 h-100 d-block d-sm-none position-absolute bottom-0 center-50 z-n1">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/bg-curvy-mobile.svg>" alt="" class="img-fluid mx-auto w-100 h-100">
</div>
</div>
</header>We’re using responsive image classes like img-fluid along custom styles to ensure the image resizes accordingly.
The button gets its own Bootstrap styles to form a pill shape. But I go in with custom CSS for the background.
Note 🔍
I’m eyeballing the background gradient since there’s no access to Figma on a free account.
I, then, use position to create the textured wave background illusion along responsive display classes. With z-index to layer the wave backgrounds, it’s essentially all Bootstrapped into action with no customization. Neat, huh?
Bootstrap grid system
With Bootstrap’s grid system, we can create responsive layouts with ease. It uses a series of containers, rows, and columns to arrange content.
I’ll use the grid system in setting up the services section of the landing page. The service items are in a 2×2 grid, stacking on mobile screens.
<div id="services" class="container">
<div class="servicesWrapper mx-auto py-5">
<ul class="servicesList m-0 p-0 text-center mx-auto w-100 container">
<div class="row">
<li class="serviceItem col-md-6 py-4 px-5">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/icon-access-anywhere.svg>" alt="" class="img-fluid mb-3" width="50">
<p class="serviceTitle fw-semibold mb-2 fs-6">Access your files, anywhere</p>
<p class="serviceDetails">The ability to use a smartphone, tablet, or computer to access your account means your files follow you everywhere.</p>
</li>
<li class="serviceItem col-md-6 py-4 px-5">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/icon-security.svg>" alt="" class="img-fluid mb-3" width="40">
<p class="serviceTitle fw-semibold mb-2 fs-6">Security you can trust</p>
<p class="serviceDetails">2-factor authentication and user-controlled encryption are just a couple of the security features we allow to help secure your files.</p>
</li>
</div>
<div class="row">
<li class="serviceItem col-md-6 py-4 px-5">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/icon-collaboration.svg>" alt="" class="img-fluid mb-3" width="60">
<p class="serviceTitle fw-semibold mb-2 fs-6">Real-time collaboration</p>
<p class="serviceDetails">Securely share files and folders with friends, family and colleagues for live collaboration. No email attachments required.</p>
</li>
<li class="serviceItem col-md-6 py-4 px-5">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/icon-any-file.svg>" alt="" class="img-fluid mb-3" width="60">
<p class="serviceTitle fw-semibold mb-2 fs-6">Store any type of file</p>
<p class="serviceDetails">Whether you're sharing holidays photos or work documents, Fylo has you covered allowing for all the types to be securely stored and shared.</p>
</li>
</div>
</ul>
</div>
</div>In the above code, we’re creating a container with two columns that will each take up half the width of the row on medium-sized screens and larger.
Tip❓
Wondering how each columns is half the width of the row? You can tell bycol-md-6where 6 is half of the 12-column span of the Bootstrap grid.
Each cell in a row holds an icon, title, and description.
Meanwhile, for the demo section where we have an image along with a description for seeing how the product works, we’ll implement a flex layout.
<div id="demo" class="container pb-5">
<div class="demoWrapper d-flex flex-column align-items-center flex-lg-row px-lg-5 my-5 justify-content-evenly gap-lg-5">
<div class="demoImg">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/illustration-stay-productive.png>" alt="Demo illustration" class="w-100">
</div>
<div class="demoInfo px-md-0 px-4 mt-lg-0 mt-5">
<hgroup>
<h2 class="w-75">Stay productive, wherever you are</h2>
<p>Never let location be an issue when accessing your files. Fylo has you covered for all of your file storage needs.</p>
<p>Securely share files and folders with friends, family and colleagues for live collaboration. No email attachments required.</p>
</hgroup>
<div class="demoActionWrapper position-relative d-inline-block">
<div class="demoAction">
<a href="">See how Fylo works</a>
<svg width="16" height="16" xmlns="<http://www.w3.org/2000/svg>" xmlns:xlink="<http://www.w3.org/1999/xlink>"><defs><circle id="b" cx="6" cy="6" r="6"/><filter x="-25%" y="-25%" width="150%" height="150%" filterUnits="objectBoundingBox" id="a"><feOffset in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.384313725 0 0 0 0 0.878431373 0 0 0 0 0.850980392 0 0 0 0.811141304 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><g transform="translate(2 2)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="#62E0D9" xlink:href="#b"/></g><path d="M8.582 6l-.363.35 1.452 1.4H5.333v.5h4.338L8.22 9.65l.363.35 2.074-2z" fill="#1B2330"/></g></svg>
</div>
</div>
</div>
</div>
</div>The demo section is a simplistic layout relative to the services section so a flex container will suit us well. We’ll need to make sure we have two columns on big screens and stacked ones on small screens.
Similarly, we carry the flex container properties in the next section, the testimonials.
<div id="testimonials" class="position-relative py-5">
<div class="w-75 mx-auto">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/bg-quotes.png>" alt="" class="w-100">
<div class="testimonialsWrapper w-100 position-relative mb-5 d-flex flex-column gap-3 flex-lg-row align-items-center mx-auto">
<div class="card p-4">
<p>Fylo has improved our team productivity by
an order or magnitude. Since making the switch our team has become a well-oiled collaboration machine.</p>
<div class="profile d-flex gap-2 align-items-center">
<div class="avatar">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/profile-1.jpg>" alt="" class="rounded-circle">
</div>
<div class="data">
<span class="name d-block">Satish Patel</span>
<span class="position">Founder & CEO, Huddle</span>
</div>
</div>
</div>
<div class="card p-4">
<p>Fylo has improved our team productivity by
an order or magnitude. Since making the switch our team has become a well-oiled collaboration machine.</p>
<div class="profile d-flex gap-2 align-items-center">
<div class="avatar">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/profile-2.jpg>" alt="" class="rounded-circle">
</div>
<div class="data">
<span class="name d-block">Bruce McKenzie</span>
<span class="position">Founder & CEO, Huddle</span>
</div>
</div>
</div>
<div class="card p-4">
<p>Fylo has improved our team productivity by
an order or magnitude. Since making the switch our team has become a well-oiled collaboration machine.</p>
<div class="profile d-flex gap-2 align-items-center">
<div class="avatar">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/profile-3.jpg>" alt="" class="rounded-circle">
</div>
<div class="data">
<span class="name d-block">Iva Boyd</span>
<span class="position">Founder & CEO, Huddle</span>
</div>
</div>
</div>
</div>
</div>
</div>Here we have three cards that contain customer reviews. To achieve the desired layout, I’ll use a combination of flex properties that are nested. That is, we have a flex wrapper element with three card elements. Each card has, in turn, a profile section that uses flex to position the avatar along with the personal information.
Bootstrap form component
Moving onto the signup section, we’ll create a form element that requests a user to submit an email. When a user submits the form, the entered email is validated.
I’ll start by once again using Bootstrap grid along flex to create a responsive component.
<div id="signup" class="w-100 mx-auto">
<div class="row">
<div class="signupWrapper px-4 py-5 py-md-4 px-md-5 rounded text-center col-lg-8 col-11 mx-auto">
<hgroup>
<h3 class="fs-5 fw-bold">Get early access today</h3>
<p class="mx-auto">It only takes a minute to sign up and our free starter tier is extremely generous. If you have any questions, our support team would be happy to help you.</p>
</hgroup>
<div class="signupForm mt-4">
<form action="." class="d-flex flex-column flex-lg-row gap-4 is-valid">
<div class="col-lg-8">
<input type="email" placeholder="[email protected]" class="rounded-pill py-3 px-3
w-100 border border-0" />
<div class="email-feedback visually-hidden text-start ms-5">Please enter a valid email address</div>
</div>
<button type="submit" class="actionBtn rounded-pill py-3 border-0 col-lg-4 px-lg-3">Get Started For Free</button>
</form>
</div>
</div>
</div>
</div>Here we have a single row with a wrapper component that uses responsive Bootstrap column classes to determine its resize behavior.
Forms are an essential part of any website, and Bootstrap makes them look great with minimal effort.
That said, I’m not using Bootstrap form classes for the form itself since it’ll demand overriding a lot of their styles with custom CSS. However, I am using Bootstrap’s form validation classes along with some JavaScript.
function validateEmail(email) {
// Regular expression for validating an email address
const re = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
return re.test(String(email).toLowerCase());
}
const email = document.querySelector('input[type="email"]');
const btn = document.querySelector(".signupForm .actionBtn");
const feedback = document.querySelector(".email-feedback");
btn.addEventListener("click", function (e) {
e.preventDefault();
let inputVal = email.value;
let validate = validateEmail(inputVal);
if (!validate) {
email.classList.remove("is-valid");
feedback.classList.remove("visually-hidden");
email.classList.add("is-invalid");
feedback.classList.add("invalid-feedback");
} else {
email.classList.remove("is-invalid");
feedback.classList.remove("invalid-feedback");
feedback.classList.add("visually-hidden");
email.classList.add("is-valid");
}
});Want more practice on building forms? Check out How To Build A Sign Up Form Using HTML, CSS, & JavaScript.
Using Bootstrap grid and flex together
As a last-practice round, we’ll use Bootstrap grid and Flexbox to create the footer multi-component layout.
Grid I use primarily to create the appropriate columns and rows while flexbox is a tool for positioning elements within their respective placements.
<div class="container">
<div class="footWrapper row pt-5 pb-4 d-flex flex-column flex-lg-row gap-5 gap-lg-0 mx-3 mx-lg-0">
<div class="logoWrapper mb-lg-4">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/logo.svg>" alt="Fylo logo">
</div>
<div class="contactWrapper d-flex flex-column justify-content-between align-items-start col-lg-6 gap-4">
<div class="contactInfo d-flex flex-column flex-lg-row gap-lg-5">
<div class="location d-flex gap-3 w-50">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/icon-location.svg>" alt="" height="20" class="mt-2 ps-1">
<p>Lorem ipsum dolor sit amet, consectetu adipiscing elit, sed do eismod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="getInTouch d-flex flex-column gap-3">
<div class="phone">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/icon-phone.svg>" alt="" class="me-3">
<span>+1-543-123-4567</span>
</div>
<div class="email">
<img src="<https://thehelpfultipper.github.io/frontendmentor_drktheme_landing/images/icon-email.svg>" alt="" class="me-3">
<span>[email protected]</span>
</div>
</div>
</div>
</div>
<div class="footMenu d-flex align-items-start col-lg-4 ">
<ul class="m-0 p-0 d-flex flex-column flex-md-row justify-content-around w-100 gap-3 gap-lg-0">
<div>
<li><a href="">About Us</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">Press</a></li>
<li><a href="">Blog</a></li>
</div>
<div>
<li><a href="">Contact Us</a></li>
<li><a href="">Terms</a></li>
<li><a href="">Privacy</a></li>
</div>
</ul>
</div>
<div class="footSocials d-flex align-items-start justify-content-center gap-3 col-lg-2">
<div class="iconWrapper fb">
<ion-icon name="logo-facebook"></ion-icon>
</div>
<div class="iconWrapper twt">
<ion-icon name="logo-twitter"></ion-icon>
</div>
<div class="iconWrapper ig">
<ion-icon name="logo-instagram"></ion-icon>
</div>
</div>
</div>
...For the social media part, I use IonIcons to get free social icons.
Tip 🧐
Remember to load any necessary scripts for any external libraries or tools you may embed in your projects!
How to find Bootstrap styles and components
If there’s anything Bootstrap isn’t limited in, it’s documentation 😅
Bootstrap has extensive documentation and examples to help you find styles and components.
Some ways to find classes and components are:
- Bootstrap documentation: The official Bootstrap documentation is the best place to start. It includes detailed information on all the components, along with examples and usage guidelines.
- Bootstrap cheat sheets: Online cheat sheets provide quick references to Bootstrap classes and components. They can prove handy when wanting to find specific styles quickly.
- CodePen and JSFiddle: These online code editors allow you to experiment with Bootstrap components and see the results in real-time. The best part is that you can find many user-generated examples that can inspire your projects.
- Bootstrap themes and templates: There are many free and premium Bootstrap themes and templates available online. These can give you a head start on your design and show you how to use Bootstrap components in real-world projects.
It’s a wrap
Well, here we are again wrapping up another great project.
This time we’ve completed a neat dark-themed landing page, checked off another Frontend Mentor project, and gotten a hand in Bootstrap!
As a little recap, Bootstrap is a powerful and versatile tool that helps us create beautiful, responsive websites with ease.
Whether you’re a beginner, an experienced developer, a designer with some understanding of basic HTML and CSS, or a curious soul, Bootstrap’s pre-styled components and responsive grid system make it a valuable development tool.
With this guide, you’ll have more than dipped your toes into Bootstrap 👏
Remember, practice makes better. Experiment with different components and try out new layouts because the more you use Bootstrap, the more comfortable you’ll become with it. And if you need a little help, check out this solution’s GitHub repo.
Just don’t be disappointed if you find yourself consistently referencing the documentation. There is no reason to expect yourself to remember everything 😵💫
Have fun building, I’ll see ya on the next one!