CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
sjishan
sjishan

Reputation: 3672

Bootstrap 4: second row not having full width

The structure of the body looks like this

<main role="main" class="container">
        <div class="starter-template">
          <div class="row text-center">
            <div class="col-md-4">
              <div class="align-middle">
                <h1 class="display-5">Headline 1</h1>
                <p>Lorem Ipsum. </p>
              </div>
            </div>
            <div class="col-md-5 my-2"><span>Some text in the other column</span></div>
          </div>
          <div class="row text-center">
            <div class="row">
              <h2>Headline 2</h2>
            </div>
            <div class="row">
              <div class="col-md-4">
                <div class="row">
                  <h4 class="text-center">Box 1</h4>
                </div>
                <div class="row"><span>abc</span><span>def</span></div>
              </div>
              <div class="col-md-4">
                <div class="row">
                  <h4 class="text-center">Box 2</h4>
                </div>
                <div class="row"><span>abc</span><span>def</span></div>
              </div>
              <div class="col-md-4">
                <div class="row">
                  <h4 class="text-center">Box 3</h4>
                </div>
                <div class="row"><span>abc</span><span>def</span></div>
              </div>
            </div>
          </div>
        </div>
      </main>

The first row contains two columns and this works fine. The second row contains two row inside it. One of the contains Headline 2 which should be in the center and the other one contains three columns. What I am noticing is that the second row does not have full width like the first row.

This is what the output is looking like enter image description here

I need the second row containing Headline 2 to have the full width like the row 1. I tried putting width:100% but it is not working.

Upvotes: 0

Views: 407

Answers (1)

inki
inki

Reputation: 1946

Inside of your nested rows you have a row inside a row for Headline 2. The example below instead of the nested row, uses a full width col col-md-12

<main role="main" class="container">
  <div class="starter-template">
    <div class="row text-center">
      <div class="col-md-4">
        <div class="align-middle">
          <h1 class="display-5">Headline 1</h1>
          <p>Lorem Ipsum. </p>
        </div>
      </div>
      <div class="col-md-5 my-2"><span>Some text in the other column</span></div>
    </div>
    <div class="row text-center">
      <div class="col-md-12">
        <h2>Headline 2</h2>
      </div>
      <div class="col-md-4">
        <div class="row">
          <h4 class="text-center">Box 1</h4>
        </div>
        <div class="row"><span>abc</span><span>def</span></div>
      </div>
      <div class="col-md-4">
        <div class="row">
          <h4 class="text-center">Box 2</h4>
        </div>
        <div class="row"><span>abc</span><span>def</span></div>
      </div>
      <div class="col-md-4">
        <div class="row">
          <h4 class="text-center">Box 3</h4>
        </div>
        <div class="row"><span>abc</span><span>def</span></div>
      </div>
    </div>
  </div>
</main>

Upvotes: 2

Related Questions