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

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

Close Navbar When Nav Link is Clicked

By default the navbar dropdown stays open when clicked. This can be an issue if you are using name anchor’s or linking to an id like href=”#section”

Continue Reading

Category: Code Snippets

What Are the Pros and Cons of Using Bootstrap in Web Development?

Is a CSS Framework Like Bootstrap Even Necessary? If you are new to CSS frameworks, you are probably wondering what the benefits are of using Bootstrap in your project. Prior to using Bootstrap, I used a boilerplate I wrote myself that consisted of a reset, basic grid, typography, utilities, and media queries. Below are the benefits I… Read more »

Continue Reading

Category: Articles

5 Important Things to Keep in Mind When Making a Responsive Web Design?

Table of Contents 1. Write your CSS mobile first2. Work in gradual stages3. Keep your media queries grouped by component and not in a separate section or stylesheet4. Limit the number of pictures5. Test early and test often 1. Write your CSS mobile first Write as though you are only targeting a mobile device. 2. Work… Read more »

Continue Reading

Category: Articles

Why Is Responsive Web Design Good?

I believe responsive web design is good because it solves the mobile friendly website challenge in the least amount of time/cost. One stylesheet for all devices Can be setup by one designer/developer Easy to maintain and update Less expensive – Does not require server side device detection or complicated mobile app programming Does not require… Read more »

Continue Reading

Category: Common Questions

When Will Bootstrap 4 Be Released?

Update Bootstrap 4 is now out of Beta and stable v4.0.0. Learn more I recommend keeping track of the project milestones to gauge the progress. Track Bootstrap Milestones As of 5/24/2017 the Beta is 92% complete. You can drill down to see what is still needed to be completed in the ship list. You could… Read more »

Continue Reading

Category: Common Questions

Web Design Trends and How They are Influenced By Large Brands

Table of Contents Design TrendsThe Power of InfluenceAppropriate Design Design Trends Think about all of the things you look at everyday: websites, movies, billboards, menus, youtube videos… Your eyes and brain are constantly absorbing information. All of this visual content is influencing your frame of reference. Some streams of images are more powerful and persistent… Read more »

Continue Reading

Category: Articles

Going from Print Design to Web Design – My Learning Story

Early in my career I worked as a graphic designer for an advertising agency. I mostly designed brochures and sales flyers but on one project we discussed building a website to get leads. After I had the design ready we met with the development team to discuss the project. Half way through the meeting I… Read more »

Continue Reading

Category: Articles