What could be causing the unexpected behavior of flexbox in Bootstrap?

I am facing a challenge while working on an existing PHP project that requires editing using HTML, bootstrap, and CSS. The flexbox is not behaving as expected, specifically when trying to display two cards in a row. Even though it works in a separate file, once pasted into the project, the cards stack on top of each other and stretch the entire width of the device.

The structure of the two cards should be as follows:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="583a37372c2b2c2a3928186d766b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6b706d706d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<div class="row d-flex justify-content-around">
  <div class="card costum-card mt-5">
    <div class="card-head mt-4 mx-3">
      <h1>Mix&Max</h1>
    </div>
    <div class="card mt-2 mx-3 border border-white">
      <div class="card nested-card">
        <div class="card-body">
          <img src="phone.png" class="img-fluid card-img" />
          <p class="card-body-bold">One Smart Pro</p>
          <p class="card-body-light">10 GB, Minuta, SMS Pa Limit</p>
        </div>
      </div>
    </div>
  </div>
  <div class="card costum-card mt-5">
    <div class="card-head mt-4 mx-3">
      <h1>Mix&Max</h1>
    </div>
    <div class="card mt-2 mx-3 border border-white">
      <div class="card nested-card">
        <div class="card-body">
          <img src="phone.png" class="img-fluid card-img" />
          <p class="card-body-bold">One Smart Pro</p>
          <p class="card-body-light">10 GB, Minuta, SMS Pa Limit</p>
        </div>
      </div>
    </div>
  </div>
</div>

cssflexboxbootstrap-5

Answer №1

Ensure to include .col-6 in each bootstrap column to indicate it should occupy half of the row width (which is 12).

Consider this modification:

 <div class="row d-flex justify-content-around">
      <div class="card costum-card mt-5 col-6">
        <div class="card-head mt-4 mx-3">
          <h1>Mix&Max</h1>
        </div>
        <div class="card mt-2 mx-3 border border-white">
          <div class="card nested-card">
            <div class="card-body">
              <img src="phone.png" class="img-fluid card-img" />
              <p class="card-body-bold">One Smart Pro</p>
              <p class="card-body-light">10 GB, Minuta, SMS Pa Limit</p>
            </div>
          </div>
        </div>
      </div>
      <div class="card costum-card mt-5 col-6">
        <div class="card-head mt-4 mx-3">
          <h1>Mix&Max</h1>
        </div>
        <div class="card mt-2 mx-3 border border-white">
          <div class="card nested-card">
            <div class="card-body">
              <img src="phone.png" class="img-fluid card-img" />
              <p class="card-body-bold">One Smart Pro</p>
              <p class="card-body-light">10 GB, Minuta, SMS Pa Limit</p>
            </div>
          </div>
        </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

The fieldset css in PrimeNG differs from the website's original design

On my website, the appearance of the fieldset can be seen here: https://i.stack.imgur.com/TTS8s.jpg. I did not make any CSS changes that altered the fieldset. I am utilizing primeNG v7 and Angular 7. <p-fieldset legend="Toggleable" [toggleable]="true" ...

htmlcssangularprimengfieldset

Step-by-step guide on creating a sequential glowing effect for list items with CSS and JQuery

I would like to create a glowing effect on each icon individually. The idea is for each icon to glow for a brief moment and then return to its normal state before moving on to the next icon in line. I am considering using text-shadow for the glow effect an ...

jquerycss

Creating solid, dotted, and dashed lines with basic HTML/CSS for tcpdf rendering

Take a look at the image below. It combines two graphs, with different curves represented by solid lines, dotted lines, and various forms of dashed lines with varying stroke lengths. In summary: I am looking for a simple way to create solid lines, dashed ...

htmlcsstcpdf

Tips for keeping a video background stationary while allowing the text to move smoothly

When I added the video for the background, it only appears at the top of the page. However, I want it to be visible as the rest of the page is scrolled. <div class="hero"> <video autoplay loop muted plays-inline class="back-video&qu ...

javascripthtmlcssfrontendweb-deployment

Removing items from a JavaScript list

I am seeking assistance with an issue I am facing. I have a function that generates a list based on user inputs. For instance, when a user enters apples, the function adds it to a <ul> list. My concern is about deleting specific inputs from the lis ...

javascripthtmlcsslistappendchild

Utilizing Host Styles in Angular2 Components

