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 -- generic full-stack dev. “It looks ok but not like that awesome site from some amazing designer I saw recently” This article is a tutorial on to achieve satisfaction with the look of your bootstrap-themed site. actionable design tips Setup I’m going to start with this free bootstrap . Now let’s improve it! theme 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. To get access to these colors, we just need to add them to our bootstrap file. scss/_variables.scss $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 class on it. This is for readability on the lighter background color. text-white 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 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;
} 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;
} 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 class and give it an class. This comes with a thicker font weight. lead fs-5 Summary Where we're at so far... 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 . I'll be updating the feature section of the theme and will have some 🔥 tips for you. thefreelancedev.com I also highly recommend checking out . It completely changed my perspective on design as a dev. Refactoring UI ✌️ Also published . here

How to Hack Bootstrap CSS for Better Looking Websites

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

7 Fun Tailwind CSS Button Designs to Improve Your Workflow

5 Essential Bootstrap CSS Components and How to Improve Their Design

Bootstrap CSS is Still the Sh*t But We Can Make it Better

Everything You Need to Know About Bootstrap 5

Everything You Need to Know About Bootstrap 5

7 Fun Tailwind CSS Button Designs to Improve Your Workflow

5 Essential Bootstrap CSS Components and How to Improve Their Design

Bootstrap CSS is Still the Sh*t But We Can Make it Better

Everything You Need to Know About Bootstrap 5

Everything You Need to Know About Bootstrap 5

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps