Bootstrap 4 allows for the use of the d-lg-flex class to create a flexible column layout

I'm facing an issue with my table on smaller screens where some columns need to be hidden. Here's the code snippet I'm using:

<table>
  <tr>
    <td>Normal 1</td>
    <td class="d-lg-flex d-none">hidden 1</td>
    <td class="d-lg-flex d-none" >hidden 1</td>
    <td class="d-lg-flex d-none">hidden 1</td>
    <td>Normal 2</td>
  </tr>
</table>

However, on larger screens, the columns with 'd-lg-flex d-none' are appearing as rows instead of separate columns. I need a solution to display them correctly on large screens.

Any assistance would be greatly appreciated. Thanks!

htmltwitter-bootstrapcssbootstrap-4

Answer №1

Replace d-lg-flex with d-lg-table-cell. This modification should resolve the issue:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<table>
  <tr>
    <td>Normal 1</td>
    <td class="d-lg-table-cell d-none">hidden 1</td>
    <td class="d-lg-table-cell d-none">hidden 1</td>
    <td class="d-lg-table-cell d-none">hidden 1</td>
    <td>Normal 2</td>
  </tr>
</table>

Check out the jsfiddle link for a live example: https://jsfiddle.net/bfse58ta/1/

Answer №2

Typically, the default display setting for td elements is table-cell. However, applying d-none will hide them by changing the display property to none. If you want to show them again on larger screens, you can use d-lg-table-cell.

.d-lg-table-cell {
  display: table-cell !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<table>
  <tr>
    <td>Normal 1</td>
    <td class="d-none d-lg-table-cell">hidden 1</td>
    <td class="d-none d-lg-table-cell">hidden 1</td>
    <td class="d-none d-lg-table-cell">hidden 1</td>
    <td>Normal 2</td>
  </tr>
</table>

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 could be the reason for the dropdown-item not being displayed?

I've encountered an issue with my navigation bar while using Bootstrap 5. The dropdown item (Login) for the user icon is not appearing as expected. Below is the code snippet in question: <button class="btn dropdown-toggle" type="butt ...

htmldropdownbootstrap-5

Lines that are next to each other within an svg path and have a stroke

I'm working with an SVG that contains multiple lines within a path element. <path stroke-width="13" stroke="black" fill="orange" d="M 100 100 L 300 100 Z L200 300 z"/> Due to the stroke-width, the lines a ...

htmlcsssvg

Unlocking the res property in index.js from an HTML script tag: A step-by-step guide

Can anyone help me with the access variable issue I am facing? I have two files, index.js and page.ejs. These files require me to create a timer linked with datetimes stored on my local server. //index.js.. router.get('/mieiNoleggi', functio ...

javascripthtmlexpress

Learn how to connect a button to a webpage using jquery while also executing another function when clicked

I would like the showAll button click to redirect to another page where the showAll function is executed and the results are displayed on the new page. Additionally, I am looking for a way to modify the console.log statement to output the result on the new ...

jqueryhtml

Is there a way to determine if the tab has been muted by the

Chrome enables users to easily mute tabs by right-clicking on them and selecting Mute Tab. I am curious about whether there is a method to detect when a user has muted the tab. In other words, I am interested in knowing if it's possible for a website ...

javascripthtmlgoogle-chrome

Update a mySQL table using dynamic input from a table

I'm facing challenges updating a mysql database with a dynamic table that allows me to add or remove rows before submitting the form. While I can make it work with hardcoded values, I struggle when trying to update with a while loop. It just doesn&ap ...

phpmysqlhtml

Creating a responsive website can be achieved by utilizing the ul element or incorporating a div with the CSS

When it comes to responsive design, the choice between utilizing ul and div elements is crucial, especially in regards to the navigation bar. After observing many other developers, I initially opted for ul but soon realized that for certain navigation beh ...

htmlcssresponsive-design

One effective way to redirect after a PUT request and display a one-time message

Here's what I'm aiming for in terms of desired behaviour: A user navigates to a password change web page. The user completes the form and it is sent via PUT request to our REST server. Upon successful completion, the user is redirected to their ...

javascriptjqueryhtmlajaxhttp-redirect

Update the less mixin

I attempted to eliminate the border radius from all Bootstrap elements by creating a custom-mixins.less file with the following lines in it. My intention was for these lines to overwrite the original .border-radius mixin, but unfortunately, it did not work ...

csslessmixins

Keep bootstrap content aligned to the left

I am working on creating a webpage using bulma/bootstrap and my goal is to have some text positioned on the left side of the screen. I want this text to be displayed in the red area and to stay fixed in place when I scroll down, similar to a side panel. ...

htmlcssbulma

Comparison of XPath operators //* versus //element versus //

My mind is a bit muddled when it comes to finding XPath: I'm not sure when to use //* at the beginning and when just // will suffice. For instance, I recently encountered this issue while trying to understand it on . On their homepage, there is a sea ...

htmlxmlselenium-webdriverxpath

Mastering the art of column stacking with CSS on your WordPress website

Looking for a CSS solution to adjust the layout when the screen resolution is lowered. Currently, I have two rows with three columns in each row, containing blurbs. My goal is to make these two rows convert into three rows with two columns each at a cert ...

csswordpress

Pass a JavaScript variable to a PHP script using AJAX when a button is clicked, with a dynamically set href attribute

This is the current situation: There is a checkbox on each row of a table that represents some information An initially disabled button becomes enabled when any checkbox is checked The button is enclosed by an <a></a> tag as shown: <a>&l ...

javascriptphphtmljqueryajax

Placing a FontAwesome icon alongside the navigation bar on the same line

Upon login, the navigation bar experiences display issues. Prior to logging in: https://i.stack.imgur.com/ZKyGe.jpg Following successful login: https://i.stack.imgur.com/zyP3m.jpg An obstacle I'm facing involves the Log Out fontawesome icon wrappi ...

htmlcss

Tracking the progress of reading position using Jquery within an article

Here is an example of a reading progress indicator where the width increases as you scroll down the page: http://jsfiddle.net/SnJXQ/61/ We want the progress bar width to start increasing when the article content div reaches the end of the article c ...

javascriptjqueryhtmlcssscroll

Extract the raw text content from nested elements

Working with highlight.js to include a custom CSS code, however, this library automatically adds span tags around the desired text For example: <pre> <code class="language-css hljs" contenteditable="true" id="css-code&quo ...

javascripthtmlcss

Begin your journey with Foundation Navigation as it seamlessly transitions from left to right

I am currently working on this navigation: I am trying to modify the behavior of the hamburger menu so that when it is clicked, it slides from left to right instead of its current downward motion. Additionally, I would like to adjust the width of the menu ...

jqueryhtmlcsszurb-foundationnavbar

Text positioned in the center alongside an image, or if there is limited space, it will be aligned to

Take a look at this code snippet: img { float: left; } #inner { height: 128px; background-color: yellowgreen; display: table-cell; vertical-align: middle; } #content { background-color: red; } <img src="http://cdn.memegener ...

htmlcss

Unable to apply border radius to the div containing the video

Currently, I am attempting to create a video with rounded corners by wrapping the <video> tag in a div element with rounded corners. This method works perfectly in Chrome and Firefox, but unfortunately does not work in Safari. It seems like this ma ...

csshtmlhtml5-video

Using PHP to dynamically pull and update webpage content directly from the database

Currently, I am utilizing PHP to upload information into a database and then using PHP again to display that data. In the code snippet provided below, PHP is used to exhibit all the content stored in the database. Each row within the database table will b ...

phphtmlmysql