Issue with justify-content in Bootstrap 5 still unresolved

Currently working with Bootstrap 5 and have set up 4 cards. My goal is to position the second card on the left side. I've applied the class justify-content-xl-start to the card, however, it doesn't seem to be functioning as expected. I also attempted to include display: flex, flex-direction: column, and justify-content: flex-start in my CSS but that didn't solve the issue either. Struggling to figure out where I'm going wrong.

Operating on Bootstrap 5.1.3

Utilizing HTML and CSS for this layout

.card {
    margin-top: 40px !important;
    width: 22rem;
    height: 14rem;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    }
 <div class="card supervisor_card">
    <div class="card-body">
      <h5 class="card-title">Supervisor</h5>
      <p class="card-text">Monitors activity to identify project roadblocks</p>
      <img src="images/icon-supervisor.svg" class="card-img" alt="icon supervisor">
    </div>
  </div>

      <div class="card team_card d-xl-flex justify-content-xl-start">
        <div class="card-body">
          <h5 class="card-title">Team Builder</h5>
          <p class="card-text">Scans our talent network to create the optimal team for your project</p>
          <img src="images/icon-team-builder.svg" class="card-img" alt="icon supervisor">
        </div>
      </div>

<div class="card karma_card">
    <div class="card-body">
      <h5 class="card-title">Karma</h5>
      <p class="card-text">Regularly evaluates our talent to ensure quality</p>
      <img src="images/icon-karma.svg" class="card-img" alt="icon supervisor">
    </div>
  </div>

  <div class="card calculator_card">
    <div class="card-body">
      <h5 class="card-title">Calculator</h5>
      <p class="card-text">Uses data from past projects to provide better delivery estimates</p>
      <img src="images/icon-calculator.svg" class="card-img" alt="icon supervisor">
    </div>
  </div>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

The CSS rule margin: 0 auto; within the .card class centers the card horizontally by setting the right and left margins to be equal to auto. To control spacing, you can also use the Bootstrap utility class mx-0, which sets both margin-left and margin-right to 0. This helps in aligning elements precisely.

.card {
    margin-top: 40px !important;
    width: 22rem;
    height: 14rem;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    }
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af8f5f5eee9eee8fbeadaafb4abb4a9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e98b86869d9a9d9b8899a9dcc7d8c7da">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<div class="card supervisor_card">
    <div class="card-body">
      <h5 class="card-title">Supervisor</h5>
      <p class="card-text">Monitors activity to identify project roadblocks</p>
      <img src="images/icon-supervisor.svg" class="card-img" alt="icon supervisor">
    </div>
  </div>

      <div class="card team_card d-xl-flex justify-content-xl-start mx-0">
        <div class="card-body">
          <h5 class="card-title">Team Builder</h5>
          <p class="card-text">  Scans our talent network to create the optimal team for your project</p>
          <img src="images/icon-team-builder.svg" class="card-img" alt="icon supervisor">
        </div>
      </div>

<div class="card karma_card">
    <div class="card-body">
      <h5 class="card-title">Karma</h5>
      <p class="card-text">Regularly evaluates our talent to ensure quality</p>
      <img src="images/icon-karma.svg" class="card-img" alt="icon supervisor">
    </div>
  </div>

  <div class="card calculator_card">
    <div class="card-body">
      <h5 class="card-title">Calculator</h5>
      <p class="card-text">Uses data from past projects to provide better delivery estimates</p>
      <img src="images/icon-calculator.svg" class="card-img" alt="icon supervisor">
    </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

Display the div without using javascript/jquery if the radio button is chosen

Could someone help me find a solution similar to the one mentioned here: If Radio Button is Selected Show Div I am specifically looking for a way to achieve this using only HTML and CSS, without involving JavaScript or jQuery. Any suggestions would be gre ...

htmlcss

Utilizing SASS to retrieve the H, S, L values from a color

