CODEWITHSUNDEEP
htmlcssreactjsbootstrap-4responsive
richie4k2k
richie4k2k

Reputation: 131

Bootstrap Cards responsive text that stacks correctly

I'm trying to stack items in Bootstrap correctly. I'm using a container and rows to stack. After a certain breakpoint the items down't align correctly anymore. I want to fix that and checked all StackOverflow questions about cards and text but couldn't find any similar problem

Here the nearly correct design that works before 990px breakpoint (I would need to add some negative padding here so that the 0.x would align under the withdrawal):

enter image description here

After this breakpoint you'll get:

enter image description here

And the mobile version is completely wrong even though there would be enough space:

enter image description here

My code is in react/ nextjs so ignore the className if you aren't familiar with it

<div className="container">
      <div className="card-deck">
        {/*     CARD START */}
        <div className="card mb-4">
          <img
            className="card-img-top img-fluid"
            src="//placehold.it/500x280"
            alt="Card image cap"
          />
          <div className="card-body">
            <h4 className="card-title">Test information</h4>
            <div className="fee-stats">
              <div className="container">
                <div className="row">
                  <div className="col-sm">
                    <p className="card-text">
                      TAKER
                      <br />
                      0.05%
                    </p>
                  </div>
                  <div className="col-sm">
                    <p className="card-text">
                      MAKER <br /> 0.05%
                    </p>
                  </div>
                  <div className="col-sm">
                    <p className="card-text">
                      WITHDRAWL
                      <br /> 0.0005
                      <span className="bitcoin-icon">&#8383;</span>{" "}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="card-footer border-0 rounded-bottom">
            <small className="text-muted">Intermediate</small>
          </div>
        </div>

CSS:

.card-style {
          margin: auto;
          width: 80%;
          padding: 10px;
        }
        .card-img-top {
          margin: auto;
          width: 30%;
          padding-top: 20px;
        }
        .card-title {
          text-align: center;
        }
        .card-footer {
          background-color: #9effaf;
        }
        .rounded {
          border-radius: 0.6rem !important;
        }
        .rounded-bottom {
          border-bottom-left-radius: 0.6rem !important;
          border-bottom-right-radius: 0.6rem !important;
        }
        .card-text {
          text-align: center;
          font-size: 65%;
        }

Upvotes: 0

Views: 1793

Answers (2)

Q. Fisch
Q. Fisch

Reputation: 11

Not sure I understand your problem/desire completely but by specifying the width of you columns at each breakpoints you will surely achieve what you are looking for. You can force the content to stay inline by specifying width = 12 / # elements. And force then to stack by using width = 12....

<div class="card-deck">

<div class="card mb-4">
    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap" />
    <div class="card-body">
        <h4 class="card-title">Test information</h4>
        <div class="fee-stats">
            <div class="container">
                <div class="row">
                    <div class="col-4  px-1">
                        <p class="card-text"> TAKER <br /> 0.05% </p>
                    </div>
                    <div class="col-4  px-1">
                        <p class="card-text"> MAKER <br /> 0.05% </p>
                    </div>
                    <div class="col-4  px-1">
                        <p class="card-text"> WITHDRAWL <br /> 0.0005 <span className="bitcoin-icon">&#8383;</span>{" "} </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer border-0 rounded-bottom">
        <small class="text-muted">Intermediate</small>
    </div>
</div>
 <div class="card mb-4">
    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap" />
    <div class="card-body">
        <h4 class="card-title">Test information</h4>
        <div class="fee-stats">
            <div class="container">
                <div class="row">
                    <div class="col-4  px-1">
                        <p class="card-text"> TAKER <br /> 0.05% </p>
                    </div>
                    <div class="col-4  px-1">
                        <p class="card-text"> MAKER <br /> 0.05% </p>
                    </div>
                    <div class="col-4  px-1">
                        <p class="card-text"> WITHDRAWL <br /> 0.0005 <span className="bitcoin-icon">&#8383;</span>{" "} </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer border-0 rounded-bottom">
        <small class="text-muted">Intermediate</small>
    </div>
</div>
 <div class="card mb-4">
    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap" />
    <div class="card-body">
        <h4 class="card-title">Test information</h4>
        <div class="fee-stats">
            <div class="container">
                <div class="row">
                    <div class="col-4  px-1">
                        <p class="card-text"> TAKER <br /> 0.05% </p>
                    </div>
                    <div class="col-4  px-1">
                        <p class="card-text"> MAKER <br /> 0.05% </p>
                    </div>
                    <div class="col-4  px-1">
                        <p class="card-text"> WITHDRAWL <br /> 0.0005 <span className="bitcoin-icon">&#8383;</span>{" "} </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer border-0 rounded-bottom">
        <small class="text-muted">Intermediate</small>
    </div>
</div>

edit: a link to bootstrap grid system here. Here col-6 means it is size 6 (over 12) by default. And col-md-4 says its size 4 as soon as the screen is bigger than medium.

edit2: a functioning example codereply

Upvotes: 1

Tzimpo
Tzimpo

Reputation: 1009

On your container your writing col-sm.You don't specify the number. You should add col-sm-4 if you want to break this row on 3 columns.

if you want on all devices to be 3 columns use col-3

Working example

 <div class="row">
              <div class="col-3">
                <p class="card-text">
                  TAKER
                  <br />
                  0.05%
                </p>
              </div>
              <div class="col-3">
                <p class="card-text">
                  MAKER <br /> 0.05%
                </p>
              </div>
              <div class="col-3">
                <p class="card-text">
                  WITHDRAWL
                  <br /> 0.0005
                  <span class="bitcoin-icon">&#8383;</span>{" "}
                </p>
              </div>
            </div>

Upvotes: 0

Related Questions