Setting the minimum width for Cards in Bootstrap: A How-To Guide

I'm facing an issue with Bootstrap cards. When I set a minimum width for the cards, they end up overlapping as I reduce the window width. How can I ensure that the third card moves to the next row to prevent this overlapping?

https://i.sstatic.net/XAdKn.png

<div class="container" style="margin-top:3em;">
      <div class="card-columns">
        <div class="card" style="min-width: 300px;">
          <img src="images/nasoclearSalineNasalSpray.png" class="card-img-top" style="max-height:500px;"alt="images">
          <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>

        <div class="card" style="min-width: 300px;">
          <img src="images/pedialytePowder.png" class="card-img-top" style="max-height:500px;" alt="images">
          <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>

        <div class="card" style="min-width: 300px;">
          <img src="images/chericofSuspension.png" class="card-img-top" style="max-height:500px;"alt="images">
          <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>
csstwitter-bootstrapsassbootstrap-4

Answer №1

<div class="container" style="margin-top:3em;">
  <div class="card-columns custom-columns">
    <div class="card">
      <img src="images/nasoclearSalineNasalSpray.png" class="card-img-top" style="max-height:500px;" alt="images">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img src="images/pedialytePowder.png" class="card-img-top" style="max-height:500px;" alt="images">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img src="images/chericofSuspension.png" class="card-img-top" style="max-height:500px;" alt="images">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

deleted the line "width min-width:300px;"

Added .custom-columns class

    @media (max-width: 700px) {
        .card-columns.custom-columns {
            column-count: 1;
        }
    }
    @media (min-width: 700px) {
        .card-columns.custom-columns {
            column-count: 2;
        }
    }
    @media (min-width: 1000px) {
        .card-columns.custom-columns {
            column-count: 3;
        }
    }
    @media (min-width: 1400px) {
        .card-columns.custom-columns {
            column-count: 4;
        }
    }

https://i.sstatic.net/ZOjCO.png

Answer №2

If you're utilizing bootstrap, then make the most of its grid system.

 <div class="container" style="margin-top:3em;">
    <div class="row">
      <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="card">
          <img src="images/nasoclearSalineNasalSpray.png" class="card-img-top" style="max-height:500px;"alt="images">
          <div class="card-body">
            <h5 class="card-title">Unique title treatment</h5>
            <p class="card-text">Providing text below to introduce additional content.</p>
            <a href="#" class="btn btn-primary">Explore further</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="card">
          <img src="images/pedialytePowder.png" class="card-img-top" style="max-height:500px;" alt="images">
          <div class="card-body">
            <h5 class="card-title">Unique title treatment</h5>
            <p class="card-text">Providing text below to introduce additional content.</p>
            <a href="#" class="btn btn-primary">Explore further</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="card">
          <img src="images/chericofSuspension.png" class="card-img-top" style="max-height:500px;"alt="images">
          <div class="card-body">
            <h5 class="card-title">Unique title treatment</h5>
            <p class="card-text">Providing text below to introduce additional content.</p>
            <a href="#" class="btn btn-primary">Explore further</a>
          </div>
        </div>
      </div>
    </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

Can you explain the intended function of .reference in the CSS code provided?

Currently delving into some sample HTML from codrops. I came across the following CSS styling. After scouring the web, it seems others have used span.reference, but I can't seem to grasp the purpose of .reference. Any insights would be much appreciat ...

cssmenu

Tips for allowing divs to be dragged and resized within table cells and rows

UPDATE I believe that utilizing Jquery is the most appropriate solution for resolving my issue with the demo. Your assistance in making it work would be greatly appreciated. Thank you. My goal is to develop a scheduler application. https://i.sstatic.net ...

javascriptjquerycssreactjsjquery-ui

What is the best method to position images in the same way as seen in the screenshot

Any tips on aligning images shown in the screenshot? Please note that the images will be from the backend. https://i.stack.imgur.com/LnYLM.jpg I experimented with code to position images using top, right, left, and bottom properties, but it becomes cumb ...

javascripthtmlcssbootstrap-4

Adjusting the display of HTML elements depending on geolocation authorization

I am currently facing an issue with my HTML code where I want to show an element only if the user declines to share their location with the browser. However, my code is not functioning as expected when the user rejects the location request. On the other ha ...

javascripthtmlcss

"Trouble encountered when attempting to add a CSS class to a select option in Firefox version 5

Here is the HTML code I am working with: <select id="WageBenifits_PayType" name="WageBenifits.PayType"> <option class="selectOption" value="" selected="selected">Please Select Value</option> <option value="COM">COM - COMMIS ...

