How to position on the center of a line 3 columns? enter image description here

As you can see, there should be a center positioning, plus a change when reducing the size of the window.

here is the code of the block part

.dream__phraze { color: white; font-family: Montserrat; font-weight: 700; color: #333; font-size: 22px; width: 280px; } .dream__phraze-pos { display: inline; text-align: center; } .dream__steps { float: none; margin: 0 auto; } .dream__item { width: 300px; height: 400px; border-radius: 4px; } .dream__mask { position: absolute; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%); height: 100%; width: 100%; top: 0; left: 0; z-index: 1; } .dream__about { width: 100%; padding-left: 20px; padding-right: 20px; } .dream__about-pos { position: absolute; bottom: 12px; z-index: 2; } .dream__step1 { background-image: url("/img/step1.jpg"); background-position: center; } .dream__step2 { background-image: url("/img/step2.jpg"); background-position: center; } .dream__step3 { background-image: url("/img/step3.jpg"); background-position: center; } .dream__step { color: white; font-family: Montserrat; font-weight: 700; font-size: 10px; font-weight: 300; width: 70px; height: 20px; background-color: #ff4e50; border-radius: 10px; text-align: center; } .dream__step p { display: block; padding-top: 3px; letter-spacing: 2px; } .dream__caption { color: white; font-family: Montserrat; font-weight: 700; font-size: 24px; width: 200px; } .dream__caption-pos { margin-top: 7px; } .dream__topic { color: white; font-family: Roboto; font-weight: 300; font-size: 14px; color: #ccc; } .dream__topic-pos { margin-top: 7px; } 
 <div class="row"> <div class="dream col-xs-12 col-sm-12 col-md-12 "> <div class="dream__phraze dream__phraze-pos">How Dreamshare works?</div> <div class="row dream__steps"> <div class="col-xs-12 col-sm-3 col-md-3 dream__item dream__step1 marginrh20"> <div class="dream__mask dream__item"></div> <div class="dream__about dream__about-pos"> <div class="dream__step"><p>STEP 1</p></div> <div class="dream__caption dream__caption-pos">Sed leo enim, condimentum</div> <div class="dream__topic dream__topic-pos">Quisque libero libero, dictum non turpis in, luctus semper lorem. Donec rhoncus a leo sit amet facilisis.</div> </div> </div> <div class="col-xs-12 col-sm-3 col-md-3 dream__item dream__step2 marginrh20"> <div class="dream__mask dream__item"></div> <div class="dream__about dream__about-pos"> <div class="dream__step"><p>STEP 2</p></div> <div class="dream__caption dream__caption-pos">Morbi velit risus</div> <div class="dream__topic dream__topic-pos">Nulla venenatis tempor dui in molestie. Nulla quis dictum purus, sit amet porttitor est.</div> </div> </div> <div class="col-xs-12 col-sm-3 col-md-3 dream__item dream__step3"> <div class="dream__mask dream__item"></div> <div class="dream__about dream__about-pos"> <div class="dream__step"><p>STEP 3</p></div> <div class="dream__caption dream__caption-pos">Sed leo enim, condimentum</div> <div class="dream__topic dream__topic-pos">Quisque libero libero, dictum non turpis in, luctus semper lorem. Donec rhoncus a leo sit amet facilisis.</div> </div> </div> </div> </div> </div>

The center-block class did not help me, and this too:

 .col-centered{ float: none; margin: 0 auto; }

1 answer 1

Instead of col-sm-3 col-md-3 , col-sm-3 sufficient. Instead of col-xs-12 col-sm-12 col-md-12 , col-xs-12 enough. Instead of col-md-4 col-sm-4 col-xs-12 , col-xs-12 col-sm-4 enough. Smaller condition continues to be met on a wider screen. In particular, col-sm-3 and col-sm-4 are valid for all screens ≥768px .

The row must be inside the container container or container-fluid .

If the base material is stretched across the width of the page, then it is packaged in container-fluid , and the centered columns can simply be wrapped in container .

 <link href="http://xenglish.ru/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <style> img { height: auto; max-width: 100%; width: 100%; } </style> <div class="container-fluid"> <div class="row"> <img src="https://i.gyazo.com/c91d170daa2506dc6a3854ca9af8c49f.png" alt=""> </div> </div> <div class="container"> <h3 style="text-align: center">How Dreamshare works?</h3> <div class="row"> <div class="col-xs-12 col-sm-4"><img src="https://i.gyazo.com/86f74ae71496d465bd2039c6d213fdaf.png" alt=""></div> <div class="col-xs-12 col-sm-4"><img src="https://i.gyazo.com/b8fe0d89382cee7b53b7443123e083f1.png" alt=""></div> <div class="col-xs-12 col-sm-4"><img src="https://i.gyazo.com/2877b0a390a2a5e30612276b80bd0633.png" alt=""></div> </div> </div>

If the three columns should hire less space than the standard container suggests, then two options are possible:

  1. define a personal container for them (you’ll have the option suggested by soledar10 in the commentary to the question.)
  2. make two nested rows :

 <link href="http://xenglish.ru/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <style> img { height: auto; max-width: 100%; width: 100%; } </style> <div class="container"> <div class="row"> <img src="https://i.gyazo.com/c91d170daa2506dc6a3854ca9af8c49f.png" alt=""> </div> <div class="row"> <div class="col-xs-12 col-sm-offset-2 col-sm-8"> <h3 style="text-align: center">How Dreamshare works?</h3> <div class="row"> <div class="col-xs-12 col-sm-4"><img src="https://i.gyazo.com/86f74ae71496d465bd2039c6d213fdaf.png" alt=""></div> <div class="col-xs-12 col-sm-4"><img src="https://i.gyazo.com/b8fe0d89382cee7b53b7443123e083f1.png" alt=""></div> <div class="col-xs-12 col-sm-4"><img src="https://i.gyazo.com/2877b0a390a2a5e30612276b80bd0633.png" alt=""></div> </div> </div> </div> </div>