Position card boxes in the center using bootstrap

Hey there! I'm facing an issue with my two cards (check out the image below) https://i.sstatic.net/XDWop.png

It seems like the card boxes are not perfectly centered. I've made some adjustments in the code snippet provided. Could you please lend me a hand with this? Your help is greatly appreciated!

<div class="test" style="margin-left: auto; margin-right:auto; text-align: center; position: relative;">
    <div class="container-fluid padding" style="margin-left: auto; margin-right:auto;">
        <div class="row padding">
            <div class="cold-md-4" style="margin-right: 1%; margin-left: 1%; margin-top: 1%; margin-bottom: 1%;">
                <div class="card" style="width: 18rem; margin-left: 1%;">
                    <img class="card-img-top" src="img\festival-tickets\ticket3.png">
                    <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-outline-secondary">Go somewhere</a>
                    </div>
                  </div>
            </div>
            <div class="cold-md-4" style="margin-right: 1%; margin-left: 1%; margin-top: 1%; margin-bottom: 1%;">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="img\festival-tickets\ticket3.png">
                    <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-outline-secondary">Go somewhere</a>
                    </div>
                  </div>
            </div>
        </div>
    </div>
</div>
htmlcssbootstrap-4

Answer №1

To center the elements (the cards) within the parent element (`.row .padding`), simply add `justify-content: center;` to the parent element's CSS.

.center {
  justify-content: center;
}
<div class="test" style="margin-left: auto; margin-right:auto; text-align: center; position: relative;">
  <div class="container-fluid padding" style="margin-left: auto; margin-right:auto;">
    <div class="row padding center">
      <div class="cold-md-4" style="margin-right: 1%; margin-left: 1%; margin-top: 1%; margin-bottom: 1%;">
        <div class="card" style="width: 18rem; margin-left: 1%; ">
          <img class="card-img-top" src="img\festival-tickets\ticket3.png">
          <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-outline-secondary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="cold-md-4" style="margin-right: 1%; margin-left: 1%; margin-top: 1%; margin-bottom: 1%;">
        <div class="card" style="width: 18rem;">
          <img class="card-img-top" src="img\festival-tickets\ticket3.png">
          <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-outline-secondary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

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

Ways to split JSON information into several pages?

I am currently facing an issue with my HTML code. It works perfectly fine for a small JSON file, displaying the data in an HTML table as expected. However, when I try to load a larger JSON file with around 15,000 rows of data, my page becomes unresponsiv ...

javascriptphpjqueryhtmlcss

In order to ensure JavaScript can be universally applied to all images, it needs to be made more generic

I have developed JavaScript functions to enable zoom in and zoom out functionality for an image through pinching gestures. Now, I aim to refactor the code below so that I can include it in a shared JavaScript file. var scale = 1; var newScale; ...

javascripthtml

Step-by-step guide to implementing a floating action button on the bottom-right corner of a screen using Material-UI in a React application

I have been attempting to place the FloatingActionButton on the bottom right corner of the screen. To achieve this, I am utilizing the following library: http://www.material-ui.com/#/components/floating-action-button import React, { Component } from "reac ...

htmlcssreactjsmaterial-ui

What is the method to alter the color of an SVG source within an image tag?

