Tips for aligning two cards in the center with Bootstrap

[site][1] [1]: https://i.sstatic.net/CmQRP.png

Hey there, I'm trying to figure out how to center my two cards on the page. Can anyone help me with this?

<div>
    <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/v.jpg" alt="Card image cap" style="width: 286px; height: 180px;">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <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="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>
<div>
  <div >
    <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/v.jpg" alt="Card image cap" style="width: 286px; height: 180px;">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <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="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>
htmlcssbootstrap-4twitter-bootstrap-3

Answer №1

To organize all your cards neatly, enclose them in a container and insert the code below:

.container {
  display: flex;
  width: 70vw; //Adjust as needed
  margin: auto;
/*   flex-direction: row; */ //Activate for horizontal alignment
}

For each individual card:

.card {
  flex: 1;
}

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

The functionality of CKEditor is not compatible with PopUp windows

Currently, I am using CKEditor along with the bPopUp jQuery plugin. When I set up CKEditor in the HTML without any additional scripts, it functions perfectly. However, when I try to embed it into a pop-up window, it stops working correctly. I can see the C ...

javascriptjqueryhtmlpopupckeditor

What strategies can be used to effectively structure CSS and JavaScript in a project for optimal organization?

In my NetBeans project, I currently have a large web project with CSS files included in the header. Some CSS codes are needed on all pages, while others are only necessary for specific pages. I am looking to optimize high-traffic pages by removing any ...

javascriptcssreorganize

Ways to ensure that a div's height matches its width

Is there a way to make three divs, each with the CSS property display:inline-block, have a 1:1 ratio of width to height using only CSS? Currently, the width is set to 30% and the height to 75%, causing the width to be greater than the height. #our_servi ...

htmlcss

Retrieving the value of a formControl within a formArray is made possible through a reactive form in

How can I retrieve the value of ItemName in my HTML code? When I attempt to use {{invoiceForm.controls[i].items.controls.itemName.value | json}}, it returns as undefined. <form [formGroup]="invoiceForm"> <div formArrayName="items" *ngFor="let ...

javascripthtmlangularangular-reactive-forms

What is the best way to connect a CSS file to a jade document?

Having some trouble linking normalize.css while using socket and express. html head title= "Real time web chat" link(href='/css/normalize.css') script(src='/chat.js') ...

cssnode.jsexpresspug

What could be causing the space between float and div elements?

Could someone shed light on the reason behind the minor gap between the top navigation element and the content div underneath it in this jsfiddle? When I float the navigation list items, a slight gap appears between the top navigation element and the main ...

htmlcsscss-float

Utilizing flexbox to create spacing between elements and ensuring there are no margins on the parent

Discover a Codesandbox demo at: https://codesandbox.io/embed/silly-firefly-87cov A unique challenge awaits with this project - elements within the parent container are positioned dynamically using flexbox. But how can we apply margins selectively only bet ...

cssreactjsflexbox

Validation of HTML5 forms for AJAX button submission

I am working with a form that utilizes the new HTML5 form validation feature, which I find to be beneficial. However, I do not like how pressing the button causes the page to refresh (form submit). Instead, I would like to use AJAX to update specific page ...

jqueryhtmlforms

What is the best way to align a div to the bottom of its container div in Bootstrap 5?

Within the Bootstrap 5 code snippet provided, there is a nested div with the ID "div-in-right-div" inside another div with the ID "right-div". Currently, "div-in-right-div" is aligned with the top of "right-div". The question arises: How can you adjust the ...

htmlcssbootstrap-5

Retrieving the chosen date from a calendar using a jQuery function

Hey there, I need help with showing tasks created on a specific date by selecting that date from a full month calendar. https://i.sstatic.net/hbLtp.jpg There are multiple tasks created on the selected date, and I want to trigger a jQuery event to fetch d ...

javascriptjqueryhtmlcss

Exploring the Power of JQuery with Hover Effects and SlideToggle

I was struggling to keep the navbar displaying without it continuously toggling when my pointer hovered over it. I just wanted it to stay visible until I moved my pointer away. <script> $(document).ready(function(){ $(".menu-trigger").hover(funct ...

javascriptjqueryhtmlcsshover

Using Jquery to Retrieve the Content of Head and Body Tags from a String

Here is a string that I currently have: <head> This is the Head </head> <body> <div> <div> <p> Body Content <br /></p> <p>&nbsp; Hello World <br />< ...

javascriptjqueryhtmltags

Is there a way to modify a scope variable using the on-scroll event in an Ionic app?

I am trying to update a variable's value when the scroll position exceeds 100 from the top, but for some reason it is not working as expected. The value of the variable does not change in $scope. Here is the code snippet: <div ng-show="title===tr ...

htmlcssangularjsionic-framework

Adding a form button to a card: A step-by-step guide

I would like to include a card-link in my Bootstrap card, but I need this link to be a DELETE request for my resource controller. Even though JavaScript is an option, I prefer using a form to submit the request. I attempted the following approach: <d ...

twitter-bootstrapbootstrap-4

Template designed in the style of Spotify with HTML5 and responsive features

I am in the process of creating a one-page website with a similar effect to that on spotify.com. Essentially, I want the background image to change as you scroll down, while still keeping elements displayed over the previous backgrounds in a smooth and res ...

csshtmlthemesresponsive-design

Working with radio buttons in a loop using PHP

I am facing an issue with a loop that iterates 3 times. In the loop, there's an HTML form containing radio buttons and I am processing the input using PHP. However, when echoing the form data, it does not display the correct values. Is there something ...

phphtmlformsradio-button

Is it possible to simultaneously center and display an iframe inline?

I have a YouTube video that I'm trying to center within a div. After adding display: block; to the CSS following advice from How to center an iframe horizontally?, it centers correctly, but now I want to display two images inline next to the iframe ...

htmlcssiframe

Add some pizzazz to your design using jQuery!

I have been working on a web application using asp.net c#. I have a div element where I applied the following style to it at the server side: spanNivelRiesgo1.Attributes.Add("style", "display:none; visibility:hidden"); Now, I have a radiobutton list and ...

c#jqueryhtmlcss

Creating a border around a div element using JavaScript

Is there a way to set a border for a div box using JavaScript similar to using border:2px solid #000; in CSS? Can this be done within the following for loop? elements = document.getElementsByClassName("box"); for (var i = 0; i < elements.length; i++) ...

javascripthtmlcss

Fixed position navbar toggler

Hey there! I currently have a centralized navbar layout for Desktop. However, my aim is to also center it on the mobile version. Basically, this navigation bar appears when scrolled downwards with icons like this. Therefore, I'm looking for assistan ...

htmlcsstwitter-bootstrap