htmlcssfirefox

Embed a photo into a pop-up window

Is there a way to dynamically insert an image into a Modal by utilizing the value of the variable data-image? This variable will change based on the selected image. <script type="text/javascript"> $('#myModal').on('show.bs.m ...

javascripthtmlbootstrap-4

Tips on positioning a button "above" the carousel-control-next icon

I have a carousel and I added a button to stop the spinning. However, when I try to click on the button, it seems like the "carousel-control-next" tag is being clicked instead. How can I solve this issue? ** Interestingly, when I remove the "carousel-cont ...

javascripthtmljquerytwitter-bootstrapbootstrap-4

Is there a way to place two input fields from different forms side by side on the same line?

Here are two forms extracted from an html page: <form method="get" action="search/s" id="number"> <div style="text-align: center;"> <input type="text" id="regNo" name="regNo" size="30" maxLength="50" > or ...

javascripthtmlcssuser-interfaceweb

Encountering an issue with ng serve following the update of Angular, Material, and Bootstrap

Here is the package.json configuration: angular: 5.2.8 angular material : 5.1.1 angular/cli: "~1.7.3" bootstrap: "~4.0.0" Encountering an error while running ng serve: ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader?? embedded!./nod ...

angularthemesbootstrap-4angular-materialangular-cli

Transferring a parameter from link_to to a popup window in a Rails application

I am facing an issue with passing an object to my modal in Rails. The object has a table of results with an attribute "email", but I seem unable to pass it so that I can use it within my modal. index.html.erb <div class="modal fade bs-example-modal-lg ...

javascriptjqueryhtmlruby-on-railstwitter-bootstrap

Scrollbar generation causing spacing issues in Internet Explorer

So I've been working on implementing a scrollable div with a specific code overflow: auto; However, for some reason, when viewed in Internet Explorer, the scroll creates an unexpected margin on the right side. It functions properly on both Chrome an ...

htmlcssinternet-explorerscrolloverflow

The theme font fails to take effect on the paragraph

As a novice in HTML and CSS, I attempted to use the "Roboto Condensed" font from a WordPress theme for my entire site. Although I successfully implemented this custom font for a menu, I encountered difficulties when trying to apply it to paragraph elements ...

htmlcsswordpressfonts

Ways to adjust the size of a map in Vue2Leaflet if its container was initially hidden

Is there a way to refresh a Leaflet map integrated with Vue2Leaflet when it's initially hidden and then displayed (for example, when hidden by a bootstrap collapse element)? <template> <b-container> <b-button v-b-toggle="collapse ...

vuejs2bootstrap-4leafletresizemaps

How do I switch the background-image on li hover and revert it back when I move off the li element?

Looking to update the background image of a div upon hovering over a li element? Check out this example here. So far, I've got that part working fine. But now I want the background picture to revert back to its original CSS when I move away from the l ...

javascriptjqueryhtmlcssbackground-image

Inconsistency in naming of jQuery CSS properties

Can you explain the reason behind the difference in property names: $(elem).css('padding-top') compared to $(elem).css('marginTop') ? Wouldn't it make more sense if we use: $(elem).css('margin-top') instead? ...

jquerycss

Implementing CSS styles based on the count of elements

Within my react js project There is a particular block that may contain either one or two elements, depending on the runtime conditions. For instance: Scenario 1: (two groups are present) <div class='menu-list'> <div class='g ...

css

What is the best way to use CSS to hyphenate a capitalized word?

I have a single word that needs to be hyphenated, but the lang=en hyphenate: auto property does not work on capitalized words. To address this, I utilized the slice function in JavaScript to split the word in half so that the second half, which requires h ...

htmlcssreactjsfirefoxcss-hyphens

Utilizing a Bootstrap 3 modal within an AngularJS application with html5mode

How to display Bootstrap Modal in the first click when using html5Mode(true). When clicking on launch demo modal, the URL changes to /#myModal upon the 1st click but the modal does not appear. The modal only appears upon clicking launch demo modal again. ...

twitter-bootstrapangularjstwitter-bootstrap-3bootstrap-modal

Bordering the isotopes

Currently, I am utilizing a plugin that involves the isotope filter library. By setting the width to 33.33%, my list elements are organized into 3 columns. I am trying to specify the middle column to have side borders. However, whenever I click on the filt ...

htmlcssjquery-isotope

Flexbox: Arrange header and footer in a sidebar layout using flexbox styling

In my content layout, I have structured the sections as header, content, and footer. While I want to maintain this order for small devices, I am looking to shift the header and footer to the sidebar on desktop. I have already implemented this using floats ...

htmlcssflexbox