Conceal div when reaching specified screen size by utilizing pre-defined grid classes

I currently have three div elements. When viewed on a full-screen device, each column takes up 33% of the parent div 'row', which meets my expectations. However, when the screen size is reduced, I would like div B to disappear so that div A and C can expand to sit beside each other, taking up 50% each.

<div class="row">
    <div class="col-3 col-sm-6">A</div>
    <div class="col-3 col-sm-0">B</div>
    <div class="col-3 col-sm-6">C</div>
</div>

My question is, can this desired layout be achieved using something like col-sm-0, or do I need to manually write a media query for it?

htmlcssbootstrap-4

Answer №2

Have you checked out the new hiding classes in v4 beta?

<div class="row">
    <div class="col-3 col-sm-6">A</div>
    <div class="col-3 d-sm-none">B</div>
    <div class="col-3 col-sm-6">C</div>
</div>

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

PHP and JavaScript Form: Include the page URL in the email form when submitting

After submitting a basic form, I am struggling to include the URL of the page in the email notification to track where the user completed the form. I have attempted various solutions from this forum, but unfortunately none of them seem to work. How can I ...

javascriptphphtmlcssforms

Retrieve the initial entry from a Container for every row in the Table

I'm facing an issue with a table I have on my website. Here is the structure: <table id="fieldContainer"> <tr><td><input id="input1"></td><td><input id="input2"></td></tr> <tr><td>< ...

jqueryhtml

Purifying potentially harmful style value for background-image when using ngStyle with a conditional statement

I'm attempting to dynamically display a background image of a div using ngStyle. I have also set a fallback image in case the default value is null. <div class="card-img-top" [ngStyle]="{'background-image': process.thumbna ...

cssangulartypescriptbackground-imagehtml-sanitizing

Utilizing and transmitting contextual information to the tooltip component in ngx-bootstrap

I am currently working on integrating tooltips in ngx-bootstrap and trying to figure out how to pass data to the ng-template within the tooltip. The documentation mentions using [tooltipContext], but it doesn't seem to be functioning as expected. Belo ...

javascripthtmlangulartooltipngx-bootstrap

Issue with cancelling a file upload is not functioning properly on Internet Explorer

My experience with file uploads in Internet Explorer is causing some issues. While other browsers work smoothly when canceling file uploads, Internet Explorer seems to have a different behavior. In other browsers, clicking the "Cancel" button during a fil ...

phpjqueryhtml

having trouble displaying album artwork

Encountering an unusual error in my music player implementation on the website. All functions of the music player are working perfectly fine. First, let's take a look at the error: TypeError: Cannot read properties of undefined (reading 'cover&a ...

javascripthtmlreactjs

JQuery integration resulting in disappearance of Input-group-btn element

Allow me to explain my current project. I am in the process of developing a Modal that enables users to input a password There will be an option to toggle between showing or hiding the text in the password field using a button positioned on the right sid ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Styling the background of a navigation menu specifically for mobile devices using CSS

Currently, my focus is on developing the website I am using Elementskit nav builder and I aim to change the background color of the navigation menu on mobile and tablet devices to black The existing code snippet is as follows: margin-top: 6px; } @med ...

htmlcssdrop-down-menu

Add a horizontal line between two div elements to create a visual division in the middle

Here is a snippet of my HTML/CSS/JS code: <div id="blockcart-wrapper"> <div class="blockcart cart-preview"> <div class="header"> <a rel="nofollow" href="#"> <img class="cart-icon" src="https://via.placehold ...

htmlcss

HTML technique for blurring images using a custom algorithm

In order to apply a blur effect to the image "example.png" displayed on a website, I have implemented the following code: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <styl ...

htmlalgorithmimage-processingblur

Adjusting the Size of Dialog Windows in Lightswitch HTML Client

When using the MS Lightswitch HTML Client, if a dialog menu option contains too many characters to fit within the length of the dialog window, the text will be cut off and replaced with (...). Is there a way to add a scroll bar or adjust the text size in ...

jqueryhtmlcssvisual-studio-lightswitchlightswitch-2013

Incorporate PHP functionality into an HTML document

I'm looking to incorporate a PHP code into my phoneGap application (HTML). I've attempted the following code, but unfortunately it's not functioning as expected. <html> <head> <title>PHP Integrated with HTML&l ...

phphtmlcordova

Trouble aligning Material UI data-table columns (table head) to center in React

I have a data table where I declare rows and columns as simple variables, making it difficult to style them using 'style={{textAlign: center}}'. I tried adding a CSS file, but it did not work with the Material UI table. I am unsure of how to proc ...

cssreactjsmaterial-ui

Adjust the parent container to match the height of the child container when it is being hovered

I have been searching for a solution to this issue, but none of the answers I found seem to work in my specific case. Currently, I have a "Mega Menu" with links on the left side that expand when hovered over, revealing hidden links with images on the righ ...

htmlcss

CSS file unable to be retrieved by the server

I am using the lampp server on Linux. My homepage, home.php, is saved inside the htdocs folder which also contains a css folder with all the necessary CSS files. A snippet of my home.php file includes HTML code without PHP embedded yet. <html> <h ...

phphtmlcssapachelampp

Guide on displaying Adsense ads specifically for mobile devices

Can anyone provide me with a proper method to show/hide my AdSense ads on both mobile and desktop? I am currently using a method that results in 2 console errors. Here is the current approach: We are utilizing two classes, "mobileShow" and "mobileno," t ...

cssmobiledesktopadsense

Suggestions for retaining buttons functionality during drag and drop operations using jQuery UI?

My goal is to create new preset buttons when a button is dropped into the "timeslot" div. However, I am struggling to achieve this and ended up creating a function called "init()" which removes all existing buttons and generates new preset buttons every ti ...

javascriptjqueryhtmljquery-uibootstrap-4

The issue with negative margin-right is not functioning as expected on Chrome's browser

Hello everyone! I'm having some trouble cropping an image using another div. I've noticed that the margin properties -left, -top, and -bottom are working fine, but for some reason the margin-right isn't cooperating on Chrome. Do you have any ...

htmlcssgoogle-chromemargin

Although the ng-click HTML code functions as expected, the same code within an AngularJS function does not seem to work properly

HTML <div id="rightpane"> <div id="rightpanecontent" > <div id ="Addbtn" style="text-align: right;"> <button type="btnAdd" class="btnAddText" ng-click="addText()" style="margin-top:10px;margin-left:166px; color: white;b ...

angularjshtmlangularjs-ng-click

"Troubleshoot: jQuery UI accordion not functioning properly in response to

I've encountered an issue with the accordion functionality while working with dynamic data. To address this, I'm incorporating JavaScript to generate <div> and <h3> tags for the accordion. Here is the code snippet I am using: $(&ap ...

javascriptjqueryhtml