Jovian
Sign In
Learn practical skills, build real-world projects, and advance your career

Bootstrap CSS Framework

alt

In today's web development landscape, CSS frameworks play a crucial role in simplifying and expediting the design & development process while reducing the amount of code to be written & maintained.

The Bootstrap CSS framework is a powerful and widely-used toolkit for designing responsive, mobile-first websites. Bootstrap offers a vast array of pre-built components, utility classes, and a responsive grid system.

The following topics are covered in this tutorial:

  • Installing Bootstrap's CSS and JavaScript bundles into a web development project

  • Modifying Bootstrap's default colors & typography using CSS variables & custom selectors

  • Using Bootstrap's breakpoints and grid system for creating mobile-first responsive web pages

  • Leveraging Bootstrap's utility classes for applying layout & style changes without writing CSS

  • Using Bootstrap's prebuilt components and examples for building a web page quickly & efficiently

The best way to learn these skills is to follow along step-by-step and type out all the code yourself.

Problem Statement & Setup

We'll explore abovementioned topics by attempting to solve this problem statement:

PROBLEM: Rebuild the Jovian Careers website created in the previous tutorial using the Bootstrap CSS framework. Make the following changes:

  1. Add some links in the navigation bar, and show a collapsible menu on mobile devices.

  2. Show the list of jobs using cards on mobile and a table on desktop devices.

  3. Make the color scheme, typography, and layout consistent and aesthetically pleasing.

Here's what the site created in the previous tutorial looks like:

alt