Is there a way to extract the H, S, L values from a hex color in SASS and assign them to separate CSS variables? $colors: ( "primary": $primary, "secondary": $secondary) !default; :root { @each $color, $value in $colors { -- ...

csssasscss-variables

Secure your online file with a password

I need to access a specific file on my computer through a program, not a web browser. However, I want to ensure that only authorized users can view the file by requiring a password with the request. How can I set up the file to prompt for a password befor ...

c#htmlasp.net.netsecurity

Is it possible to create this design using CSS?

I attempted to break away from the conventional square layout of the internet with this design, but I am struggling to utilize Z-index to layer the backgrounds effectively. Here is the current code: <!--############################################# ...

csstwitter-bootstrapbackgroundz-index

When converting a block formatting context into a block, the margin does not collapse

It seems that the behavior of margins collapsing between block elements inside and outside a BFC is not as straightforward as expected. For instance, when a button element's display property is set to inline-block, it forms a BFC, which should prevent ...

htmlcssmargin

What is the best way to prevent content from spilling over into the div on the right

I'm having trouble with a two column div where the text in the left column is overflowing into the right column. How can I prevent this? http://example.com <div id="wrapper-industry"> <div id="wrapper-form"> <div id="form_row"> ...

csshtml

AngularJS Controller Facing Issues with Bootstrap 5.x Tooltips

As a newcomer but long-time observer, I've been exploring ways to incorporate tooltips into my website design. Bootstrap 5.3 caught my eye with its appealing tooltip options, yet I've hit a roadblock when trying to integrate them into my AngularJ ...

angularjstooltipbootstrap-5

Show me all the posts from the database in a single row

When attempting to display all the entries from my posts table in the database, I noticed that only one entry is showing up. If I try to duplicate the code, it simply repeats the same ID from the posts table. <div class="row"> <?php $query ...

phphtml

Steps for linking a bootstrap form with a Django database in order to generate a model instance

As a newcomer to both bootstrap and django, I kindly ask for your understanding of my skills. I have designed a custom bootstrap form for my todo app that will add items to the database. You can view the form here. Here is the corresponding bootstrap code: ...

djangodjango-formsbootstrap-5

"Can someone guide me on the process of transmitting data to a client using Node in combination with

I am new to web development and struggling to understand how to transfer data from the Node server to the client while also displaying an HTML page. I am aware that res.send() is used to send data, but I'm having difficulty maintaining the client disp ...

javascripthtmlnode.jsexpressweb-development-server

Tips on how to change an image tag into a CSS selector

I need to change this tag to a WebElemet using CSS Selector instead of Xpath. I attempted with Xpath as shown below: panelSectionTitle.find( By.cssSelector( "img.aw-layout-right[style='']" ) ) <img style="" class="aw-layout-right" height="2 ...

htmlcssselenium-webdriver

Using jQuery to create a checkbox that functions like a radio button

In my code, I have a bunch of checkbox elements placed in different containers as demonstrated below: $("input:checkbox").click(function() { var url = "http://example.com/results?&" var flag = false; var $box = $(this); var $facet = $box.val ...

javascriptjqueryhtml

Utilize Selenium in Python to choose an element

When working with the following HTML code: <div class="nav-category__col" id="category_nav_level_3" style="display: block;"> <input type="hidden" value="1" name="videogame_type" id="videogame_type"> <ul class="nav-category__list" adp ...

pythonhtmlselenium

What is the best way to dynamically set an ID in Angular using the pound symbol (#)?

I am currently developing a dynamic Angular 6 application that utilizes dynamic components. My approach involves using @ViewChild('<id>', { read: ViewContainerRef }) <id>; to reference the divs where I intend to populate with dynamic ...

htmlangulartypescript

Simple way to extract the values from every input element within a specific <tr> tag using JQuery

Is there a way to align all input elements in a single row within my form? For example, consider the snippet of code provided below, which includes a checkbox and a text input box. I would like to retrieve the values from both of these input types and pres ...

javascriptjqueryhtml

The Typewriter Effect does not appear alongside the heading

For my portfolio website, I am using React to create a unique typewriter effect showcasing some of my hobbies. Currently, the code is set up like this: "I like to" [hobbies] However, I want it to display like this: "I like to" [h ...

javascripthtmlcssreactjs

Create a border surrounding the matColumn within a sticky matTable

I am currently working with a matTable that has the first two or three columns set as sticky. However, I am facing an issue where the scrolling behavior of the non-sticky columns under the sticky ones looks like a glitch due to existing border styling on t ...

csshtml-tablecss-selectorsstickysiblings

Obtaining the checkbox status from a location other than immediately following the input by CSS alone

I am currently designing a custom checkbox feature where clicking on the label text will toggle the state and display or hide certain text based on the checkbox state, all achieved solely through CSS. The HTML code I have written for this purpose is as fol ...

csshtmlcheckbox

Is it possible to include additional details in a hyperlink so that clicking on it automatically populates the forms on the webpage?

Every day, I have to click on a link and input some information (username, password, code). Is there any way to modify the link so that it automatically fills in my account details when clicked? <input type="text" name="u" tabindex="1" size="15" id=usr ...

phphtmlsql

A numeric input area that only accepts decimal numbers, with the ability to delete and use the back

I have successfully implemented a code for decimal numbers with only two digits after the decimal point. Now, I am looking to enhance the code in the following ways: Allow users to use backspace and delete keys. Create a dynamic code that does not rely o ...

javascriptjqueryhtml