Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Bootstrap Breakpoints: All You Need to Know fo Adaptable Apps

In the dynamic realm of web development, creating a seamless and visually appealing user experience across a diverse array of devices is paramount. Responsive design has indeed become a cornerstone of modern web development. Likewise, for developers navigating the complexities of responsive design, Bootstrap, a widely embraced front-end framework, offers a robust set of tools to help with the process. Thus, an important part of this is Bootstrap breakpoints and media queries.

In this article, we begin on a journey through the intricacies of media queries within the Bootstrap framework, giving more exposure to how specified breakpoints empower you to develop applications that effortlessly adapt to various screen sizes.

PS: Engineers waste time building and styling components when working on a project, writing repetitive markup adds time to the project and is a mundane, boring task for engineers. PureCode.ai uses AI to generate a large selection of custom, styled UI components for different projects and component types.

Responsive Web Design.

Responsive web design is an approach to designing and coding websites to ensure proper interaction and viewing across a variety of devices and screen sizes. Some key aspects of responsive web design include Fluid grids, Flexible images, Media Queries, Viewport Meta tags, Mobile-First design, and Performance considerations.

In this article, we will major in the use of Media Queries and Breakpoints to ensure optimal interface responsiveness, thereby creating a seamless user experience. Media queries play a vital role, allowing the application of different styles based on factors like screen width. Mobile-first design is also a common strategy, starting with mobile layouts and enhancing for larger screens.

CSS Breakpoints

CSS breakpoints are crucial for enabling responsive web designs that adapt to different devices and screen sizes. Breakpoints are defined points in a website’s layout where the design changes to accommodate various screen widths. This is essential for providing a seamless user experience across devices, ranging from large desktop monitors, and medium devices, to small devices.

Thus, we will be delving into applying media queries at declared breakpoints to achieve responsive web design.

Media queries in CSS

A Media Query is a CSS property (this was introduced in CSS3) that may be defined as a conditional statement that enables the adaptation of styles based on various characteristics of the user’s device or viewport. By utilizing media queries, using a specified breakpoint, developers can tailor the presentation of web content to specific conditions such as screen width, height, orientation, or even device type, facilitating the creation of responsive and visually optimized designs across a diverse range of platforms and screen sizes.

In essence, media queries serve as a linchpin for crafting flexible and user-friendly interfaces, enabling a harmonious coexistence of diverse screen sizes and resolutions within the ever-expanding landscape of the digital ecosystem.

Syntax

A media query comprises optional `media type`, and `media feature` expressions, these are optionally combined in various ways using logical operators. Note that media queries are also case-insensitive.

Media Types

Media Types specify the category of the output device and help determine which styles to apply. Common media types include:

  1. All: This default media type applies to all devices

    @media all {
        /* Styles applied to all devices */
    }
  2. Print: Styles for printed pages.

    @media print {
        /* Styles applied to printed pages */
    }
  3. Screen: You use this for screens such as computer monitors, tablets, and smartphones. It is commonly used.
    @media screen {     /* Styles for screens */ }
  4. Speech: Styles applied to screen readers or speech synthesizers.

    @media all {
        /* Styles for speech synthesizers */
    }

Media Features

Media Features allow you to apply styles based on specific characteristics of the user’s device or environment. Here are some common media features:

  1. Width and Height: This enables style adjustment based on the width or height of the viewport dimensions.

    @media (min-width: 750px) {
      /* Styles applied to screens with minimum width of 600px */
    }
  2. Orientation: Adjust styles based on device orientation (portrait or landscape).CSS

    @media (orientation: landscape) {
      /* Styles for landscape orientation */
    }
  3. Aspect Ratio: This targets specific aspect ratios of the viewport.
    @media (aspect-ratio: 16/9) {   /* Styles applied to screens with a 16:9 aspect ratio */ }
  4. Resolution: Apply styles based on the resolution of the output device.

    @media (min-resolution: 600dpi) {
      /* Styles for high-resolution screens */
    }
  5. Color: Here, we can adjust styles based on the number of bits per color component.

    @media (min-color: 256) {
      /* Styles for devices supporting at least 256 colors */
    }
  6. Hover: Apply styles if the primary pointing device can hover over elements.

    @media (hover: hover) {
      /* Styles for devices with hover capabilities */
    }

Combining Media Types and Features

Media Types and Features can combine for more precise targeting. For example:

@media screen and (min-width: 782px) {
  /* Styles applied to screens with minimum width of 782px */
}

Are Media Queries still used?

Media queries are still widely used and considered a fundamental technique in responsive web design. It is the foundation on which other frameworks e.g. Bootstrap exist on.

The Bootstrap Framework

Bootstrap logo

Developed by Twitter, Bootstrap is a popular open-source frontend framework valued for its efficiency in creating responsive and consistent user interfaces. It adopts a mobile-first approach, giving smooth adaptability to various screen sizes.

Born out of the need for a unified front-end development framework, Bootstrap has evolved into a robust toolkit that increases the process of building visually appealing and responsive websites.

Beyond styling, Bootstrap offers Javascript components like modals, carousels, dropdowns etc, improving user interactions without the need for extensive custom coding. Thanks to its fluid grid and layout and media queries, Bootstrap’s responsiveness is intrinsic, making seamless navigation on devices of varying sizes possible. Bootstrap is known for its ease of use, extensive documentation, major browser compatibility and a community that contributes to its growth.

As the world of web development continues to evolve, Bootstrap remains relevant with improvements and updates. Bootstrap has transcended its origins to become an indispensable tool for developers, delivering not just a framework, but a well-defined ecosystem that accelerates and simplifies the web development process. The theming prowess of Bootstrap empowers developers to customize visual aspects easily, ensuring a unique and branded appearance for each project.

What is a Bootstrap Breakpoint?

A Bootstrap breakpoint refers to declared breakpoints in the responsive grid system of Bootstrap where the layout of a web application adjusts based on the device type or screen size. It is safe to call breakpoints building blocks of responsive design. They play a vital role in creating responsive designs that can adapt to various screen sizes, from small devices to medium devices to larger desktop monitors.

It is common to see `min-width` used in our media queries. Note that Bootstrap prioritizes the ‘mobile-first’ approach.

By leveraging Bootstrap breakpoints, we can ensure a seamless user experience. This flexibility is crucial to modern web development, considering the various range of screen dimensions and devices that users may employ to access a website or applications.

Default Breakpoints in Bootstrap

In the latest version of Bootstrap(V 5.0), available breakpoints Bootstrap offers include:

Bootstrap breakpoints table

From the image above, we can see the default breakpoints in Bootstrap, their class infix and various dimensions.

Each breakpoint holds containers whose widths are multiples of 12. Breakpoints do not specifically target all devices or use cases, they only represent subsets of common viewport dimensions.

It is also possible to customize the default breakpoints by editing the variable below in the `_variables.css` stylesheet.

CSS

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Here’s a video tutorial to learn more about customizing variables.

As said earlier, even though these default breakpoints may not cover every use case, these media query ranges help to place web content that will match most devices, thereby ensuring optimal user experience.

How to add a Breakpoint in Bootstrap

Here are some of the most common Breakpoints, Bootstrap Media Queries with a few examples.

  • min-width

  • max-width

  • single breakpoint

  • between breakpoint

Min-Width

This is a CSS property that defines the minimum width of an element. In relation to media queries, this checks whether the viewports’ width is equal/greater than the value of the minimum width variable of the given breakpoint.

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

We will start with an example using the sass mixins for all min-width bootstrap breakpoints above. Let us use the `sm` breakpoint.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <!-- custom CSS -->
    <link href="styles.css" rel="stylesheet" />

    <title>Bootstrap Media Queries</title>
  </head>
  <body>
    <h3>Learning bootstrap media query</h3>
  </body>
</html>

CSS

h3 {
  font-size: 20px;
}
@include media-breakpoint-up(sm) {
  h3 {
    font-size: 35px;
  }
}

Here we have simply specified that below the `sm(576px)` breakpoint, the `h3` tag should possess `font-size: 20px`, but once the viewport gets to `576px` and above, the `h3` tag is assigned a new `font-size: 35px`.

Let us once again demonstrate this using the `min-width` media query.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <!-- custom CSS -->
    <link href="styles.css" rel="stylesheet" />

    <title>Bootstrap Media Queries</title>
  </head>
  <body>
    <h3>Learning bootstrap media query</h3>
  </body>
</html>

These Sass mixins translate in the compiled CSS making use of the values declared in our Sass variables.

CSS

h3 {
  font-size: 20px;
}
@media (min-width: 576px) {
  h3 {
    font-size: 35px;
  }
}

In the image below, notice that before the `576px` viewport, we apply the `font-size: 20px`.

result

In the image below, notice that at or after the `576px` viewport, the `font-size: 35px` is applied.

Max-Width

With the max-width property, we can go in the opposite direction i.e. the given screen size or smaller.

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

We will start with an example using the sass mixins for all max-width bootstrap breakpoints above. Let us use the `sm` breakpoint.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <!-- custom CSS -->
    <link href="styles.css" rel="stylesheet" />

    <title>Bootstrap Media Queries</title>
  </head>
  <body>
    <h3>Learning bootstrap media query</h3>
  </body>
</html>

CSS

h3 {
  color: black;
}
@include media-breakpoint-down(sm) {
  h3 {
   color: green;
  }
}

Here we have simply specified that from `0px` to `sm(576px)` breakpoint, the `h3` tag should possess `color: green`, but once the viewport gets to `576px` and above, the `h3` tag is assigned `color: black`.

Let us also demonstrate this using the `max-width` media query.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <!-- custom CSS -->
    <link href="styles.css" rel="stylesheet" />

    <title>Bootstrap Media Queries</title>
  </head>
  <body>
    <h3>Learning bootstrap media query</h3>
  </body>
</html>

CSS

h3 {
  color: black;
}
@media (max-width: 576px) {
  h3 {
    color: green;
  }
}

In the image below, notice that up to the `576px` viewport, `color: green` is applied.

result

In the image below, notice that after the `576px` viewport, `color: black` is applied.

result

Single Breakpoint

There are certain media queries used to target a single segment of screen size. This can be done using the minimum and maximum breakpoint widths.

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

Using CSS media query, let us apply this in an example.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <!-- custom CSS -->
    <link href="styles.css" rel="stylesheet" />

    <title>Bootstrap Media Queries</title>
  </head>
  <body>
    <h3>Learning bootstrap media query</h3>
  </body>
</html>

CSS

h3 {
   display:none;
}

@media (min-width:576px) and (max-width:767.98px){
  h3 {
      display:block;
   }
}

In the resulting image below, we can see that the `h3` tag is not displayed from `0-576px`.

result

In the second image below, we can see that the `h3` tag is displayed.

result

Between Breakpoints

it is important to know that media queries may sometimes span multiple breakpoint widths

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <!-- custom CSS -->
    <link href="styles.css" rel="stylesheet" />

    <title>Bootstrap Media Queries</title>
  </head>
  <body>
    <h3>Learning bootstrap media query</h3>
  </body>
</html>

CSS

h3 {
  display: none;
}

@include media-breakpoint-between(md, xl) {
  h3 {
    display: block;
  }
}

Using CSS media queries,

CSS

h3 {
  display: none;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  h3 {
    display: block;
  }
}

Using Media Queries with Bootstrap

As seen in the examples in this article, media queries are completely compatible with Bootstrap. If you do not want to use the sass mixins provided by Bootstrap, conventional CSS media queries work just fine.

Can I use Media Queries without Bootstrap?

Yes, media query is a fundamental CSS concept upon which frameworks like Bootstrap are built. They work perfectly without the Bootstrap framework.

Which of the following Media Query Selectors are Supported by Bootstrap?

Below is a list of default breakpoints supported by Bootstrap.

Common Issues with Bootstrap Breakpoints

Although Bootstrap breakpoints are generally effective for ensuring responsiveness, there are some challenges developers may encounter.

  1. Not Considering Device Orientation:

    Problem: Breakpoints are based on width, not necessarily considering device orientation (portrait or landscape).

    Solution: Additional media queries or specific styles may be required if the intended design needs to adapt to both landscape or portrait orientations differently.

  2. Inconsistency Across Browsers:

    Problem: Different browsers may interpret media queries slightly differently, leading to inconsistencies.

    Solution: Regularly engage in testing your responsive design across multiple devices and browsers. You can also employ the use of vendor prefixes when necessary.

  3. Overlapping Breakpoints:

    Problem: Unexpected behavior can occur when multiple breakpoints are defined with overlapping ranges.

    Solution: To avoid conflicts, carefully organize your breakpoints, making sure each range is distinct to prevent styles from conflicting.

Final Thoughts on Bootstrap Breakpoints

In conclusion, to create responsive and visually optimized applications, mastering media queries and Bootstrap breakpoints is very important. As the digital landscape continues to diversify with various screen sizes and devices, the ability of developers to seamlessly adapt interfaces becomes paramount. To learn more about this concept, you can visit the link below.

PureCode.ai can cater for your code development process. It will save you valuable time and effort on a project by providing customized, and ready-to-use components which will allow you to prioritize more important and thought-intensive tasks to speed up the development of your user interface.

Shadrach Abba

Shadrach Abba