Twitter Bootstrap Question posted in

how do i make cards all same height on all screens with footer at the bottom?-Twitter bootstrap

when i click on the card tabs, the whole page moves when switched over because of smaller height. I was able to make the card one whole size but it leaves white space under the footer and I don’t think translates perfectly on mobile and other sizes of screen.

I’ve tried to make the position fixed, tried making the cards one size (that would work but I’m not sure ratio for other screen sizes and the footer wont rest at the bottom)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row d-flex align-items-stretch">

  <div class="container wholecard" id="studiocity">

    <div class="card col-8 col-lg-6 col-xl-6" style=" float: left; ">
      <div class="card-body stud" style="padding: 0; padding-top: 1em;">

        <div class="tab-content" id="myTabContent" style="">

          <div class="tab-pane fade show active" id="studhours" role="tabpanel" aria-labelledby="studhours-tab">

            <img src="http://ricktology.com/roccos/sc.jpg" class="card- 
     img-top" style="width:100%">
            <u><h4 class="card-title" style="text-align: center; font- 
     family: fugaz-one; font-style: normal; font-weight: 400; margin-bottom: 
     0;">Studio City</h4></u>
            <div class="container cheers" style="text-align: center;">
              <p class="card-text" style="font-family: 
    'fugaz-one'; font-size: 2em; color: #d40000; text-align: center; margin- 
    bottom: 0;">HAPPY HOUR</p>
              <b><span class="cardtext">EVERYDAY : 
     11am - 7pm <br> SUNDAY : 3pm-7pm 
						<br> LATE NITE : 10pm - 
     1:30am</span></b><br><br>
            </div>
          </div>

          <div class="tab-pane fade studtab" id="studlocation" role="tabpanel" aria-labelledby="studlocation-tab">


            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3302.145205107502!2d-
118.40797598529815!3d34.14262702040996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1 
!3m3!1m2!1s0x80c2bdf08bc8b0cf%3A0x15b17538f491d082!2sRocco&#39;s+Tavern!5e0!3m 
2!1sen!2sus!4v1549432245207" frameborder="0" allowfullscreen></iframe>

            <p class="cardtext" style="font-size: 12px">
              Address: 12514 Ventura BLVD <br> Studio City, CA 91604</p>
            <br><br><br>
            <p class="cardtext">Phone: 818-986-9876</p>
            <br>


          </div>

          <div class="tab-pane fade" id="studsocial" role="tabpanel" aria-labelledby="studsocial-tab">

            <p class="cardtext">Social Media</p>
            <a href="https://www.instagram.com/roccostavern"><i class="fab 
    fa-instagram btn btn"></i></a>
            <a href="http://facebook.com/roccostavern/"><i class="fab fa- 
    facebook-square btn"></i></a>
            <a href="http://twitter.com/roccostavern"><i class="fab fa- 
    twitter-square btn"></i></a><br>

            <br><br>
            <p class="cardtext">Delivery</p>

            <a href="https://www.grubhub.com/restaurant/roccos-tavern- 
     12514-ventura-blvd-los-angeles/139412">
              <input type="image" src="https://cdn6.aptoide.com/imgs/9/d/9/9d94afe3d75c9dd1ccb26191812a666f_icon 
    .png?w=256" /></a>
            <a href="https://www.ubereats.com/en-US/los-angeles/food- 
    delivery/roccos-tavern-studio-city/O0w0qVubRS-mwpMQxg3c4A/"><input type="image" src="http://blueagavemadison.com/wp- 
    content/uploads/2018/11/app-icon-a2654f7eee.png" /></a>
            <a href="https://postmates.com/merchant/roccos-tavern-studio- 
    city-2"><input type="image" src="http://ricktology.com/roccos/postmatesicon.png" /></a>
            <a href="https://www.doordash.com/store/rocco-s-tavern-los- 
    angeles-87376/"><input type="image" id="dd" src="https://apkreal.com/wp- 
    content/uploads/2017/08/DoorDash%20Order%20Manager-image.png" /></a>

            <p class="spacing;" id="spacing;"><br></p>




          </div>



          <div class="container card-footer" style="padding: 0; 
     vertical-align: bottom;">

            <ul class="nav nav-pills nav-justified" id="myTab" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" id="studhours-tab" data-toggle="tab" href="#studhours" role="tab" aria- controls="studhours" aria-selected="true">Hours</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" id="studlocation- 
     tab" data-toggle="tab" href="#studlocation" role="tab" aria- controls="studlocation" aria-selected="false">Location</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" id="studsocial-tab" data- toggle="tab" href="#studsocial" role="tab" aria-controls="studsocial" aria-selected="false">Apps</a>
              </li>
            </ul>
          </div>

        </div>
      </div>
    </div>

    <!--		<div class="hidden">-->
    <img src="http://ricktology.com/roccos/V2/pretz1.png" class=" 
     mydiv col-2 col-lg-2 col-xl-2" id="pretz">

  </div>

</div>

<br><br><br>

I want to make the cards switch tabs seamlessly with nothing moving or changing but the card contents

Tags:

2

Answers


  1. 0

    I added the following style to your CSS.

    .tab-pane{
    height:359px;
}

    This should finally reside inside @media sections, with proper pixel values according to the screens you will be targeting.

    Login or Signup to reply.
  2. 0

    I’d argue that flexbox and using min-height is better and future-proof in this case as it will respond much better than only setting a fixed height to the inner contents, because of the unknown size of the content your tabs, thus your initial problem.

    .tab-content{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  min-height: 450px;
  justify-content: center;
  align-self: center;
}

.tab-pane{
  flex: 1;
}

    You can also set a max-height to your container to work with your page layout.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search