How to Customize Bootstrap Colors

A common Bootstrap customization request is changing the default color scheme. You have a few options depending on how you are using Bootstrap in your project. 1. Link to CDN – Find and Replace Colors If you are linking to a pre-compiled version of Bootstrap I recommend looking at the raw source and using search and replace… Read more »

Continue Reading

Category: Tutorials

Bootstrap 4 Grid Flexbox Tutorial with Layout Examples

The most important element of any CSS framework is the grid system. The Bootstrap 4 grid system has been used on many websites worldwide which makes it extremely stable. This cross-browser support is why you probably are considering using Bootstrap for your website (it was for me). In this post I will provide an overview… Read more »

Continue Reading

Category: Tutorials

Bootstrap 5 & 4 Breakpoints – Media Queries [code snippet]

Bootstrap 5 introduces a new breakpoint to the grid system XXL. Below are the Bootstrap media queries used for the grid system breakpoints for you to add to your projects CSS file to customize things. What are the Bootstrap 5 Breakpoints? Bootstrap 5 grid tiers and media query breakpoints xs = Extra small <576px Max… Read more »

Continue Reading

Category: Code Snippets

How to Create a Full Width Bootstrap 4 Responsive Carousel

Do you want your Bootstrap 4 carousel to extend the full width of the browser window? Do your images look cut off or have unwanted padding on the left and right? In this tutorial we will take a closer look at the Bootstrap 4 carousel and determine the best approach in making it full width… Read more »

Continue Reading

Category: Tutorials

How to Change the Bootstrap Text Size and Make the Font Size Responsive

  Do you want to adjust the default font sizes in Bootstrap 4? You can either adjust the Sass variables or write new CSS styles to override the default values. In this tutorial, I will provide the default font size values and show you how to change the values based on the Bootstrap 4 breakpoints…. Read more »

Continue Reading

Category: Common Questions

Which framework is better, W3.CSS or Bootstrap?

Both of these are essentially style guides. A way of doing things. I recommend Bootstrap because of the following points. The large number of websites currently using it The large number of contributors and bug testers on the open source project Being more marketable for jobs because more teams use it and you don’t have… Read more »

Continue Reading

Category: Common Questions

How to Detect and Run JavaScript When Bootstrap Media Query Breakpoints Change

Update: I created a small jQuery plugin that adds media query detection for Bootstrap 3 and 4 projects. You can learn more about IfBreakpoint.js here. Have you ever wanted to trigger some javascript at a certain media query value? Relying on document.width() has problems because it includes browser scrollbars. A simpler and more accurate solution… Read more »

Continue Reading

Category: Tutorials

How to Reorder Columns with Bootstrap 4 Order Classes

With Bootstrap 4 column ordering it is best to start out understanding how the natural or default column ordering works. When your browser reads your HTML code it reads from the top and works its way down reading left to right. So in a two column grid, the first column will be the first one… Read more »

Continue Reading

Category: Tutorials

Starting Front-end Development with Bootstrap Sass

“It’s through mistakes that you actually can grow. You have to get bad in order to get good.” – Paula Scher, designer Good Reads Ways to Make Bootstrap Columns the Same Height JavaScipt for Web Designers: DOM Scripting [tool] I just heard about Adobe XD which looks like a great way to build prototypes other than… Read more »

Continue Reading

Category: Articles

Sparky Bootstrap 3 Sass Starter Project and Tutorial

It was a challenge for me to understand Grunt, Sass, and GitHub. So I decided to share a starter project I use for each Bootstrap 3 Sass project as well as a video tutorial series to help you learn the workflow.. Sparky: A Bootstrap 3 Sass starter project I created a starter project that provides… Read more »

Continue Reading

Category: Articles