How to conceal an element using CSS in a bootstrap4 `card` when the columns are narrow

Question

How to conceal an element using CSS in a bootstrap4 `card` when the columns are narrow

In my grid layout, I have a maximum of 12 image cards per row. When there are 12 cards in a row, the size becomes quite small, so I want to show just the image. However, when there are only 6 cards in a row, I would like to display the description as well.

I attempted to use the d-none d-sm-block utilities but they are defined by the viewport rather than considering the size of the card in the column.

<div class="d-flex flex-row flex-wrap">
  <div class="col-md-4">
    <div class="card mb-5 border-0">
      <a class="link" href="{{pathFor 'thing.page' id=_id}}" >
        <img src="{{getImage}}" class="card-img-top img-fluid" alt="">
      </a>
      <div class="card-body">
        <p class="card-text">
          text 1
        </p>
        <p class="card-text">
          text 2
        </p>
      </div>
    </div>
  </div>
</div>

The value of col-md-4 is dynamically changed based on the number of columns set by the user.

My goal is for the card-text to be hidden when there are 12 columns (smaller cards), but not if there are 5 columns!

Here is an image example:

and another one here:

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Discover these innovative card layouts utilizing a grid system with 12 columns across all devices, including large, small, and extra-small (mobile) views. Additionally, the d-none class is employed for hiding content on all devices.

Take a look at these designs and explore how they can be utilized in your projects. Feel free to experiment and adapt as needed!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
     
    <div class="container">
      <div class="row my-3">
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
        <div class="card-body d-block d-lg-none text-center">card 1</div>
          </div>
        </div>
        
         <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
        <div class="card-body d-block d-lg-none text-center">card 2</div>
          </div>
        </div>
        
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
        <div class="card-body d-block d-lg-none text-center">card 3</div>
          </div>
        </div>
        
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
        <div class="card-body d-block d-lg-none text-center">card 4</div>
          </div>
        </div>
        
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
        <div class="card-body d-block d-lg-none text-center">card 5</div>
          </div>
        </div>

        [Remaining sections of code not shown here for brevity]

      </div>
    </div>

    </body>
    </html>

Explore unique card layouts with a 12-column grid system optimized for various device sizes, along with specific classes to manage visibility based on screen size.

Dive into these creative design examples and see how they can be implemented to enhance your projects. Try them out and adapt to suit your needs!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container">
  <div class="row my-3">
    <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2 d-xs-none">
      <div class="card">
    <div class="card-body text-center">card 1</div>
      </div>
    </div>
    
     <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2 d-sm-none">
      <div class="card">
    <div class="card-body text-center">card 2</div>
      </div>
    </div>

    [Remaining sections of code not shown here for brevity]
      
  </div>
</div>

</body>
</html>

Answer 2

Discover these innovative card layouts utilizing a grid system with 12 columns across all devices, including large, small, and extra-small (mobile) views. Additionally, the d-none class is employed for hiding content on all devices.

Take a look at these designs and explore how they can be utilized in your projects. Feel free to experiment and adapt as needed!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
     
    <div class="container">
      <div class="row my-3">
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
        <div class="card-body d-block d-lg-none text-center">card 1</div>
          </div>
        </div>
        
         <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
        <div class="card-body d-block d-lg-none text-center">card 2</div>
          </div>
        </div>
        
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
        <div class="card-body d-block d-lg-none text-center">card 3</div>
          </div>
        </div>
        
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
        <div class="card-body d-block d-lg-none text-center">card 4</div>
          </div>
        </div>
        
        <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2">
          <div class="card">
          <p class="text-center mt-3">hello</p><hr />
        <div class="card-body d-block d-lg-none text-center">card 5</div>
          </div>
        </div>

        [Remaining sections of code not shown here for brevity]

      </div>
    </div>

    </body>
    </html>

Explore unique card layouts with a 12-column grid system optimized for various device sizes, along with specific classes to manage visibility based on screen size.

Dive into these creative design examples and see how they can be implemented to enhance your projects. Try them out and adapt to suit your needs!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container">
  <div class="row my-3">
    <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2 d-xs-none">
      <div class="card">
    <div class="card-body text-center">card 1</div>
      </div>
    </div>
    
     <div class="col-lg-1 col-sm-2 col-xs-12 my-xs-2 my-sm-2 d-sm-none">
      <div class="card">
    <div class="card-body text-center">card 2</div>
      </div>
    </div>

    [Remaining sections of code not shown here for brevity]
      
  </div>
</div>

</body>
</html>

Answer 3

Answer №2

Utilize the d-block d-lg-none to make it work.

I have 12 cards displayed at 1200px, and then reduce to 6 cards once below 1200px.

To modify the resolution, change lg in two instances.

First in col-2 col-lg-1 and secondly in d-block d-lg-none

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

<div class="row">
        <div class="card col-2 col-lg-1">
            <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
            <div class="card-body d-block d-lg-none">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        
      (remaining HTML code structure remains unchanged)

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cabaa5babaafb8e4a0b98afbe4fbfce4fa">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer 4

Utilize the d-block d-lg-none to make it work.

I have 12 cards displayed at 1200px, and then reduce to 6 cards once below 1200px.

To modify the resolution, change lg in two instances.

First in col-2 col-lg-1 and secondly in d-block d-lg-none

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

<div class="row">
        <div class="card col-2 col-lg-1">
            <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
            <div class="card-body d-block d-lg-none">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        
      (remaining HTML code structure remains unchanged)

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cabaa5babaafb8e4a0b98afbe4fbfce4fa">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

How to conceal an element using CSS in a bootstrap4 `card` when the columns are narrow

Answer №1

Discover these innovative card layouts utilizing a grid system with 12 columns across all devices, including large, small, and extra-small (mobile) views. Additionally, the d-none class is employed for hiding content on all devices.

Explore unique card layouts with a 12-column grid system optimized for various device sizes, along with specific classes to manage visibility based on screen size.

Answer №2

Similar questions

I'm finding it difficult to decide which comparison operators to utilize for my JavaScript game. Experimenting with both the "&&" and "||" options has left me unsure of which

Issues with the alignment of items in an item grid in CSS/HTML are causing the display to appear

Accessing the value of a hidden field within an ng-repeat loop when binding to an HTML table

"Utilizing a range input element with a set value on the slider

JavaScript and jQuery experiencing difficulty rendering proper style and image in output display

What is the best way to show a dynamic number of data elements for a specific attribute in a Vue js component?

Is it possible to consolidate all HTML button functionality into a single jQuery function?

Adjusting the height of a div based on the height of the window

Tips for displaying a div near the cursor's location when hovering in React JS

Show variously colored information for each selection from the dropdown using Angular Material

What is the best way to apply a background-image to a DIV while also implementing a double line border to prevent the image from showing through the border?

The concept of an HTML pop-up message that hovers above the content

The bootstrap navbar dropdown feature isn't functioning properly on iPhones

Issues with properly triggering re-clicking events in AngularJS when using Bootstrap modal

Having difficulty extracting information from an HTML page using Swift

"Utilizing the Bootstrap framework to enhance the functionality

Modifying the background color of a table row element when hovering over it

Adding dynamic text to a <span> tag within a <p> element is causing a disruption in my layout

When using Angular with mdbootstrap, the mdb-tabs directive will move to the end if the ngIf condition is true

The minification of CSS in Bootstrap 4 is causing unexpected outcomes