the problem is that my css cards are overlapping, I need the three cards to have space from one another, whilst sitting side by side each other horziontally. I am using bootstrap also and saw a solution online to use float-left float-right to put images side by side, but this has had no effect on my html page when I've refreshed it so far.

.container {
  width: 4000px;
  margin: auto;
}

.card-white {
  background: white;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  width: 400px;
  text-align: center;
  padding: 24px;
  margin: 20px;
}

.card-white img {
  width: 360px;
  height: 360px;
  object-fit: cover;
  border-radius: 4px;
}

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>



<!-- Body -->
<div >
  <div >
    <div >
      <div >
        <img src="https://via.placeholder.com/200.jpg" >
        <h3>Film Showreel</h3>
      </div>
    </div>
    <div >
      <div >
        <img src="https://via.placeholder.com/200.jpg" >
        <h3>Monologue Showreel</h3>
      </div>
    </div>
    <div >
      <div >
        <img src="https://via.placeholder.com/200.jpg" >
        <h3>Voice reel</h3>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

A lot of what you're doing can be done with straight Bootstrap and no external CSS. You can always use CSS to override bootstrap both inline and external (you'll see the usage of both in this code for demo purposes). I'd suggest reading through the Bootstrap docs as there are quite a bit of specific classes that can help you achieve your goals and maintain responsiveness without having to worry about things like this happening and of course, you can always override just about anything Bootstrap provides in CSS if it doesn't quite meet your needs. There are other items in your code that could be replaced and reformatted with Bootstrap classes but I didn't want to re-write everything.

https://getbootstrap.com/docs/5.0/utilities/flex/ https://getbootstrap.com/docs/5.0/utilities/spacing/

.card-white {
  background: white;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  text-align: center;
  margin: 0.5rem auto 0 auto;
}

.card-white img {
  width: 100%;
  height: 100%;
}


/* if you don't want to do it inline
h3 {
  font-size: 1.2rem !Important;
}
*/

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<!-- Body -->
<div >
  <div >
    <div >
      <div >
        <img src="https://via.placeholder.com/200.jpg">
        <h3 style="font-size: 1.2rem">Film Showreel</h3>
      </div>
    </div>
    <div >
      <div >
        <img src="https://via.placeholder.com/200.jpg">
        <h3 style="font-size: 1.2rem">Monologue Showreel</h3>
      </div>
    </div>
    <div >
      <div >
        <img src="https://via.placeholder.com/200.jpg">
        <h3 style="font-size: 1.2rem">Voice reel</h3>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

The error is in your css code.

If you run this without your css it' works perfect.

First of all you don't need to customize the container size in bootstrap like this:

.container {
  width: 4000px;
  margin: auto;
}

Second, a fixed size can't be responsive like this:

.card-white {
  width: 400px;
}

.card-white img {
  width: 360px;
}

So try it without fixed-size.

You can manage this without css, only with bootstrap classes in your divs.

<div >

check this, for bootstrap 4:

Toggle floats on any element, across any breakpoint, using our responsive float utilities.

Spacing, Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.

check this, for bootstrap 5:

Float bootstrap 5

Spacing bootstrap 5

CodePudding user response：

Using flexbox might be a better approach: https://coder-coder.com/display-divs-side-by-side/

.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 2px solid yellow;
}  

.flex-child:first-child {
    margin-right: 20px;
} 

You can refer to: https://getbootstrap.com/docs/4.0/utilities/flex/ for bootstrap.