CODEWITHSUNDEEP
bootstrap-4
bitshift
bitshift

Reputation: 6842

Bootstrap4 - cards and grid together?

Looking to create a layout sorta like this mockup. The long box at the top will be a header/logo area, with the other smaller boxes will have headers, hence im interested in using Bootstrap4 cards.

[update] What I have so far, trying for the layout in mockup#2

https://jsfiddle.net/shifterofbits/ojgtmn80/

enter image description here

<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
          </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">
          <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"></div>
          <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"></div>
          <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"></div>
        </div>
    </div>
    </div>

How can I keep each of the boxes from "scaling" or changing width as the user re-sizes their browser window. This is for an in-house app so that we can control things a bit and dont have to support a wide array of screen formats.

Also, would cards be a good fit to build the 2nd layout below? Note the rows of boxes of different heights, each of which need to have a fixed width. When/if the browser window did scale, then the entire box would flow and not resize. enter image description here

Upvotes: 0

Views: 69

Answers (1)

Desmond Mullen
Desmond Mullen

Reputation: 144

Designate a width in your CSS width: 200px; for the boxes that you don't want to change on different screen resolutions. Cards can be plugged in anywhere; besides the header in the second example, you might design it as three rows with the first row having two sub-rows in the right column. Again, you can set your column widths to whatever you want.

Upvotes: 1

Related Questions