JSFiddle - React, Tailwind, and code Playground

Centered columns

by tonytlwu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-center">
      <h2>
      Nullam id dolor id nibh ultricies vehicula ut id elit.
      </h2>
      <p>
        Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Morbi leo risus, porta ac consectetur
        ac, vestibulum at eros. Donec sed odio dui.
      </p>
      <p>
        Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. Lorem
        ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </div>
    <div class="col-xs-12-no-gutter banner-image">
      <img src="https://placehold.it/1280x860" />
    </div>
    <div class="col-center">
      <h2>
      Nullam id dolor id nibh ultricies vehicula ut id elit.
      </h2>
      <p>
        Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Morbi leo risus, porta ac consectetur
        ac, vestibulum at eros. Donec sed odio dui.
      </p>
    </div>
  </div>
</div>

CSS

img {
  max-width: 100%;
}

.col-center {
  max-width: 700px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  min-height: 1px;
  margin: 0 auto;
}