Is there a way to conceal one column in a row and display only the second column from a medium screen to a small screen using Bootstrap 5?

I am currently working on creating a row with two columns, one being the left_bar column and the other a large image. My goal is to display only the large image (column 2) when the screen size changes from medium to small breakpoints, hiding the left_bar column (column 1).
Here's an example of how I want it to look like from medium to small screens: https://i.sstatic.net/RfpwF.png
Below you will find my code snippet:

body{
    margin: 0;
    padding: 0;
}
@media screen and (min-width: 300px) and (max-width: 500px){
}
@media screen and (min-width: 500px) and (max-width: 700px){
  
}
@media screen and (min-width: 700px) and (max-width: 900px){


}
@media screen and (min-width: 900px) and (max-width: 920px){
}
    // CSS styling for left_bar column
    .left_bar{
        height: 100vh;
        background-color: #030C13;
        margin: 0;
    }
    // CSS styling for hero_image column
    .hero_image{
        width: 100%;
        height: 100vh;
        background-image: url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg');
        background-position: center;
        background-position: right;
        background-size: cover;
        background-repeat: no-repeat;
    }
    // More CSS styles...
<!DOCTYPE html>
<html lang="en">
// HTML content goes here...
</html>

Answer №1

To display or hide elements in Bootstrap 5, you can utilize the .d-{breakpoint}-{value} classes. These classes take effect from min-width: 0; and above.

For example, you can use .d-block.d-md-none to show a block for mobile devices, but hide it from the 'md' breakpoint (i.e., tablets and larger screens).

Conversely, using .d-none.d-md-block will hide the element on mobile devices and show the block on tablets and larger screens.

body{
    margin: 0;
    padding: 0;
}
@media screen and (min-width: 300px) and (max-width: 500px){
}
@media screen and (min-width: 500px) and (max-width: 700px){
  
}
@media screen and (min-width: 700px) and (max-width: 900px){


}
@media screen and (min-width: 900px) and (max-width: 920px){
}
    // CSS styles for various elements within the code snippet
// HTML structure is provided as well

Upon running this code, you'll notice a "large" sunset image when the viewport is reduced, and a sidebar becomes visible when the viewport is enlarged (fullscreen).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Revamp the UI Framework's CSS to accommodate the latest Web Components

I've implemented Grommet as the UI Framework for my React page. However, I encountered a situation where certain web components, like a web chat control, are not covered by Grommet's CSS. What is the simplest way to style these additional web com ...

Using jQuery to validate the existence of a link

Within my pagination div, I have links to the previous page and next page. The link to the previous page is structured as follows: <span id="previous"><a href="www.site.com/page/1" >Previous</a>. However, on the first page, there will be ...

display alternative text before an image is loaded on the screen

Is there a way to display text instead of an image before the image loads? I have a website with an image as the title, causing the page to load fully before the title image is loaded later. Is there a solution for this issue? ...

shifting the angular directives to alternate the bootstrap class of hyperlinks

I have a collection of hyperlinks displayed on my webpage. <a href="#" class="list-group-item list-group-item-action active" routerLink='/route1' >Explore First Link</a> <a href="#" class="list-group-item list-group-item-action" r ...

Enhance your website with a dynamic navigation menu created with the power of html5

Currently in the process of designing a mobile website, I am facing a specific challenge. The homepage features menu items labeled 'a', 'b', 'c', ..., 'h'. My goal is to initially display only the first three menu it ...

Searching Text Boxes with Javascript: A Better Way to Handle Arrays

I'm struggling to implement a feature where users can search for authors in a database and be redirected to the corresponding HTML if found. Otherwise, it should display a message saying "No Author Found"... I need some assistance in getting this fun ...

Having trouble getting a DIV to appear on top of another DIV containing an image

I need help with positioning an "InfoBox" above the main header image on my website. Despite trying z-indexes and adjusting position, I can't seem to get it right. If anyone has any suggestions, please share. Thank you! For reference, here is the HTM ...

How can I use Java Script to create animation of vertical black bars of a specific width moving across a white background?

Looking for a JavaScript code that can animate vertical black bars of a specific width moving over a white background. The desired outcome is similar to the video found at: https://www.youtube.com/watch?v=bdMWbfTMOMM. Thank you. ...

In making reference to a particular subpage within a parent page

My website is designed with all inner pages linked to one master file. I'm looking to change the title font size on just one specific page, without affecting the rest of the pages that use the master file. Is there a way to target a specific page titl ...

Is it possible to determine which child element is currently in view within a scrollable parent div?

In an attempt to replicate a "current page" feature using divs, similar to a PDF reader. document.addEventListener("DOMContentLoaded", function(event) { var container = document.getElementById("container"); container.onscroll = function() { let ...

store JSON data within an HTML list element

I've been working on a JavaScript script that allows me to generate list items in HTML. Right now, I have functionality to drag and remove the items using another script. However, I am interested in adding some additional information to each list item ...

Guide on aligning text to the center in the navigation bar

I am currently experimenting with a dropdown navigation bar using pure CSS. However, I am facing issues with text alignment as it only aligns the dropdown text. Setting left: 50% and right: 50% does center the text, but it doesn't cover the width of m ...

Ensuring Consistent Visual Harmony Across Linked Elements

As part of my project developing an iPad app with PhoneGap and jQuery Mobile, I am looking to incorporate a preview pane within a carousel. This preview pane should display smaller versions of the other panes scaled inside it. The panes are dynamic and upd ...

"Exploring the Dynamic Duo of AngularJS ngAnimate and animate.css

I've been working on getting my animation to function correctly with AngularJS and animate.css. In order to achieve this, I set up the SASS in the following way: .slide-animate { &.ng-enter, &.ng-leave{ } &.ng-enter { ...

Data not being displayed in dynamic <table>

Need help creating a dynamic table that displays data inserted in a specific format. {headers: ["header1", "header2"], rows: [["data1", "data2"], ["moredata", "wowoso muchdata"]]} The 'rows' consists of arrays where each array represents a row ...

Assign a new class to the anchor tag that has a distinct ID named "link"

I want to add the CSS class "active" to the anchor tag that contains the ID currently active in the URL. Here's what I've tried, but I'm unable to get window.location.hash to function properly. $( "a[href=' + window.location.hash + &ap ...

Problem with JQUERY Galleria CSS positioning alignment specifically in Firefox, Chrome works without issues

I recently incorporated jquery Galleria into my website and I am currently facing an alignment issue with the div element gallery-container. Interestingly, it appears correctly aligned in Chrome but is shifted to the right in Firefox. You can view the webs ...

Combining two HTML tables using jQuery/JavaScript

My table is displayed below: <table id="first" class="merge"> <tr> <td>Mick Jagger</td> <td>30</td> <td>50</td> <td>10</td> </t ...

Adjust the background color as you scroll

I am looking to create a functionality where the background-color of my header changes to match the background-color of the div it is currently scrolling past. For example, if the user scrolls to the #about section (which has a green background), I want th ...

What is the best way to incorporate new elements into the DOM in order to allow users to share their comments

Can anyone help me with the code below? I have a text box and a comment section, along with a button to add comments. However, I need assistance with adding the posted comment below the comment section. Below is the code snippet: <div id="comments"&g ...