paint-brush
How to Hack Bootstrap CSS for Better Looking Websitesby@thefullstackdev
1,035 reads
1,035 reads

How to Hack Bootstrap CSS for Better Looking Websites

by Wes | The Full Stack DevMay 26th, 2022
Read on Terminal Reader
Read this story w/o Javascript

Too Long; Didn't Read

This article is a tutorial on how to achieve satisfaction with the look of your bootstrap-themed site. Update your color palette with a new teal primary color and override the default line heights for common HTML elements in our CSS file. Add a small border to the top of the nav to bring some extra life to the page. Change the text from white to black by removing the `text-white` class on the lighter background color on it. Change line-heights to common elements with the larger the text is reducing your line heights.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - How to Hack Bootstrap CSS for Better Looking Websites
Wes | The Full Stack Dev HackerNoon profile picture

Bootstrap holds a lot of full-stack devs’ hands when it comes to creating sites. A lot of us don’t know how to use Figma, are unsure of what good “design” is, and are not proficient with CSS properties.


But damn are we good at whipping up database schema, building our controllers and models, slapping a bootstrap theme we found on Google in our views and calling it a day.


The end result usually leaves a person satisfied with the efficiency they created their site but unsatisfied with the result.


“It looks ok but not like that awesome site from some amazing designer I saw recently” -- generic full-stack dev.


This article is a tutorial on actionable design tips to achieve satisfaction with the look of your bootstrap-themed site.


Setup

I’m going to start with this free bootstrap theme. Now let’s improve it!

Expand your colors

Update your color palette

Bootstrap comes with a whole color pallet you might not have known about. Take advantage of it to look different than the other cookie-cutter bootstrap sites.


Boostrap colors


To get access to these colors, we just need to add them to our scss/_variables.scss bootstrap file.


$theme-colors: (
  "primary":    $teal-300,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
) !default;


Or if you're using an npm setup for Bootstrap, update your custom sass file that gets compiled.


@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
$custom-colors: (
    primary: $teal-300,
);
$theme-colors: map-merge($theme-colors, $custom-colors);
@import "../node_modules/bootstrap/scss/bootstrap";


Now we can update that gross bootstrap primary blue to a nice soft teal for our get started button. We’ll also want to change the text from white to black by removing the text-white class on it. This is for readability on the lighter background color.

Boostrap button color change


Add a color hint to the top of your hero section

We can add a small border to the top of the nav to bring some extra life to our page with the new teal primary color via border-primary.

Boostrap border-top page


Text

Change line-heights to common elements

A subtle change a lot of people don’t know about is reducing your line heights the larger the text is. Let's override the default line heights for common HTML elements in our CSS file.


h1 {
    line-height: 1.1;
}

h2 {
    line-height: 1.125;
}

h3 {
    line-height: 1.25;
}

p {
    line-height: 1.5;
}


Boostrap reduced line-height

Updated Letter Spacing

Large headlines generally have too much letter spacing by default. Condense the letter spacing of your h1 and h2 tags by updating our CSS file as we did for line height.


h1 {
    line-height: 1.1;
    letter-spacing: -0.05em;
}

h2 {
    line-height: 1.125;
    letter-spacing: -0.025em;
}


Boostrap less letter spacing for headlines


Heavier headline supporting text

Now we can beef up the supporting text in the hero. The contrast between it and the H1 tag is to the extreme. We'll remove the lead class and give it an fs-5 class. This comes with a thicker font weight.


Heavier headline supporting text


Summary

Where we're at so far...


Bootstrap hero updates


I wanted to do this theme refactor in 1 blog post but it's just too much content. I'm splitting it up into several articles.


Check back next week for article 2 or subscribe to my Newsletter at thefreelancedev.com. I'll be updating the feature section of the theme and will have some 🔥 tips for you.


I also highly recommend checking out Refactoring UI. It completely changed my perspective on design as a dev.


✌️


Also published here.