The card-group is off-center within the column

I am facing a challenge with the alignment of 3 cards within a card-group that are contained in a div with the col class, which is wrapped by a div with the row class, all within a div with the container class. Currently, the cards are not centered.

I have attempted different approaches, including using justify-content-center in the row div, mx-auto in the col div, and even the standard center HTML tag in various sections such as the col, row, and card-group div. Despite all of these attempts, I have been unable to achieve the desired center alignment.

    <div style="position:relative;">
        <div class="animatedParent shrink" style="color:#ddd;background-color:#424242;text-align:center;padding:50px 80px;">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col">
                        <div class="card-group animatedParent mx-auto" data-sequence='250'>
                            <div class="card animated fadeIn slow rounded-0" style="max-width: 250px;" data-id='1'>
                                <img class="card-img-top animated fadeIn slow rounded-circle" src="/images/justin.jpg" alt="Justin Worsham" data-id='2'>
                                <div class="card-header animated fadeIn slow" style="color:black; font-weight:bold;" data-id='3'>
                                    Justin Worsham
                                </div>
                                <div class="card-body animated fadeIn slow" style="color:black;"  data-id='4'>
                                   <ul>
                                       <li>CEO</li>
                                       <li>Head Designer</li>
                                       <li>Head Developer</li>
                                       <li>Head Video Editor</li>
                                   </ul>
                                </div>
                            </div>
                            <div class="card animated fadeIn slow" style="max-width: 250px;" data-id='1'>
                                <img class="card-img-top animated fadeIn slow rounded-circle" src="/images/daniel.jpg" alt="Daniel Crews" data-id='2'>
                                <div class="card-header animated fadeIn slow" style="color:black; font-weight:bold;" data-id='3'>
                                    Daniel Crews
                                </div>
                                <div class="card-body animated fadeIn slow" style="color:black;"  data-id='4'>
                                   <ul>
                                       <li>CFO</li>
                                       <li>Designer</li>
                                       <li>Developer</li>
                                       <li>Video Editor</li>
                                   </ul>
                                </div>
                            </div>
                            <div class="card animated fadeIn slow rounded-0" style="max-width: 250px;" data-id='1'>
                                <img class="card-img-top animated fadeIn slow rounded-circle" src="/images/julian.jpg" alt="Julian Ellis" data-id='2'>
                                <div class="card-header animated fadeIn slow" style="color:black; font-weight:bold;" data-id='3'>
                                    Julian Ellis
                                </div>
                                <div class="card-body animated fadeIn slow" style="color:black;"  data-id='4'>
                                   <ul>
                                       <li>Jr Developer</li>
                                       <li>Server Side Code</li>
                                       <li>Intern Specialist</li>
                                       <li>Back-end Developer</li>
                                   </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
htmlcssbootstrap-4

Answer №1

Replace card-group with card and include the mx-auto class.

<div class="card-group animatedParent" data-sequence='250'>
  <div class="card animated fadeIn slow rounded-0 mx-auto" style="max-width: 250px;" data-id='1'>
    <img class="card-img-top animated fadeIn slow rounded-circle" src="/images/justin.jpg" alt="Justin Worsham" data-id='2'>
    <div class="card-header animated fadeIn slow" style="color:black; font-weight:bold;" data-id='3'>
      Justin Worsham
    </div>
    <div class="card-body animated fadeIn slow" style="color:black;" data-id='4'>
      <ul>
        <li>CEO</li>
        <li>Head Designer</li>
        <li>Head Developer</li>
        <li>Head Video Editor</li>
      </ul>
    </div>
  </div>
</div>

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

Tips on confirming the completion of my form when the next button is pressed

I am working on a multi-step form with a jQuery script to split the forms. The first form has only one button - the next button, which takes the client to the next form. However, when I click on the next button in the first form, it moves to the next form ...

javascriptjqueryhtmlforms

By utilizing the "order" property, I can arrange divs to start at the bottom and ascend as additional elements are added

Exploring the use of display: flex and order:, I noticed a curious behavior. When I set the order for my first div to 0 (order: 0;), it appears at the top of the page. However, as I add more divs with different orders, they initially show up in unexpected ...

htmlcssflexbox

I seem to be having an issue with the decimal point on my calculator - I only want to see one dot

Only need one dot for the calculator to function properly. The current situation with multiple dots is causing confusion. I intend to address other aspects of the code later, but I'm currently struggling with this issue. function dec(d) { let ...

javascripthtmlcss

Tips for structuring a news thread with a staggered approach

On my Drupal 8 website, I have set up a newsfeed. How can I display the news items in staggered rows? I would like the first item to align on the left and the second item to be on the right, repeating this pattern for all subsequent items. Currently, I am ...

javascriptcssdrupal-8

