What is the best way to create space between Bootstrap cards without causing flex-wrap to activate?

Looking for guidance on managing Bootstrap cards with a 2px margin between them.

Encountering flex-wrap issues when applying margin classes or styles directly to the cards.

Any suggestions on how to handle this behavior effectively?

Should I consider adding a max-width to the cards?

.dark-theme body,
.dark-theme .card {
  background-color: #121212;
  color: #ffffffa6;
}

.dark-theme section.card {
  background-color: #464646;
}

.card {
  border-width: 0;
  margin: 3px;
}

main {
  padding: 100px;
}

h1 {
  text-align: center;
}

h2,
.card {
  margin-top: 20px;
}

.dark-theme .btn {
  background-color: salmon;
  border-color: salmon;
}
<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b1bcbca7a0a7a1b2a393e6fde3fde1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<div class="highlights row">
  <section class="card col-md-6 col-lg-4">
    <h3>Where does it come from?</h3>
    <p>
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    </p>
    <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    <a href="#" class="card__btn btn btn-info">when an unknown</a>
  </section>

  <section class="card col-md-6 col-lg-4">
    <h3>Where does it come from?</h3>
    <p>
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    </p>
    <p>
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    </p>
    <a href="#" class="card__btn btn btn-info">
                  when an unknown
                </a>
  </section>

  <section class="card col-md-6 col-lg-4">
    <h3>Where does it come from?</h3>
    <p>
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </p>
    <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    <a href="#" class="card__btn btn btn-info">
                  when an unknown
                </a>
  </section>

htmlcsstwitter-bootstrapflexboxbootstrap-5

Answer №1

To start off, it is important to eliminate any margins that are applied to Bootstrap classes. Bootstrap is designed in a way that spacing and sizing are already included in the classes.

I have made significant changes to the structure of your code. The goal was to align the elements according to Bootstrap guidelines. Avoid nesting each card within sections, and instead nest them inside divs. The three cards aligned in a row can be considered a section, so I grouped them together within one section called the "highlights" class.

The purpose of "col" classes is to allocate space for specific content. With a three-card layout, it is appropriate to use "col-4". The largest column size is "col-12", which spans the entire width of the screen. By dividing 12 by 4, you get 3 columns of equal width. Additionally, you can utilize "sm", "md", and "lg" for responsiveness on different screen sizes. The columns are centered on the page by the parent "row" class.

The issue with your code not functioning as expected was primarily due to extra CSS margins and the incorrect nesting of "cards" within "col" classes. Also, the incorrect column sizing was mentioned earlier.

I recommend revisiting the Bootstrap Grid System. With a good grasp of Bootstrap, you can create a fully responsive website with minimal CSS knowledge.

.dark-theme body,
.dark-theme .card {
  background-color: #121212;
  color: #ffffffa6;
}

.dark-theme section.card {
  background-color: #464646;
}

.card {
  border-width: 0;
}

main {
  padding: 100px;
}

h1 {
  text-align: center;
}

.dark-theme .btn {
  background-color: salmon;
  border-color: salmon;
}
<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9895958e898e889b8abacfd4cad4c8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="highlights">
  <div class="row w-100 m-0 justify-content-center">

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card w-100">
        <h3>Where does it come from?</h3>
        <p>
          orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
        </p>
        <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        <a href="#" class="card__btn btn btn-info">when an unknown</a>
      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card w-100">
        <h3>Where does it come from?</h3>
        <p>
          orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
        </p>
        <p>
          orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
        </p>
        <a href="#" class="card__btn btn btn-info">
      when an unknown
      </a>
      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card w-100">
        <h3>Where does it come from?</h3>
        <p>
          orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
        </p>
        <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        <a href="#" class="card__btn btn btn-info">
    when an unknown
    </a>
      </div>
    </div>
  </div>
</section>

Answer №2

Here, you have the option to utilize the Gutters class within the Bootstrap grid system.

Gutters refer to the spaces between column content, which are created using horizontal padding. By applying padding-right and padding-left to each column, and using negative margin to adjust at the beginning and end of each row, content alignment is achieved.

You can incorporate g-1, g-2, g-3, g-4, and g-5 in rows based on your specific requirements.

