How to Place Two Bootstrap Cards Next to Each Other

The cards are one of the common components of any application. They provide design patterns to compile related data. More specifically, Bootstrap offers various classes to create and adjust cards, such as “card-text”, “card-header”, “card-footer”, “card-img-top”, and many more. The “card-text” is utilized to specify some text on the card, and the “card-img-top” adjusts the image on the top of the card.

To adjust the placement of the items using Bootstrap, the “row” and “col” classes can be considered. The “row” in bootstrap contains 12 virtual columns, and the “col” determines how many of the 12 possible columns you want to use for each element.

This post will teach about adjusting two Bootstrap cards on a web page side by side.

How to Place Two Bootstrap Cards Next to Each Other?

Follow the steps stated below to lay two Bootstrap cards side by side.

Step 1: Create “container” Layout

A Bootstrap “container” is a fundamental component that holds padding and alignment for the content within a specific device.

In the HTML file, first, add a “<div>” element and assign it a class “container”:

Step 2: Make a “row”

The “row” class is utilized to contain columns. Each row is split into a grid of 12 virtual columns.

Within the container, place a div with the class “row” as follows:

Step 3: Set Two Columns for Two Cards

Within the “<div>” element having class “row”, specify two columns for two cards.

To create a card, follow the given instructions:

• Set a “<div>” tag with the class “col-6”. This class adjusts a column by setting the number of columns for the element to span.
• Inside the element, add another “<div>” element with the class “card”. It is an expandable and flexible container that offers a variety of content like headers, footers, background-color, and many more.
• Its width is adjusted by utilizing the width property.
• Include the “<img>” tag with the class “card-img-top”, which is utilized to set an image to the card’s top. The “src” attribute specifies the image path.
• To add the content to the card, implement the “card-body” class, which contains the “<h5>”, “<p>”, and “<a>” tags.
• The “<h5>” adjusts the card title using the “card-title” class.
• The “<p>” element is assigned with the “card-text” class to set the paragraph on the card.
• Then, to set a button, use the “btn”, “btn-outline-primary”, and “btn-sm” classes to create a button with an outline:

Create the second card in a similar way as the first card is created. This card needs to be adjusted in the next column to place the second card next to the first one. For this purpose, create a separate “<div>” container along with “col-6” class:

Here is the output generated by implementing the above code:

Here is the complete code:

We have demonstrated the procedure for placing the two bootstrap cards next to each other.

Conclusion

To place two cards next to each other, first, create an “<div>” element along with the “row” class. Then, allocate two more “<div>” elements and assign them a column class “col-6”. This will assign six columns to each card. To create a card in Bootstrap, the “card” class is utilized. This study has explained the procedure to align two Bootstrap cards side by side.