Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Dorina Ramona Mihai Costan
Dorina Ramona Mihai Costan
17,168 Points
Posted by Dorina Ramona Mihai Costan
Dorina Ramona Mihai Costan
17,168 Points

Center columns inside row

Hi,

I have several columns inside a row. How can I center them? On small devices they show up on the left. Thank you.

The structure I have is as follows:

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

  <div class="col-xl-4 col-md-6">
  </div>
  <div class="col-xl-4 col-md-6">
  </div>
  <div class="col-xl-4 col-md-6">
  </div>

  <div class="col-xl-4 col-md-6">
  </div>
  <div class="col-xl-4 col-md-6">
  </div>
  <div class="col-xl-4 col-md-6">
  </div>

  <div class="col-xl-4 col-md-6">
  </div>
  <div class="col-xl-4 col-md-6">
  </div>
  <div class="col-xl-4 col-md-6">
  </div>

 </div>
</div>

Dorina

2 Answers

Sam Gord
Sam Gord
14,084 Points
Sam Gord
Sam Gord
14,084 Points

Hi, i think you should just add text-center class to your columns like this and col-12 (or col-xs-12 if bootstrap version is below 4 ) , so it knows how to look on small screens and with text-center class u can center the text content inside ur columns.

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

   <div class="col-xl-4 col-md-6 col-12 text-center">1</div>
  <div class="col-xl-4 col-md-6 col-12 text-center">2</div>
  <div class="col-xl-4 col-md-6 col-12 text-center">3</div>
  <div class="col-xl-4 col-md-6 col-12 text-center">4</div>
  <div class="col-xl-4 col-md-6 col-12 text-center">5</div>
  <div class="col-xl-4 col-md-6 col-12 text-center">6</div>
  <div class="col-xl-4 col-md-6 col-12 text-center">7</div>
  <div class="col-xl-4 col-md-6 col-12 text-center">8</div>
  <div class="col-xl-4 col-md-6 col-12 text-center">9</div>

 </div>
</div>

and now if u just check the space taken by the columns with a border u can see everything is nicely centered 

[class^="col"]{
  border: 1px solid red;
}

happy coding ;)

Dorina Ramona Mihai Costan
Dorina Ramona Mihai Costan
17,168 Points
Dorina Ramona Mihai Costan
Dorina Ramona Mihai Costan
17,168 Points

Hi Sam,

Genius!! Thank you. While at first sight seemed that didn't work you helped me to find the problem in my code. The problem were some flipping 3d cards that I created inside each div and spent the last 2 days trying to figure out why I couldn't center them. Thanks to you I found the problem and could fix the additional css code while adding your bootstrap code. The code I made for the flipping cards was in conflict with the Bootstrap code. But now, problem solved! Your code worked.

Thank you!! :)

Sam Gord
Sam Gord
14,084 Points
Sam Gord
Sam Gord
14,084 Points

glad i could help ;) keep up the good work, cheers