Layout poblem

bootstrap

#1

I dont see the difference as to why he content in the middle tab is s different than the others
http://lukesspot.com/indus_links/manage_racks.php
arent they all similar/


#2

They are the same it’s just than in the other tabs you have content pushing the tab to its max-width. You seem to have it as a shrink to fit approach. I’m not sure why its doing this yet as the bootstrap cards are max-width by default I will have to copy the code locally and test. You can fix it as you have done by setting the width to 100% but that won’t be the right answer although its probably the easiest answer for now.

You also seems to be nesting rows and containers and in bootsrap there are specific rules for this and its is unlikely that you will ever nest a container and rows can only be nested inside columns in the proper structure.

I’ll run some tests and see where you are going wrong :slight_smile:


#3

Yes as suspected you have incorrectly nested a container and a row in each tab which is killing the card width. The cards need to be like this:

        <div class="tab">
          <div class="row justify-content-center">
            <div class="col-10">
              <div class="card" style="">
                <div class="card-header"> <img src="images/create_icon.png" style="float:left">
                  <h1 style="margin:0 100px"  class="text-center text-muted">Create A Rack</h1>
                </div>
                <div class="card-body" style="padding-top: 50px">
                  <p>testing</p>
                </div>
              </div>
            </div>
          </div>
        </div>

Now the card will automatically take up the full width without explicitly adding one inline (I removed the inner .container and .row).

Note that you have a horizontal scrollbar on your page at all times because once again you have not used the right structure. You start the page with .row which has negative margins and immediately gives you a scrollbar. You can’t use .row without using a container so I expect you wanted a fluid -container so you will need to add that container to wrap the page.

e.g.

<div class="container-fluid">
  <div class="row justify-content-center">

The horizontal scrollbar will now vanish.

In bootstrap containers, rows and columns work together to make the grid and if you omit one or introduce them in the wrong place everything falls to bits. The container has defaul side padding to soak up the negative margins on .row and then columns also have side padding to create gutters. When you nest a row inside a column the padding on the column soaks up the negative margin on .row.

If you are still unsure when to use them have a quick refresher in the bootstrap documentation. Unfortunately with frameworks not only do you have to have a good grasp of CSS you have to have a good grasp of the framework rules or nothing works as expected :slight_smile: