How can I make a card deck with fixed-width cards?

bootstrap cards same height and width
bootstrap card-deck
bootstrap 4 card examples
card deck break
react-bootstrap card-deck example
bootstrap card-deck responsive
bootstrap 3 cards
bootstrap 4 card deck carousel

I want to make a responsive card deck using Bootstrap 4 fixed-width cards. Here I have posted the code below, but it's not responsive. Why?

<div class="card-deck">
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 1</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 2</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 3</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 4</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>


For a Bootstrap 4 card deck with fixed-width cards, do this:

Put each card into a column with the classes col-auto mb-3 (auto-width column + margin-bottom with three units).

To center them, add the justify-content-center class to the row.

Here's a working code snippet (click "run code snippet" below and expand to full page):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid mt-4">
    <div class="row justify-content-center">
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <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="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <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="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <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="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <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="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <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="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <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="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <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="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
    </div>
</div>

Cards · Bootstrap, Also you can look for the code for how to create a card and then use it according to your need. You can modify the pictures using img tag given inside the card  Carefully fold the paper at the line between the solid black rectangles and the back of your cards. Then fold this so that it lines up with the top of the face of your cards. These folds should be done with the printed side of the paper facing away from you so that the back and the front of the cards will end up on the outside of the folded paper.


In here it is mentioned, these layout options are not yet responsive. So I have found a simple solution. Change the parent <div class="card-deck">...</div> to <div class="row">...</div>.

How to design Responsive card-deck with fixed width in Bootstrap , There are also some interesting new text classes for uppercase and capitalize. These handy utilities make it Easy. If you want to use cool icons in Bootstrap 4, you  Type: Business cards sized blank deck (rounded corners) Number of cards per deck: from 21 up to 273; Customization: Each card can be customized individually both front and back as required. Dimensions: 50mm x 89mm, 2" x 3.5" Material: [see details] S27 promotional card stock with blue core (smooth finish)


Deck makes cards equal height.

Adding a row-deleting deck was correct. Adding col-lg-3 col-md-2 col-sm-12 will give a four-cards desktop, etc. down to one on a phone.

Set the height using the height of the largest number so an "OK" looks straight.

Bootstrap Cards, Cards in .card-deck do not always have same width #19650. Closed. paradite opened I was able to fix the issue by using .card-deck .card  Outline the details of your deck, what the theme of your cards is going to be, how many cards you want your deck to contain, your desired card size, whether you’ll need a box and/or booklet for your deck, how you’re going to be using your cards in your business, and so on.


Bootstrap 4 card deck card width on Codeply, You can also add header and footer within your cards using the .card-header and The following example will create a fixed-width card with images, text, Card decks are similar to card groups (i.e. each card has equal width and height). Last year, I did the #diytarotchallenge online to make a 22-card deck. It’s a lot of fun and you’re participating with other people who encourage and support your progress. Take little bites. Work on one card a day or a few cards a week. Join Kickstarter. Kickstarter.com helps people fund their creative projects.


Cards in .card-deck do not always have same width · Issue #19650 , Set a container of cards, using the card-deck class.Work it inside the following div that would be of equal width and height − To edit the deck, click on its name under the Decks & Tables tab on the sidebar. This brings up the Edit Deck window. Each card in a deck is filed in a single column list. If I click on any card in the list, a new window appears where I can change the name of the card, replace the image of the card face or delete the card entirely.


How to Use Bootstrap 4 Cards, Add the .stretched-link class to a link inside the card, and it will make the whole The .card-deck class creates a grid of cards that are of equal height and width. Bootstrap 4 Card Layouts. Bootstrap 4 cards have no fixed width, they take the full width of their parents. In order to size and arrange cards, you have multiple possibilities. Using the Grid system. One of the possibilities is to use the grid system.