Conceal a single column on mobile devices using Bootstrap 4

Take a look at this code snippet:

<div class="row">
                <div class="col-lg-3">
                    <div class="ava-block">

                    </div>
                </div>
                <div class="col-lg-6">
                    ...
                </div>
                <div class="col-lg-3">
                   ....
                </div>
</div>

Do you know how to hide the first col-lg-3 on mobile and change the col-lg-6 to col-lg-9? I want to hide the col-lg-3 on mobile devices without affecting the size of the col-lg-6. If I simply hide it using CSS and media queries, the col-lg-6 doesn't expand to fill the space.

htmlcssbootstrap-4

Answer №1

If you're looking to achieve a similar layout, consider using the display utilities from Bootstrap. You can use the "col" class along with "col-lg-6" to ensure the column always fills the remaining width.

<div class="container-fluid">
    <div class="row">
        <div class="col-3 d-none d-lg-block">
            <div class="ava-block border">
                3
            </div>
        </div>
        <div class="col">
            <div class="ava-block border">
                6-9
            </div>
        </div>
        <div class="col-3">
            <div class="ava-block border">
                3
            </div>
        </div>
    </div>
</div>

Check out the demo here:

Answer №2

If you want to hide a div on mobile, you can use the CSS class .d-none .d-sm-block. Conversely, to make a div appear larger on mobile, you can utilize .col-xs-9

For example:

<div class="row">
  <div class="d-none d-sm-block col-lg-3">
    <div class="ava-block">
    </div>
  </div>
  <div class="col-xs-9 col-lg-6">
    ...
  </div>
  <div class="col-lg-3">
    ....
  </div>
</div>

For more information, refer to Bootstrap's documentation on display

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

What is the procedure for eliminating an event listener that does not directly invoke a function?

I have implemented an event listener in my JS file following a successful AJAX request: var pageButtonsParentElement = document.getElementById("page-buttons"); pageButtonsParentElement.addEventListener('click', event => { ...

javascripthtmljqueryajax

How can you dynamically disable the submit button on a form in Angular 7+ based on the form's current status?

Let's consider a scenario with a button in our code: <button type="button" class="menu-button" [disabled]="isInvalidForm()">Save</button isInvalidForm() { console.log('I am running!'); return this.nameValidator.errors || this.last ...

htmlangularfrontendweb-frontend

How can I modify cell padding using a media query for a specific screen resolution?

In the desktop view, which is larger than 480px, I need a specific <td> to have a left-padding of 9px. However, once the resolution goes below 480px, this left-padding should increase to 18px. At the moment, my padding definition is specified within ...

cssemailresponsive-designmedia-querieshtml-email

Struggling to Position Advertisement in CSS

I've been struggling to properly center a div using CSS. Adding text-align: center; doesn't seem to do the trick. The issue can be found in the top advert on this website: . Do you have any suggestions? Here's some sample code: HTML: &l ...

htmlcssalignment

Responsiveness of the element along the vertical axis

I have an element that, when clicked, should display additional content. However, when the headline contains a lot of text, the element does not expand vertically as it should. Thank you for your help! Check out how it looks currently This is my HTML co ...

htmlcssresponsive-designresponsiveness

Received a notification after submitting an HTML form

<html> <body> <form action="" method="GET> Name: <input type="text" name="name" /> Age: <input type="text" name="age" /> <input type="submit" /> </form> </body> </html> <?php if( $ ...

phphtml

A guide on using Selenium to interact with a doughnut pie chart element

I am having difficulty performing a click event on the colored ring part of this doughnut pie chart. Currently, I can locate the element for each section of the chart, but the click event is being triggered in the center of the chart (empty inner circle) w ...

javascripthtmlseleniumselenium-webdriverxpath

Troubleshooting the malfunctioning AngularJS ui-view component

My ui-view isn't functioning properly, but no errors are being displayed. Can anyone help me figure out what I'm missing to make this work? This is the main template, index.html. <!DOCTYPE html> <html> <head> <meta charset= ...

javascripthtmlangularjsangular-ui-routerangular-routing

Guide to interpreting an Angular expression using traditional JavaScript conventions

I have encountered an issue with the Angular app that I am currently working on. It needs to retrieve the Google Analytics ID from Angular in order to pass it to ga('create', 'UA-XXXXX-Y') using standard JavaScript in my index.html. &l ...

javascripthtmlarraysangularjsgoogle-analytics

Issue with Foundation 6 not triggering the change.zf.slider event

Hey there, this is my first time posting and I could really use some help... I'm struggling to make the $("[data-slider]").on('change.zf.slider', function(){}); event trigger. I've attempted using the id of the element like so $(" ...

javascriptjqueryhtmlzurb-foundation

Tips for avoiding cursor sticking in css rotate transform in firefox?

I have a unique challenge in this code where I want the user to grab the black square and rotate it around the inner circle. Check out the code snippet here. While attempting to rotate the square, you might notice that the cursor sometimes gets stuck in ...

javascriptjquerycss

My custom Material UI table is being hindered by unnecessary div tags that are interfering with my CSS styling

View the generated code The rendered table demonstrates that when scrolling past the maximum width, the data does not appear <div> <table (not going to display all the markup for this. this table contains the headers of each column and appear ...

htmlcssreactjsmaterial-ui

Why does the video cover extend past its lower boundary in HTML?

I'm facing an issue where a purple cover over the <video> element extends slightly beyond the video's bottom border. Here's the code I'm using: .media-cover { display: inline-block; position: relative; } .media-cover:after ...

htmlcsshtml5-video

Issues with navigating sliders

I've encountered a problem with my slider arrows while following a YouTube tutorial. They are supposed to appear next to the picture and testimonial, but instead, they are showing up at the top. This issue wasn't present initially, but after enco ...

javascripthtmlcsssliderfrontend

What is the best way to save JavaScript array information in a database?

Currently working on developing an ecommerce website. My goal is to have two select tags, where the options in the second tag are dynamically populated based on the selection made in the first tag. For example, if "Electronics" is chosen in the first tag f ...

javascriptphphtmlsqlarrays

Creating a custom navigation bar that elegantly fades away with a smooth animation as you scroll down the page is a must-have

How can I create a navigation bar that disappears when scrolling, with a smooth animation? This is the progress I have made so far. HTML: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" type="tex ...

javascriptjqueryhtmlcssnavigation

Ways to vertically align a div in Bootstrap 4?

As I delve into working with bootstrap 4, I am experimenting with creating various basic layouts. In line with the guidelines provided in bootstrap 4 documentation, I aimed to vertically align block elements by applying the class align-items-center. Despi ...

cssbootstrap-4

Exploring Event Listening in HTML5 Programming

Having been an AS3 developer, I'm accustomed to this: addEventListener(Event.RESIZE, onResize); Currently diving into Typescript/JS/HTML5, I've noticed various ways of accomplishing tasks. I particularly prefer this method: window.addEventLis ...

htmleventsaddeventlistener

Exploring ways to expand the card tile size with Bootstrap CSS class

Currently, I am utilizing form.IO, which provides a field for targeting controls with Bootstrap custom CSS Classes. No syle tags and no .control{font-size:20px}. Remember, you can use multiple classes separated by a space. For example: card-title mb-2 tex ...

bootstrap-4

Identify certain lines from the paragraph text

Suppose you have an HTML Paragraph Element (e.g., <p>) with certain text sections highlighted using a HTML Mark Element (e.g., <mark>). I am interested in adding a vertical line in the margin or gutter (uncertain about the appropriate term) tha ...

htmlcss