Bootstrap offsetting columns that are not central

Question

This is my first time using Bootstrap and I have some problems trying to get my content central.

I want to contain the content width, but allow the background colours to flow the full width of the page. I have tried to offset columns, however this just results in uneven spacing either side of the content.

My current markup is here:

https://codepen.io/charlyanderson/pen/bKggyb?editors=1100

<div class="container-fluid">
    <div class="row">

        <div id="example-col-1" class="col-lg-5">
            <div class="row">
                <div class="col-lg-8 offset-md-4">
                    <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
                </div>            
            </div>
        </div>

        <div id="example-col-2" class="col-lg-7">
            <div class="row">
                <div class="col-lg-8">
                    <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
                </div>
            </div>
        </div>

    </div>
</div>

mahan · Answer 1 · 2018-06-09T18:02:51.163

Use ml-auto for the first inner column and mr-auto for the second inner column.

#example-col-1 {
  background-color: beige;
}

#example-col-2 {
  background-color: pink;
  text-align: right;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div id="example-col-1" class="col">
        <div class="row">
          <div class="col-lg-8 ml-auto">
            <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
              Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
          </div>
        </div>
      </div>

      <div id="example-col-2" class="col">
        <div class="row">
          <div class="col-lg-8 mr-auto">
            <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
              Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
          </div>
        </div>
      </div>

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

</html>

https://codepen.io/anon/pen/BVpWwo

Use a dummy col-lg-4 column before the first inner column and after the second inner column.

#example-col-1 {
  background-color: beige;
}

#example-col-2 {
  background-color: pink;
  text-align: right;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div id="example-col-1" class="col">
        <div class="row">
          <div class="col-lg-4"></div>
          <div class="col-lg-8">
            <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
              Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
          </div>
        </div>
      </div>

      <div id="example-col-2" class="col">
        <div class="row">
          <div class="col-lg-8">
            <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
              Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
          </div>
          <div class="col-lg-4"></div>
        </div>
      </div>

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

</html>

https://codepen.io/anon/pen/jKyBwy

You may find this question also useful.

Offsetting columns is not working (Bootstrap v4.0.0-beta)

Update

if you want to have a smaller left column and larger right, use this code.

#example-col-1 {
  background-color: beige;
}

#example-col-2 {
  background-color: pink;
}

<html>
  
  <head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  </head>
  
  <body>

<div class="container-fluid">
  <div class="row">
    <div id="example-col-1" class="col-5">
      <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-8">
          <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
        </div>            
      </div>
    </div>
    
    <div id="example-col-2" class="col-7">
      <div class="row">
        <div class="col-lg-9 text-right">
          <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
        </div>
        <div class="col-lg-3"></div>
      </div>
    </div>

  </div>
</div>
  </body>
</html>

By the way, better to use text-right instead of text-align: right; style.

this is great thank you. However, it doesn't seem to work unless you have equal columns. My markup is to have a smaller left column, larger right. — CharlyAnderson, Jun 09 '18 at 15:35
@CharlyAnderson I think it works. You just need to use the right `col-*` class. Check the update — mahan, Jun 09 '18 at 17:55

Bootstrap offsetting columns that are not central

1 Answers1

Update