What is the best way to ensure that the Bootstrap navbar remains collapsed at all times, regardless of the size of the

Is there a way to keep my Bootstrap navbar constantly collapsed regardless of the screen size? I'm currently using Bootstrap, and I've noticed that when the screen is larger, the navbar expands automatically. What can I do to ensure that the navb ...

cssnavbarbootstrap-5collapsable

Using jQuery, you can disable an option upon selection and also change its border color

learn HTML code <select name="register-month" id="register-month"> <option value="00">Month</option> <option value="01">January</option> <option value="02">February</option> <option value="03"& ...

javascriptjqueryhtml

Ways to apply distinct styles to various ids and common classes

When dealing with multiple IDs such as id1, id2, and id3 that share common classes like .selectize-input and .select-dropdown, it can become cumbersome to set styles individually for each ID. Instead of writing: #id1 .selectize-input, #id2 .selectize-inp ...

htmlcss

The absence of a meta tag in the Wordpress head section

I keep getting an error from Lighthouse saying that I am missing both the viewport meta tag and description meta tag Does not have a <meta name="viewport"> tag with width or initial-scaleNo `<meta name="viewport">` tag found ...

phphtmlwordpressgoogle-chromelighthouse

Tips for efficiently implementing AJAX requests for multiple forms within a single webpage

Previously, I had a form where clicking submit would hide the form and display the result on a div with classname=dig. However, after adding more forms, all the forms started submitting at the same time instead of individually. How can I fix this issue in ...

javascriptjqueryhtmlajax

The Navbar's Toggle Icon Causes Automatic Window Resize

I implemented a mobile navigation bar using React and JS that slides in from the left when clicked. However, I encountered two issues: whenever I click on a menu button in the navbar or when my ad carousel moves, the window resizes for some reason. Additio ...

javascriptcssreactjs

Ways to pinpoint a particular division and switch its class on and off?

Consider this scenario, where a menu is presented: function toggleHiddenContent(tabClass) { let t = document.querySelectorAll(tabClass); for(var i = 0; i<t.length; i++) { t[i].classList.toggle="visible-class"; } } .hidden-conten ...

javascriptjqueryhtmlcss

Issue with Bootstrap CSS not rendering properly in Chrome and Firefox

After creating a simple "Hello World" web page and including Bootstrap CSS from a CDN, I noticed that it's only working properly in Microsoft Edge. Both Google Chrome and Mozilla Firefox are not displaying the correct output. I would greatly apprecia ...

htmlcssgoogle-chromemicrosoft-edgebootstrap-4

The transitionend event fails to trigger if there is no active transition taking place

Take a look at this: http://jsfiddle.net/jqs4yy0p/ JS $('div').addClass('switch').on('transitionend', function(e){ alert('end'); }); CSS div { background-color: red; /*transition: background-colo ...

javascriptcsscss-transitions

Can a website be designed to render consistently across all browsers without relying on a CSS reset?

Is it possible to create a website that renders well across all browsers without using CSS reset? Should CSS reset be used for websites of all sizes - small, one-page, large? Is it better to write all the CSS without a reset and only address necessary rend ...

htmlcss

How to perfectly position an image within a fixed full screen container

When you click on a thumbnail image, a full-screen overlay with a larger version of the image will be triggered using JavaScript. To ensure that the image is centered and resized inside the black overlay when the browser window size changes, I attempted t ...

javascriptjqueryhtmlcss

Utilize a external API to fetch JSON data from the website and showcase it on a webpage in a asynchronous manner

<!DOCTYPE html> <html> <head> <script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> </head> <body> <input type="text" placeholder="Enter Your Zip Code" id="zipCode ...

htmljsonxml

Unusual addition symbols in the Bootstrap stylesheet

Something unusual is occurring in my bootstrap css code. I am noticing strange plus signs that seem out of place, and I cannot pinpoint a reason for their existence. Here's an example (you might need to enlarge the view as they are quite small): Thi ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the process of incorporating a video into a react.js project through the use of the HTML

I'm experiencing an issue where my video player loads, but the video itself does not. Can anyone shed light on why this might be happening? class App extends Component { render() { return ( <div className="App& ...

javascripthtmlreactjs

What is the process for modifying the design of an NPM package?

I may have a silly or incorrect question, but what exactly is the extent of default styling in an NPM package? If I am using an NPM package and wish to adjust the color of one of their elements, how should I go about it? In both my own index.css file and ...

cssreactjsnpm

In order to add value, it is necessary to insert it into the text box in HTML without using the "on

example <input type="text" id="txt1" onChange="calculateTotal();" /> <input type="text" id="txt2" onChange="calculateTotal();" /> <input type="text" id="txt3" onChange="updateValue();" readonly/> <input type="text" id="txt4" onChange= ...

javascripthtml