In the midst of developing a custom form component for my Angular project, I am facing challenges with styling. I wish to allow variable widths for the input element and have them controlled by the host component. For instance: <my-input class="input" ...

cssangular

Achieve a floating right alignment of an unordered list navigation using CSS without changing

I am currently implementing a jquery navigation system which can be found at this link: http://css-tricks.com/5582-jquery-magicline-navigation/ My goal is to have the navigation bar float to the right without changing the order of items (e.g. home, contac ...

jquerycssnavigationcss-float

CSS3 Icon: the content being placed is not consistently positioned

I'm utilizing CSS3 to create icons, and everything was going smoothly until I encountered an issue with a simple design. My goal is to have an exclamation mark centered inside a circle, but its position appears inconsistent. At times, it seems slightl ...

htmlcssinserticons

issue with animation occurs when the value changes while the setTimeout timer is still running

function wallpaperMediaPropertiesListener(event) { // reset animation test.stop(true); test.css('margin-left', 0); // set song title. test.text(event.title); var testWidth = test.outerWidth(); // clone text ...

javascripthtmljquerycss

Is there a way to hide a button on this virtual keyboard after it has been clicked?

After creating a virtual keyboard using HTML and CSS, I am looking to implement JavaScript code that will hide a button after it is clicked. Here is the code I have tried so far: function hideButton() { var button = document.getElementById("simple_butto ...

javascriptcsshtml

Is there a way to eliminate the gap between my menu choices?

Is there a way to eliminate the black line that appears between my menu options when using CSS hover? https://jsfiddle.net/jameskelly/3ejsu7gx/2/ a:hover { background-color: #ebebeb; font-color: black; } /* Custom styling for the ...

htmlcss

Is there a way to restrict access to my website to only be opened in the Chrome browser?

Is there a way to prevent my web application from loading when the link is opened in browsers other than Chrome? Can this be achieved using Javascript or Java? I want to restrict the usage of my web application to only Chrome. Any assistance would be appre ...

javascriptcsshtml

Chrome displays the page layout differently upon initial loading

https://i.sstatic.net/GhfJc.pngI am currently seeking a developer position and have created a personal website to showcase my skills to potential employers. However, I have encountered a bug that only seems to affect Chrome browser. When the page is first ...

htmlcssgoogle-chrometwitter-bootstrap-3

Certain CSS styles do not function properly, requiring me to include them directly in the HTML code

After successfully creating a button in HTML and applying CSS to add border effects, I ran into an issue when trying to change the background color or text color. Despite adding styles directly to the HTML file, these specific changes did not take effect. ...

htmlcss

Unleash the Power of Animating Your Active Tabs

Is there a way to create animated tabs that slide in when clicked? I've experimented with using transition code but haven't quite achieved the desired effect yet. This is what I currently have: [data-tab-info] { display: non ...

javascripthtmlcss

What is the reason for background images not loading when using `display: none`?

I'm really struggling to understand this puzzle: When the page loads, will mypic.jpg be downloaded by the browser? #test1 { display: none; } #test2 { background-image: url('http://www.dumpaday.com/wp-content/uploads/2017/01/random-pic ...

htmlcss

Orders in WooCommerce are being mysteriously created with no information provided and stuck in a pending payment state

Are you experiencing the issue of blank orders being generated in WooCommerce with no details and a pending payment status? I am utilizing the WooCommerce plugin along with the Elavon payment gateway, and although everything seems to be set up correctly, t ...

csswordpresswoocommercepluginsstatus

Two divisions inside another "wrapper" division - Adjusting the width

I'm facing an issue with my CSS. I have a container div "container" that contains two other divs - "left" and "main". The width of the container is set to 90% of the body's width, with a margin of 3% auto to center it. .container{ margin:3% auto ...

htmlcsswidth

In Firefox, the functionality of applying background-position-y to a label when it is immediately preceded by a checked input[type=radio]

CSS selector input[type=checkbox]:checked + label is not functioning properly in Firefox browser! label { display: block; font-family: 'Muli'; font-size: 14px; color: #666; vertical-align: top; background: url("https://s31.postimg. ...

htmlcssfirefoxbackground-position

When you hover over the image, the text will disappear

When I hover over the image of LTC, a thumbnail appears with text and a button. However, I do not want the text "LTC" to be shown when hovering over the image. <div class="col-md-4"> <div class="view view-eighth"> <div class=" ...

htmlcss