CODEWITHSUNDEEP
htmlcssbootstrap-4
FLSte
FLSte

Reputation: 668

How to have bootstrap grid switch straight from 1 row 3 columns to 3 rows 1 column

I have a webpage with a row that contains a button, some text, then another button in 3 columns. Appearing as: enter image description here

When the width of the viewport shrinks it looks like: enter image description here

How can I make it so the button, text and other button stack on top of each other, center aligned, when the viewport is smaller, but stay one row when large enough to be accommodated (skipping the 2 columns on one row and one column on a second row stage)?

Current HTML:

<div class="container">
              <div class="row justify-content-md-center align-items-center">
                <div class="col text-center">
                  <a class="btn btn-lg btn-adapt btn-dark" href="#">Compare free and paid plans</a>
                </div>
                <div class="col-1 text-center">
                  or
                </div>
                <div class="col text-center">
                  <a class="btn btn-lg btn-adapt btn-dark" href="#">Read our getting started guide</a>
                </div>
              </div>
            </div>

Fiddle https://jsfiddle.net/7j9eodpt/

Upvotes: 0

Views: 153

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362380

Just switch to col-sm (or col-md if you want it to stack sooner)...

<div class="container">
    <div class="row justify-content-md-center align-items-center">
        <div class="col-sm text-center">
            <a class="btn btn-lg btn-adapt btn-dark" href="#">Compare free and paid plans</a>
        </div>
        <div class="col-sm-1 text-center"> or </div>
        <div class="col-sm text-center">
            <a class="btn btn-lg btn-adapt btn-dark" href="#">Read our getting started guide</a>
        </div>
    </div>
</div>

https://codeply.com/p/fIeulypQp1

Upvotes: 1

jason_r
jason_r

Reputation: 345

Does this work?:

<div class="container">
  <div class="row justify-content-md-center align-items-center">
    <div class="col-sm-12 col-md-4 text-center">
      <a class="btn btn-lg btn-adapt btn-dark" href="#">Compare free and paid plans</a>
    </div>
    <div class="col-sm-12 col-md-4 text-center">
      or
    </div>
    <div class="col-sm-12 col-md-4 text-center">
      <a class="btn btn-lg btn-adapt btn-dark" href="#">Read our getting started guide</a>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions