2

While making cards, I have one difficult problem. I want to fill background-color whole box content, but I am a beginner in html and css, so I don't know how to do. My codes are bellow.

.box-container1 {
  display: flex;
  justify-content: center;
}

.box {
  background-color: white;
  border: 1px solid #3AD6B1;
  box-shadow: 0 3px 6px #ddd;
  padding: 0;
  margin: 8px;
  width: 420px;
}

.box .box-header {
  background-color: #3AD6B1;
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  height: 4rem;
}

.box .box-img {
  padding: 0.5rem;
  text-align: center;
  align-items: center;
  vertical-align: middle;
}

.box .box-content {
  margin: 0.5rem;
  background-color: rgba(0, 0, 0, 0.4);
  text-align: left;
}

.bg-green {
  background-color: #3AD6B1!important;
}

.bg-green01 {
  background-color: #1CA484;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="box-container1">
  <div class="box">
    <div class="box-header">
      <div class="bg-green01 text-white p-2 font-weight-bold">
        <div class="h3 m-0">1</div>
      </div>
      <div class="font-weight-bold p-2 text-left">Box 1</div>
    </div>
    <div class="box-img"><img src="assets/img/Team-presentation.png"></div>
    <div class="bg-green01 w-100" style="height: 1rem"></div>
    <div class="box-content">
      <label>This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text.</label>
    </div>
  </div>
  <div class="box">
    <div class="box-header">
      <div class="bg-green01 text-white p-2 font-weight-bold">
        <div class="h3 m-0">2</div>
      </div>
      <div class="font-weight-bold p-2 text-left">Box 2</div>
    </div>
    <div class="box-img"><img src="assets/img/Coding.png"></div>
    <div class="bg-green01 w-100" style="height: 1rem"></div>
    <div class="box-content">
      <label>This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text.</label>
    </div>
  </div>
</div>

If you try out my code, you can find that the background-color does not fill in case box2. But I want to fill the card content. I want to sole this.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Sato Takeru
  • 1,669
  • 4
  • 12
  • 27

1 Answers1

1

You need to add two flex rules display: flex and flex-direction: column for selector .box.

Also, add rule flex: 1 for selector .box .box-content. To stretch over the entire free space.

And change the margin to padding, in the same selector.

.box-container1 {
    display: flex;
    justify-content: center;
}
.box {
    display: flex;
    flex-direction: column;
    background-color: white;
    border: 1px solid #3AD6B1;
    box-shadow: 0 3px 6px #ddd;
    padding: 0;
    margin: 8px;
    width: 420px;
}
.box .box-header {
    background-color: #3AD6B1;
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    height: 4rem;
}
.box .box-img {
    padding: 0.5rem;
    text-align: center;
    align-items: center;
    vertical-align: middle;
}
.box .box-content {
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.4);
    text-align: left;
    flex: 1;
}
.bg-green {
    background-color: #3AD6B1!important;
}
.bg-green01 {
    background-color: #1CA484;
}
<div class="box-container1">
    <div class="box">
        <div class="box-header">
            <div class="bg-green01 text-white p-2 font-weight-bold">
                <div class="h3 m-0">1</div>
            </div>
            <div class="font-weight-bold p-2 text-left">Box 1</div>
        </div>
        <div class="box-img"><img src="assets/img/Team-presentation.png"></div>
        <div class="bg-green01 w-100" style="height: 1rem"></div>
        <div class="box-content">
            <label>This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text.</label>
        </div>
    </div>
    <div class="box">
        <div class="box-header">
            <div class="bg-green01 text-white p-2 font-weight-bold">
                <div class="h3 m-0">2</div>
            </div>
            <div class="font-weight-bold p-2 text-left">Box 2</div>
        </div>
        <div class="box-img"><img src="assets/img/Coding.png"></div>
        <div class="bg-green01 w-100" style="height: 1rem"></div>
        <div class="box-content">
            <label>This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text.</label>
        </div>
    </div>
</div>
s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25