CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Devansh
Devansh

Reputation: 313

Bootstrap row not occupying 100% width

I have a bootstrap grid layout but the row is not occupying 100% width. I am using Bootstrap 4 alpha 6. Here is the HTML:

<div class="container-fluid">
  <h1 class="center-text"  id="heading">[Enter Heaading Here]</h1>
  <div class="container">
    <div height="100px" class="row border-show">
      <div class="col-4" id="one"></div>
      <div class="col-4" id="two"></div>
      <div class="col-4" id="three"></div>
    </div>
  </div>
</div>

Here is the CSS:

.center-text{
  text-align: center;
}
#heading{
  padding: 60px;
}
.border-show{
  border-style: solid;
  border-color: black;
}

Upvotes: 25

Views: 36978

Answers (5)

BLimitless
BLimitless

Reputation: 2575

I just encountered a similar challenge with an embedded iframe not taking up the full row. I'm using bootstrap 5. Here's what worked to get the iframe to take up 100% width and be responsive:

<div class="row">
  <div class="ratio ratio-16x9">
      <iframe src="https://www.youtube.com/embed/cTp3w2ZUUxw?rel=0" allowfullscreen></iframe>
  </div>
</div>

The ratio and ratio-16x9 are new in bootstrap 5 and made this easy.

Upvotes: 0

Rashmi Wijesekara
Rashmi Wijesekara

Reputation: 111

In my case even container-fluid also didnot work because I used row class with the container-fluid in the same div. So, I removed the row class from the parent div and inside that I created a child div and used row class. Then it worked.

<div class="container-fluid row">
    <div class="col-12">
        didn't work
    </div>
</div>

<div class="container-fluid">
<div class="row">
    <div class="col-12">
        worked
    </div>
</div>
</div>

Upvotes: 1

Esmaeil
Esmaeil

Reputation: 658

The container class has this effect.

<div class="container">
    <div class="row">
        <div class="col-12">
            div into <b>container</b> class
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            div into <b>container-fluid</b> class
        </div>
    </div>
</div>

This code will generate following image: enter image description here

Upvotes: 5

LeftOnTheMoon
LeftOnTheMoon

Reputation: 973

In case someone else comes across this and the answer doesn't solve their problem, my issue that was causing this was because I didn't realize I was adding a row and trying to set up columns in a Bootstrap navbar. navbar already has a grid-like system in it by default, so it seems you are pushing it over the edge if you try to add columns inside of it. They aren't necessary anyway.

So if this answer doesn't solve your problem, check to see if you are inside of another Bootstrap component that already handles spacing. You may be trying to double-delimit your content!

Upvotes: 64

Carol Skelly
Carol Skelly

Reputation: 362370

Remove it from the container. The container is not 100% width, and shouldn't be nested in another container.

Upvotes: 29

Related Questions