Skip to main content

Bootstrap 5 - Show/hide images on specific breakpoints

I'm working on upgrading an existing application from Bootstrap 4 to Bootstrap 5. I used the occasion to clean up the CSS logic. One thing I had in the original application was an image in the header that should be cropped on smaller screens.

This how the header looks like on bigger screens:

And this is on smaller screens:

The trick I used originally was by using a media queries:

However with the upgrade to Bootstrap 5 I would try to achieve the same thing using the built-in grid system and breakpoints.

Breakpoints

Breakpoints are the building blocks of responsive design in Bootstrap. You can use them to control when your layout can be adapted at a particular viewport or device size.

Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.

Breakpoint Class infix Dimensions
X-Small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px

Show/hide images

To show/hide images on certain breakpoints we need to set a combination of the following classes on your image tags:

SCREEN SIZE            CLASSES
---------------------------------------------------
hidden on all          d-none
hidden only on xs      d-none d-sm-block
hidden only on sm      d-sm-none d-md-block
hidden only on md      d-md-none d-lg-block
hidden only on lg      d-lg-none d-xl-block
hidden only on xl      d-xl-none d-xxl-block
hidden only on xxl     d-xxl-none
hidden below sm        d-none d-sm-block
hidden below md        d-none d-md-block
hidden below lg        d-none d-lg-block
hidden below xl        d-none d-xl-block
hidden below xxl       d-none d-xxl-block
---------------------------------------------------
visible on all         d-block
visible only on xs     d-block d-sm-none
visible only on sm     d-none d-sm-block d-md-none
visible only on md     d-none d-md-block d-lg-none
visible only on lg     d-none d-lg-block d-xl-none
visible only on xl     d-none d-xl-block d-xxl-none
visible only on xxl    d-none d-xxl-block
visible below sm       d-sm-none
visible below md       d-md-none
visible below lg       d-lg-none
visible below xl       d-xl-none
visible below xxl      d-xxl-none

In our specific example, we want to show one image only on xl or higher dimensions and show the other image only when the dimension is smaller then xl. Here is how I did this in html:

Popular posts from this blog

DevToys–A swiss army knife for developers

As a developer there are a lot of small tasks you need to do as part of your coding, debugging and testing activities.  DevToys is an offline windows app that tries to help you with these tasks. Instead of using different websites you get a fully offline experience offering help for a large list of tasks. Many tools are available. Here is the current list: Converters JSON <> YAML Timestamp Number Base Cron Parser Encoders / Decoders HTML URL Base64 Text & Image GZip JWT Decoder Formatters JSON SQL XML Generators Hash (MD5, SHA1, SHA256, SHA512) UUID 1 and 4 Lorem Ipsum Checksum Text Escape / Unescape Inspector & Case Converter Regex Tester Text Comparer XML Validator Markdown Preview Graphic Color B

Help! I accidently enabled HSTS–on localhost

I ran into an issue after accidently enabling HSTS for a website on localhost. This was not an issue for the original website that was running in IIS and had a certificate configured. But when I tried to run an Angular app a little bit later on http://localhost:4200 the browser redirected me immediately to https://localhost . Whoops! That was not what I wanted in this case. To fix it, you need to go the network settings of your browser, there are available at: chrome://net-internals/#hsts edge://net-internals/#hsts brave://net-internals/#hsts Enter ‘localhost’ in the domain textbox under the Delete domain security policies section and hit Delete . That should do the trick…

Azure DevOps/ GitHub emoji

I’m really bad at remembering emoji’s. So here is cheat sheet with all emoji’s that can be used in tools that support the github emoji markdown markup: All credits go to rcaviers who created this list.