A Deep Dive Into Bootstrap Display and Visibility [Bootstrap Tutorial: Part III]

Today, web development and design, in general, is comparable to putting together a puzzle that fits on screens of various sizes and devices. As users access websites on a multitude of devices, such as phones, tablets, and laptops, the need for dynamic, responsive web layouts has become not just a trend but a necessity.

However, web designers and developers face the intricate challenge of accommodating everything from pocket-sized smartphones to expansive desktop screens. From the smallest smartphones like the Unihertz Jelly Pro and Soyes S7 with 2.45 inches and 2.5 inches of screen size to the largest display monitor and video screen, the curved Samsung Odyssey Ark and Venetian Resort sphere, with respective sizes of 55 inches and 6192 inches.

Odyssey Ark and Venetian Resort Sphere

As the demand for responsive and accessible web layouts continues to rise, web developers and designers must leverage the power of Bootstrap display and visibility properties to create experiences that adapt and excel in this ever-changing landscape. Bootstrap is a free, versatile, powerful, and open-source frontend toolkit that empowers developers to produce products that smoothly respond to the unpredictable changing terrain of screen sizes and devices.

Websites such as Visme, AnyDesk, and LogRocket have harnessed the Bootstrap display and visibility properties to create unforgettable experiences with responsiveness for their website users. The example below shows how the Visme website utilized Bootstrap flex to produce responsive cards that stuck vertically once they hit the lg breakpoint, making more content accessible to a broader audience.

Source

In our previous Bootstrap tutorial series, we looked at Bootstrap Dropdowns and Collapse and then explored Bootstrap Buttons and Badges. Using the skills and knowledge gained from these tutorials, we’ll explore more features of the Bootstrap toolkit.

In this Bootstrap tutorial part III, we’ll traverse the world of Bootstrap display property and visibility utility. We will analyze how they work and how you can use their potential to improve the responsiveness of your website to make it more accessible and provide a better user experience.

Introduction to Bootstrap Display and Bootstrap Visibility

Let’s first have an introduction and overview of the Bootstrap display and visibility. This section will set the stage for what follows by providing an essential foundation for understanding Bootstrap visibility utility and display property and what they contain.

Bootstrap Display

The Bootstrap display property has a set of display utility classes. This comprises a portion of the values of the CSS display property itself.

The utility classes apply across all the Bootstrap breakpoints: xs, sm, md, lg, xl, and xxl. The classes, in regards to breakpoints, are named using two formats: d-{value} for xs and d-{breakpoint}-{value} for all other breakpoints.

The value in the format stands for all display property values that Bootstrap supports, such as inline, inline-block, table, and grid.

Bootstrap display property is among the ways you can use to create responsive web designs alongside Bootstrap grid system and flexbox.

Bootstrap Visibility

The Bootstrap visibility utility modifies the visibility of elements without affecting the value of the Bootstrap display property.

The Bootstrap visibility has two classes: invisible and visible. These classes do not affect the page’s layout. Elements with the invisible class still occupy space in the layout but cannot be visually seen. They are also hidden visually and from assistive technologies like screen readers.

The most common use of Bootstrap visibility is toggling the visibility of elements between being visible and hidden.

Key Role of Element Visibility and Layout in Responsive Design

For many factors, there are times when it is reasonable to display some elements on specific breakpoints and hide them on others. Let’s look at the relevance of managing the visibility of elements in responsive design.

Ensuring Responsive Web Layouts

The look of different layouts varies from one screen size to another. An image with large dimensions can look great on large screen sizes and vice versa. If a large image were to be displayed as it is on smaller screen sizes, it could refuse to adapt to the screen and, in turn, make the surrounding elements unresponsive, too.

As such, showing and hiding certain elements on different screen sizes and devices can improve the responsiveness of the web page. Keeping a given element on a given screen size can prove very challenging to make the page or section responsive.

For example, in the below images, Visme displays the images surrounding the text in the hero section on laptops. It, however, hides them when it comes to mobile phones, thus making handling the responsiveness of the section less complicated on such small screen sizes.

For the above previews, I used the LT Browser. It is a next-generation browser built by LambdaTest for testing and debugging websites. It allows you to carry responsive testing for your websites and other web applications on multiple device viewports with up to 6 simultaneously, in addition to 53+ viewports, including mobile, tablet, and desktop.

You can check out the LT Browser documentation to get started and ease the task of testing the responsiveness of your web designs on various devices.

For continuous tutorials on automation testing, mobile app testing, and more, subscribe to our LambdaTest YouTube Channel.

Improving Accessibility

Among the many things responsive design caters to is user accessibility. Correctly controlling the visibility of elements enables screen readers and other assistive technologies to provide accurate information to differently-abled users.

According to Itamar Medeiros, a UX Researcher and interaction designer, in an edition on Ask UXmatters, “Creating Websites that work with different devices is, in my opinion, a good start for accessibility… Some of the responsive design frameworks—like Bootstrap and Foundation—already provide out-of-the-box compliance to coding best practices.”

Web page elements irrelevant to screen readers, like decorative images, can be hidden using techniques like display:none or aria-hidden:true. This ensures that screen readers don’t interpret these elements, thus preventing confusion.

Reducing Clutter

When it comes to screen real estate, small screen devices have less of it compared to larger ones. Therefore, it makes it more sound to display the most critical elements on small screens to utilize the inadequate space. This prevents content from cluttering the web page, which can confuse users on how to interact with it.

In the example below, LambdaTest displays an explainer image alongside the content on large-screen devices like laptops and hides on small mobile screens. This enables users to focus on what is crucial and make quicker decisions while on the website.

Expediting Loading Times

The size of the markup or web page elements like images directly influences the loading time of a web page. The larger the markup size, the longer a page may take to load, or in the case of images, the heavier they are, the slower a page may load.

According to ClickZ, one of the largest digital marketing agencies in the UK, the average size of a mobile webpage is 2.2MB, and images account for 68% of this size. Mobile phones usually have slower Internet connections than larger-screen devices like laptops. Hence, hiding elements such as images is essential to reduce the amount of data needed to load the page. This speeds up the page loading time compared to how it would be with the now hidden elements still showing.

Source

As we head into Bootstrap display property and Bootstrap visibility, mastering the control of element visibility is crucial for crafting adaptive and user-friendly designs.

Deep Diving Into Bootstrap Display Property

The Bootstrap display property is a set of utility classes that supports most of the values of the CSS display property. It provides a responsive and flexible way to manage the display of elements based on screen size. Bootstrap supports different values of the CSS display property. The display classes use the format of d-{breakpoint}-{value}, except for breakpoint xs, which follows the format d-{value}.

Below are some Bootstrap display classes and what they do.

Class	Description
d-none	Hides an element on all breakpoints.
d-inline	Displays the element as an inline.
d-block	Displays the element as a block.
d-flex	Displays the element as flex.
d-inline-flex	The element behaves as an inline element but lays its content using flex.
d-grid	Displays the element as a grid.
d-inline-grid	The element behaves as an inline element but lays its content using a grid.

Responsive Display Classes

Bootstrap also has responsive classes for the display ones, and they follow the pattern of d-{breakpoint}-{value}. Below are some of the responsive classes.

Class	Description
d-sm-none	Hides the element on the sm breakpoint.
d-md-block	Displays the element as a block on the md breakpoint.
d-lg-flex	Displays the element as flex on the lg breakpoint.
d-xl-inline	Displays the element as inline on the xl breakpoint.
d-xxl-block	Displays the element as a block on the xxl breakpoint.

Display None

The d-none class hides elements visually from the webpage, and they no longer occupy any space in the document flow. You can use the class for all breakpoints to cater to web page responsiveness.

Shown below are the use cases of the display none:

• Responsive web design: Concerning responsive web design, display none enables you to hide elements as the web page hits different breakpoints.
• Tabbed navigation: Tabbed navigation is a navigation style that arranges content in separate sections represented by tabs where users can alternate between them.

The example below shows how AnswerThePublic uses d-none to hide the image on other breakpoints and then shows it once it hits the lg breakpoint. This significantly improves the page load time for people on small-screen devices, enhancing the overall user experience.

Source

Browser output:

In the above browser output, we have used the d-sm-none class to hide the image once the page hits the sm breakpoint. This makes the layout more responsive and reduces clutter on small-screen devices.

See the Pen
Bootstrap Visibility Utility & Display Property – Display: none by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Display Inline

The d-inline class is a utility class part of the Bootstrap display property. The class makes none inline elements on the web page display as inline. The elements with the d-inline class will allow the next elements to be on the same line if there is enough space; otherwise, they will begin on a new line.

As inline elements, they exhibit some of the following characteristics:

• They don’t start on a new line.
• Height and width properties can’t apply to them. They take up as much space as their content occupies.
• Horizontal margins and paddings are respected but not the vertical.
• Inline elements allow other elements to be on the same line as theirs.

Bootstrap has inline classes that you can use to create responsive layouts based on different breakpoints. Below are some classes.

Class	Description
d-sm-inline	Displays the element as inline when the page hits the sm breakpoint.
d-md-inline	Displays the element as inline when the page hits the md breakpoint.
d-lg-inline	Displays the element as inline when the page hits the lg breakpoint.

Below are some common use cases of display inline:

• Responsive web layouts: These are layouts that adapt to different devices and screen sizes.
• Copyright information: These are details on the legal rights and intellectual property ownership of original works, usually put in the footer of a website.
• Breadcrumb navigation: Breadcrumb navigation is a path of hierarchical links showing users their current location on a website.

The example below shows how Cuttles uses the d-inline class to fit the copyright paragraph on the same line with the Terms of Service and Privacy Policy in the limited space at the bottom of the footer.

Source

Browser output:

The browser output above shows the paragraphs displaying as inline elements after applying the class d-inline on them.

See the Pen
Bootstrap CSS Display property- Display inline by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Display Inline Block

The class d-inline-block makes elements behave like inline elements while retaining some properties of block elements. Inline-block elements showcase the following characteristics:

• Elements do not begin on a new line.
• Properties of width and height are respected.
• Elements can have vertical margins and paddings.

Below are some of Bootstrap’s responsive classes for d-inline-block:

Class	Description
d-lg-inline-block	Displays the element as inline-block when the page hits the lg breakpoint.
d-md-inline-block	Displays the element as inline-block when the page hits the md breakpoint.
d-xl-inline-block	Displays the element as inline-block when the page hits the xl breakpoint.

Below are some common use cases of display inline-block:

• Button-like links: These are links styled to resemble buttons, making them visually eye-catching and encouraging user interaction.
• Menu items: Navigation elements found in menus guide users to different sections or pages within a website or mobile application.
• Horizontal lists: List items arranged horizontally enable websites to utilize little space where vertical lists could, such as in the footer to display items like navigation menus, social media icons, tags, and labels.
• Links with inline icons or images: Links with small icons or images integrated directly with the link text serve as visual cues and prompt user interaction.

The example below shows how AnyDesk uses the d-inline-block class to create a button-like link to Download Now. This is because, unlike the d-inline, which does not respect vertical margin and padding, and the d-block, which does not allow other elements to be placed along it, the d-inline-block caters to both.

Source

Visme uses the same class of d-inline-block to give the button-like links of Start Now a maximum width of 320px and vertical padding.

Source

Browser output:

In the output above, we have used d-inline-block to place an arrow image alongside our links and give them a top padding of 4.

See the Pen
Display inline-block – Bootstrap Display property by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Display Block

The class d-block makes non-block elements display as block elements. The table below shows the responsive classes associated with the d-block class.

Class	Description
d-sm-block	Displays the element as a block once the page hits the sm breakpoint.
d-md-block	Displays the element as a block once the page hits the md breakpoint.
d-lg-block	Displays the element as a block once the page hits the lg breakpoint.

Common use cases of display block are block buttons, responsive web layouts, modals, pop ups, overlays, and form buttons.

LogRocket uses the d-md-block class to show the Request a Demo button once the page hits the md breakpoint and hides it on other breakpoints. One is shown on the screens below the md breakpoint, and the other on those above.

Source

Browser output:

In the example above, once the page hits the md and lower breakpoints, the images are hidden and vice versa once they hit the lg breakpoint and above.

See the Pen
Bootstrap Display Property -> d-block by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Display Flex

To give HTML containers or wrappers a display of flex, use the d-flex class. Below are some classes that go along with Bootstrap’s d-flex.

Class	Description
flex-row	Displays the content of the element based on flex
flex-column	Displays the content of the element as flex column
flex-*-row	This class format enables displaying the contents of an element as flex depending on the breakpoint. The * denotes the breakpoints.
flex-*-column	This class format enables displaying the contents of an element as flex, depending on the breakpoint. The * denotes the breakpoints.

Common use cases of display flex in web development are image galleries, responsive nav menus, blog cards, footer menus, and responsive web layouts.

LogRocket, in the example below, uses the d-flex, flex-column, and its associated classes to utilize the space to cater to both the text content and the image by displaying text content in a column layout.

Source

Browser output:

In the output above, we have used d-flex and other classes like d-flex-column to present the various forms of automation into two columns adaptable to different screen sizes as they hit different breakpoints.

The adaptability of the layout offers a cohesive user experience to site visitors, thus making the user more likely to spend a greater duration interacting with the website.

See the Pen
Bootstrap Display Property -> d-flex by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Deep Diving Into Bootstrap Visibility Utility

The Bootstrap visibility utility controls the visibility of elements without modifying their display. It has two classes, invisible and visible. The two classes are based on the CSS property of visibility, which enables hiding an element without changing the webpage layout.

Following are the common use cases of the Bootstrap visibility utility:

• Transitions and animations

CSS transitions and CSS animations enable control over the smooth and gradual change of an element’s property values and properties over a specified duration and allow the creation of features like loading spinners.

• Overlay menus

This is a type of navigational menu that displays a list of options or links by covering part or all of the existing content.

• Tooltips

A tooltip is a small contextual informative message that provides additional information about a particular subject when a user clicks or hovers over the element.

Browser output:

As shown in the above image, we have seen that the invisible class makes the second paragraph on the web page invisible or disappears while still taking up space in the layout. We still have it in our source code, but it is visible visually.

See the Pen
Bootstrap CSS Visibility Utility – Invisible class by Mbaziira Ronald (@mbaziraofug)
on CodePen.

To wrap up with Bootstrap display property and visibility, the dynamic duo empowers you with a comprehensive set of tools to manage visibility and layout, creating a solid foundation for crafting responsive websites. Thus, in our next section, we will see some of the responsive layout techniques you can achieve with Bootstrap display and visibility.

Responsive Layout Techniques with Bootstrap Display and Visibility

We will look at the techniques you can use for Bootstrap visibility utility and Bootstrap display property to create web pages that adapt effectively to ensure a seamless user experience across different screen sizes and devices. Below are some of them;

• Element reordering: Element reordering is a responsive layout technique that involves rearranging the order of elements in the user interface from the one in the HTML Markup to make the elements adapt better to different screens and devices or the UI more captivating.

It also improves the readability of the content by changing its flow, which enables users to consume information more reasonably. To achieve element reordering, you can use the Bootstrap display properties – d-flex and order-* classes.

• Web image handling: This refers to optimizing, manipulating, and managing images for use on the web. It involves executing ways that improve a website’s responsiveness, user experience, and performance.
• Multi-column layout: Multi-column layouts refer to a technique where content is organized into multiple columns, providing a structured and efficient way to present information.

To demonstrate one of the responsive layout techniques, we will use the multi-column layout technique in our demo website. We will divide the content into two or more vertical columns. This will allow for a more balanced distribution of information, especially as we deal with lengthy text or numerous items.

The Bootstrap display property classes of d-flex, flex-column, gap-*, and flex-md-column are some of the classes we will use.

Mobile Preview:

Tablet Preview:

Desktop Preview:

The above previews show how the demo website we created responds to different devices with varying screen sizes, including mobile, tablet, and desktop previews.

We have leveraged the LT Browser to check responsiveness, which has again come in handy when doing responsive testing on our demo website.

See the Pen
Responsive page with Boostrap Visibility and Display Property by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Key Aspects to Consider for Bootstrap Visibility and Display

We have looked at how Bootstrap visibility utility and Bootstrap display property work and how you can harness their capabilities to improve your website’s overall look and responsiveness.

Nonetheless, working with these two powerful Bootstrap features comes with its challenges. Let’s look at them and how you can overcome them.

Accessibility concerns

When creating websites, we want them to be as accessible to as many as a wide audience as possible. According to a fact sheet by the WHO, 1.3 billion people are differently-abled, representing about 16% of the world’s population.

However, when we use the Bootstrap display property class of d-none or d-md-none, it makes that content inaccessible to people who rely on screen readers and other assistive technologies.

One way to address this is by using WAI-ARIA roles like aria-hidden on the element. When you set the aria-hidden role to true, the element is not only hidden visually but no longer in the accessibility tree. This improves the user experience of screen readers.

Additionally, to take things to the next level, you can carry out accessibility testing for your website. This enables you to detect and address barriers restricting people with impairments from using your website.

Testing responsiveness

The ability of a website to adapt to different screen sizes and devices can mean the difference between a user buying a product, subscribing to a service, or abandoning the website. It is this vitality that responsiveness plays that makes testing the responsiveness of a website crucial.

After making the website flexible using Bootstrap classes like d-flex, d-lg-block, and d-flex-md-row. You can do responsive testing to see how your website adapts to various screen sizes and devices. You can use tools like the LT Browser by LambdaTest, where you can simultaneously interact and test with up to six device viewports.

Cross browser compatibility

One other key challenge you may encounter when using Bootstrap display property and Bootstrap visibility is achieving consistency across different web browsers.

Although Bootstrap is designed to give a uniform experience, the reality is that different browsers like Chrome, Firefox, and Safari interpret CSS and JavaScript differently. This variation can lead to inconsistencies in the behavior of elements on the web page depending on which browser the page is in view.

The solution is to conduct browser testing to ensure your website renders as expected on different browsers. This enables you to Identify and fix any incidents. For this, you can harness an online browser farm offering cloud-based testing platforms like LambdaTest.

It is an AI-powered test orchestration and execution platform that allows you to perform manual and automated testing of websites and mobile applications across different permutations of real browsers, devices, and platforms. And you can do all this without setting up a local test infrastructure.

Conclusion

In this Bootstrap tutorial Part III, we delved into Bootstrap display property and visibility utility and their examples. We have learned what classes to use and their different use cases in web development.

Bootstrap comprehensive range of classes opens up a world of layout possibilities, ensuring that elements align and stack harmoniously across different viewport sizes.

I encourage you to explore more possibilities you can do with Bootstrap visibility and display utilities. Thank you for taking the time to read. See you in the next one!