I am currently working on a component that involves changing the color of an SVG icon from black to white when a color prop is given. export class CategoryIconComponent extends React.Component { static displayName = 'CategoryIcon'; state = ...

javascriptcssreactjssvgecmascript-6

You cannot link to the innerHTML containing bookmarks from a different page

Using JavaScript AJAX, I am including a file called cards.html into a parent HTML page named index.html. The included cards.html file consists of a list of cards, each containing a bookmark in the form <li id="byx-123_shapes">. However, w ...

javascripthtmlajaxinnerhtml

What is the process for creating this image using HTML and CSS?

Looking to style an image using HTML and CSS. This is what I attempted: <span>$</span><span style="font-size: 50px;">99</span><span style="vertical-align: text-top;">00</span> However, the result doesn't ma ...

htmlcss

What is the best way to obtain the height and width of the browser frame, similar to the example provided?

Lately, I've noticed a new technique being used more frequently on websites, but I can't seem to find information on what it's called. The layout consists of a first section that fills the entire width and height of the frame, yet allows use ...

htmlcssresponsive-design

Try replicating this progress bar illustration by utilizing jQuery and CSS

Looking to create a progress bar similar to the one on ZocDoc.com. Can anyone provide guidance on where to begin? ...

jqueryasp.netcssprogress-bar

The image is failing to display in the CSS

As a beginner in the world of CSS and HTML, I encountered an issue where my background image is not showing up. Here's the code snippet that I have: ... <style type="text/css"> #header_contain{ width:935px; height: 135px; ...

htmlcss

Verification checkbox in Html5 is mandatory

I have created an input checkbox that contains array values, resulting in multiple rows being generated in a table. However, the issue I am facing is that all checkboxes need to be checked in order to submit the form. This means I cannot submit the form un ...

javascriptphphtmlrequired

The image will come to life with animation as the background position is adjusted using Skrollr

Trying to create a div that switches the background image every X pixels scrolled. Initially experimented with changing the background-image, including using sprites and adjusting background position, but encountered a distracting "flickering" effect. Exa ...

javascriptjqueryhtmlcssskrollr

Tips for overlaying a webpage with several Angular components using an element for disabling user interactions

I currently have an asp.net core Angular SPA that is structured with a header menu and footer components always visible while the middle section serves as the main "page" - comprised of another angular component. What I am looking to achieve is ...

htmlcsstypescriptasp.net-coreangular12

"Strategies for using Selenium in Python to simulate clicks without relying on class, id, or name attributes

I am currently attempting to locate the "X" button and click on it, but I am struggling to find a way to do so. Below is the HTML code for the element: <div style="cursor: pointer; float:right; border-radius: 3px; background-color: red; font-size: ...

javascriptpythonhtmlselenium

Accessing files on your computer and on the internet with HTML

My PHP website is hosted on a web server, but I am interested in opening specific files on the user's local computer when they visit my site. Essentially, when users click on a page of my website, I want it to open certain local files on their PC. Fo ...

html

Using JavaScript and jQuery to fill a div with content from an external file

Feeling extremely frustrated at the moment. I am struggling to make this work and can't figure out why it's not working. My current challenge involves populating a div with content from another HTML file. Below is the code snippet: <script s ...

javascripthtmljqueryjquery-load

Incorporating text onto an HTML webpage

Context: My program reads a file and displays it on an HTML page. The code below utilizes regex to extract errors from the file. Instead of using console.log for debugging, is there a way to display the results on the HTML page? When attempting: document ...

javascripthtmlregexangularjswhile-loop

Animating text alignment in CSS3 for left, center, and right positions

Inside this div, I have a single line of text that is not wrapped. Is there a way to animate the text alignment so that it moves to a specific side or center? I am aware that I could measure the width and use relative/absolute positioning, but I am lookin ...

htmlcsscss-animations

Switch between showing and hiding two divs using jQuery

I'm attempting to create a link that will toggle hide/show between two divs, and while this concept is not uncommon, I am facing some difficulties. My HTML structure is as follows: <div id="wrapper"> <div id="tog_A"> <div id="tog ...

javascriptjqueryhtmlcss

The class is not affected by my Media Query.”

Here is a snippet of my media query code: @media screen and (max-width: 1200px) { .changePicture { width: 15%; float: left; margin-top: 5%; margin-left: 5%; margin-right: 0; } } .changePicture { width: 15%; margin-top: 5%; ...

htmlcssmedia-queries

What is the best way to ensure a "child" div does not overflow on its own and instead utilizes the padding of its parent div for rendering?

Initially, here are my code snippets: In the HTML file: <div class="div parent"> Title <div class="div child"> <div class="overflowed"> </div> </div> </div> CSS Styling: .div { border: 1px solid #0000 ...

htmlcss