.dark-theme body, .dark-theme .card {background-color: #121212; color: #ffffffa6;}
.dark-theme section.card {background-color: #464646;}
.card {border-width: 0;}
main {padding: 100px;}
h1 {text-align: center;}
.dark-theme .btn {background-color: salmon;border-color: salmon;}
<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd9d4d4cfc8cfc9dacbfb8e958b9589">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="highlights">
  <div class="row justify-content-center g-1">

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card">
        <h3>Where does it come from?</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        <a href="#" class="card__btn btn btn-info">when an unknown</a>
      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card">
        <h3>Where does it come from?</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p><a href="#" class="card__btn btn btn-info">when an unknown</a>
      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card">
        <h3>Where does it come from?</h3>
        <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p><p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#" class="card__btn btn btn-info">when an unknown</a>
      </div>
    </div>
  </div>
</section>

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

Unexpected behavior with Bootstrap classes

I have come across the following HTML code which appears to be using bootstrap, however, it is not responsive. It is supposed to be responsive and adapt to mobile and tablet devices, but it still displays the desktop view on mobile and tablet screens. < ...

htmlcssangulartwitter-bootstrapbootstrap-4

Encountering issues with accessing image files located in the public folder of my Next.js project - Receiving a 404 Error message

I am currently facing an issue with my Next.js project where I am unable to use image files from the public folder. Despite checking that the file paths, names, and extensions are correct, as well as ensuring my configurations are accurate, I keep encounte ...

javascriptcssnext.js

Utilizing Ember to transmit models to Bootstrap Popovers

Seeking assistance from anyone familiar with utilizing Bootstrap for Ember components to help resolve an issue. I am trying to understand how to pass a model to the component when using {{bs-bind-popover}} <div {{bs-bind-popover templPop}}>Show pop ...

javascripttwitter-bootstrapember.js

The div-tag is not displaying the background image as expected

I'm completely stumped. My goal was to create my own gallery, but right from the start, I hit a roadblock: Trying to display an image as a background in a <div>. I've tried everything, searched high and low on the internet, combed through s ...

phpcsshtmlbackground-image

Looking for the optimal method to display numerous lines of text in HTML, one by one, at intervals of 60 seconds?

I'm working on a display page for my website. The main text in the center needs to change every 60 seconds. I have over 150 individual lines of text that I want to cycle through on the page. What would be the most efficient way to load all these te ...

javascriptcssajaxhtml

Show exclusive results of search queries from the database

I'm currently facing an issue with my PHP code where it displays all the data from the database instead of the specific data I am searching for. I have created a form to enter the desired data but it seems to be pulling all the information. Any sugges ...

phphtmlmysql

Shift attention to the subsequent division after a correct radio option or text input has been submitted

I need to enhance the user experience on my form. When a user interacts with specific elements like hitting enter in a text input or clicking a radio button, I want to automatically focus on the next "formItem" division. My form structure is organized as ...

javascriptjqueryhtmlangularjsangular-material

Placeholder text missing in Internet Explorer 11

There seems to be a problem with the placeholder text not showing up in Internet Explorer 11 when using AngularJS. It displays correctly on all other browsers and I have not made any changes to the CSS that could affect it. I even tried disabling all style ...

angularjshtmlplaceholder

How to review the current page in Joomla 2.5

Is there a way to determine the current page the user is visiting in Joomla 2.5? I have a code snippet that checks if the user is on the home page: $menu = $app->getMenu(); if ($menu->getActive() == $menu->getDefault()) { However, I now need a s ...

phphtmlcssjoomla

Struggling to incorporate hidden and visible features using Django framework

One of my unique functionalities is that I contain a radio button in my form. If the user clicks "Yes," an error message will be displayed on the screen indicating that this is not the correct place to submit data, and suggesting that they visit another we ...

javascriptjquerycssdjangopython-3.x

Achieve vertical center alignment of items using flexbox styling

I'm attempting to vertically center elements using CSS flexbox. I have successfully implemented it with the non-vendor-prefixed code, but I am facing issues in Webkit (Chrome) even with the vendor prefixes. My goal is to vertically align the spans wi ...

cssflexbox

Delivering Access data in HTML format via email

In my MS Access database, I have a report that combines client records from one table (including email addresses) with grouped records fetched from other tables using a Query. I want to send this report directly to each client via email, within the body o ...

htmlvbams-access

Unable to apply .png image using the content property in a Symfony project

I have a png image located in src/AppBundle/Resources/public/img To set the png image using the css content property, I used this code: content: url(../../public/assets/img/optional-checked.png); However, I encountered an error: GET http://127.0.0.1:80 ...

csssymfony

The Iframe is malfunctioning and not displaying properly

Thank you for the insights on header issues. I have a follow-up question: Is it possible to identify header problems that prevent me from displaying content in an iframe just by looking at the link? If so, can I display a different page for those problemat ...

phphtmliframe

Is it possible to implement formvalidation.io in a React project that is using Materialize-css?

Can the formvalidation.io plugin be used with React and Materialize-css in a project? My project consists of multiple input components that may or may not be within a form. I want to utilize formvalidation for input validation. However, I am unable to find ...

javascripthtmlreactjsmaterializeformvalidation.io

Running a Chrome content script once an AJAX request has been triggered by the <body> element

I am facing a challenge with running the content script before the DOM is fully loaded. To give context, there is an AJAX request within a tag which gets triggered on $(document).ready(). Once this request is completed, my extension code kicks in. To tra ...

javascriptjqueryajaxhtmlgoogle-chrome-extension

How can I utilize CSS to dictate color schemes on an HTML5 canvas element?

Currently, I am working on a checkers project where the first step is to create the initial board. The way we are currently implementing this has raised a philosophical concern. We are using the fillRect function to define the color of the "dark" squares a ...

csshtml

Stop animation on mobile devices by modifying the CSS file

Using jQuery, I added an animation class to a div on my webpage. The animation.css file has been included as well. The class animated slideInLeft is currently in use. My question is whether it is possible to disable this class for mobile devices in order ...

jqueryhtmlcss

Pre-switch-checkbox Bootstrap 5 text implementation (without the need for additional addons/plugins)

I am trying to implement a switch-toggle using Bootstrap 5 without any additional addons. Is there a way to display text before the toggle switch? The following code snippet is not working: <div class="form-check form-switch"> off < ...

checkboxswitch-statementbootstrap-5

Paused session in web development

Currently, I am in the process of building a website using HTML and CSS and have encountered an issue. Within my CSS file, I have defined an ID called "full" which sets a wooden background after the sidebar and is intended to span across the entire page. A ...

htmlcssclass