What is the best way to center card-columns on a webpage while using bootstrap version 4.3.1?

I am attempting to center a card-columns horizontally using Bootstrap 4.3.1 while nesting cards.

Below is the structure of my nested cards:

 > Main Card
   >> Card-columns
      >>> Card 1  
      >>> Card 2     
      >>> Card 3 
      >>> Card N

I attempted to apply the mx-auto class to both the main-card and the card-columns, but it did not center the card-columns on the page.

Here is the code snippet:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



    <main role="main">
        <div class="container-fluid">
            
          <div class="mx-auto card bg-light">
              <div class="card-body">
                  <h2 class="card-title text-center text-uppercase text-info">Cards</h2>
                  <hr />

                    <div class="card-columns mx-auto">

                        <div class="card text-center">
                          <div class="card-body">
                            <h5 class="card-title">Card 1</h5>
                            <p class="card-text">This card has a regular title and short paragraph of text below it.</p>
                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                          </div>
                        </div>

                        <div class="card text-center">
                          <div class="card-body">
                            <h5 class="card-title">Card 2</h5>
                            <p class="card-text">This card has a regular title and short paragraph of text below it.</p>
                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                          </div>
                        </div>
                        
                    </div>

              </div>
          </div>

        </div>
    </main>

I have also created a fiddler to showcase what I've tried so far.

How can I properly center the card-column content on the screen?

cssbootstrap-4bootstrap-cardsbootstrap-4.1.x

Answer №1

To achieve the desired layout, remember to set your container div as a flex-box first and then you can apply the necessary bootstrap classes.

In this scenario, use the following:

<div class="card-columns mx-auto d-flex justify-content-center col-12">

If you want to center your card-columns, simply apply justify-content-center. For adjusting the width of each card within the card-columns, utilize the col class from bootstrap. The grid system offers a maximum of 12 columns which can occupy the entire page's view. Customize the number of columns that each card should span by adding col-[0 to 12], up to a maximum of 12 considering the parent tag col-12.

If the parent tag was col-8 instead, the cards could only take up to a maximum of 8 columns.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<main role="main">

  <div class="container-fluid">
    <div class="mx-auto card bg-light">
      <div class="card-body">
        <h2 class="card-title text-center text-uppercase text-info">Cards</h2>
        <hr />

        <div class="card-columns mx-auto d-flex justify-content-center col-12">

          <div class="card text-center col-4">
            <div class="card-body">
              <h5 class="card-title">Card 1</h5>
              <p class="card-text">This card has a regular title and short paragraph of text below it.</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
          </div>

          <div class="card text-center col-4">
            <div class="card-body">
              <h5 class="card-title">Card 2</h5>
              <p class="card-text">This card has a regular title and short paragraph of text below it.</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</main>

Answer №2

card-columns: Eliminate the flexbox from your nested cards and instead switch to inline-block. Make sure to align your card using other techniques as needed.

Learn more about card columns in Bootstrap here

If you opt for using card-deck, consider adding mx-5 instead of auto. This will allow each card to take up 50% of the remaining width. Avoid using mx-auto in this situation, as it won't work when both cards are already taking up half of the width each.

The margin classes like mx-5 are applied before the elements get their respective widths.

You can also try using card-deck align-items-center and specify the width of each card individually.

In conclusion, the issue arises from attempting to combine inline-block and flex together. It's important to make a decision on which approach best suits your layout needs.

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

Hierarchy-based dynamic breadcrumbs incorporating different sections of the webpage

Currently in the process of developing a dynamic breadcrumb plugin with either jQuery or Javascript, however I am struggling to implement functionality that allows it to change dynamically as the page is scrolled. The goal is to have a fixed header elemen ...

javascriptjqueryhtmlcssbreadcrumbs

"Troubleshooting problems with jQuery accordion collapse and styling using CSS

I'm currently dealing with an issue regarding my accordion design. I have customized the stylesheet using themeroller, but when I collapse one of the sections, the header changes to black instead of reverting back to its original red color. I've ...

jquerycssaccordion

Disappearing sticky-top navbar in Bootstrap when scrolling

I'm having trouble with the navbar on my website. Currently, it sticks to the top until I scroll out of the hero-image and then disappears. I would prefer the navbar to remain present throughout the entire page. Any suggestions on how to achieve this? ...

htmlcsstwitter-bootstrapbootstrap-4

My element's padding being overlooked by Tailwind CSS

In the process of developing a comment/response mechanism through MPTT, I am utilizing indentation to clearly designate replies and their respective levels. The comment.level attribute is being employed to establish the padding value. Consequently, a comm ...

htmlcsstailwind-css

Enhancing the functionality of CSS frameworks using CSS modules

Currently, I am working on a React project where I need to customize CSS classes from frameworks like bootstrap. An example is when I want to modify the background color of a specific class (https://github.com/ColorlibHQ/AdminLTE/blob/v2.4.18/dist/css/Admi ...

cssreactjswebpackbabeljsbabel-plugin-react-css-modules

Simple linking inside a Div container

I'm working on a div that has the following markup: <div class="col-sm-12"> <p class="bg-info">Basic Information</p> </div> Here's how it currently looks: I want to add an 'Add /Edit' link to t ...

htmlcsstwitter-bootstrap-3

Connecting JavaScript and jQuery scripts

Help needed! I am a beginner in the world of jQuery and JS. Unfortunately, my JS/jQuery code is not running and I can't figure out why. Can someone please take a look at my HTML and guide me on what might be causing the issue? Do I need to add some ad ...

javascriptjqueryhtmlcss

What is the best way to create dynamic transparency based on cursor position?

Is there a way to create an animation like the one on https://meetwalter.com, where the transparency changes with the cursor's position? I previously attempted a similar implementation using CSS, but it seems that the website accomplishes this effect ...

javascriptcssanimationfrontend

Using jQuery to animate a div when clicked by the mouse

Here's the scenario: I have 3 block elements arranged in a specific order: Image Hidden Text Block (.hidden) Footer Block (.blockimage) When the page loads, the image is displayed over the hidden text block (which contains further infor ...

jquerycss

Struggling to align my Navbar items in one clean line, they seem to pile up and remain fixed on the left side. Utilizing ReactJS and MUi5

I'm struggling with aligning my Navbar items (NavLink) horizontally in one line instead of being stuck on the right side and stacked on top of each other. Can someone help me fix this issue? Here's the code snippet: import React from "react& ...

cssreactjsmaterial-ui

Why is float left not working as expected in CSS and Bootstrap 4?

I need to arrange 9 cards in a grid format of 3 by 3, but when viewed on a smaller device, it should adjust to display as a simple list of 9 cards. CSS: .cardContainer{ width: calc(54rem + 60px); margin: auto; } .card{ width: 18rem; marg ...

htmlcsstwitter-bootstrapbootstrap-4

Replacing the CSS Reset with the Universal Selector

I implemented Eric Meyer's Reset to set the font, and then loaded my stylesheet to globally set the font using the universal selector. Even though I loaded the universal selector in my SASS after the reset, the reset is still taking precedence. (Atta ...

csscss-selectorscss-reset

What is the best way to change a vertical drop-down menu to a horizontal layout?

I need help aligning my dropdown menu horizontally instead of vertically. I tried using the flexbox example from w3 schools, but it didn't work when I included the classes inside my select tag. Even after debugging, I realized that the issue is with t ...

javascripthtmlcssreactjsmaterial-ui

Using jQuery to apply a CSS class to a chosen radio button

How can I dynamically add a CSS class to a radio button based on its selection? $("input[type=radio][name=align]").on('change', function() { var radVal = $("input[type=radio][name=align]").val(); if (radVal == 'center') { $(" ...

jquerycssradio-button

Tips for personalizing the sidebar on your WordPress site and incorporating a collapsible menu feature

Is there a way to customize the sidebar in WordPress so that all the categories and their children are easily accessible? For example, on https://www.w3schools.com, clicking on the header category "HTML" displays all related links in the left sidebar. I&a ...

htmlcsswordpresstagscategories

Is it possible to close the modal when entering any value in it?

I'm working on adding update functionality in React. I currently have an Update button that triggers a modal with an input field for entering the updated value. However, when I try to type even a single character, the modal closes and reopens (see gif ...

reactjsbootstrap-4react-hooksreact-statereact-modal

Ensure Navbar elements remain on a single line

I need my Bootstrap Navbar elements to remain on a single line regardless of the screen width. Although I have searched for a solution to this issue numerous times and tried different approaches, none have proven effective in my case. Below is the code s ...

htmlcsstwitter-bootstrap

Tips for Including a Parallax Image Within a Parallax Section

Currently, I am working on implementing a parallax effect that involves having one image nested inside another, both of which will move at different speeds. My progress has been somewhat successful, however, the effect seems to only work on screens narrowe ...

javascriptjquerycsstwitter-bootstrapparallax

Display the user's location on Google Maps in addition to all other markers for a comprehensive view

How can I modify the code to prompt the user for their location only when they click on a specific button, and then show all markers on the map? This jsfiddle illustrates the current issues: Google map loads markers from a database, and the user is asked b ...

javascriptjquerycssgoogle-mapsgoogle-maps-api-3

I've attempted various methods but the header stubbornly refuses to change its color

Looking for help with my website I'm working on changing the header menu color on my site. I managed to change the colors of the menu items themselves using code provided by someone here, which was great. However, I'm struggling to change the de ...

csswordpressmenucolorsheader