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 Bootstrap Basics Responsive Layouts With the Bootstrap Grid Column Sizing

Peter Retvari
Peter Retvari
2,566 Points

Guys, could you help me? I would like to align the all columns in the center at large screen.

I added an extra breakpoints for XL screen to show the 2. column wider. However, I noticed that at large screen all the columns (text) are left-aligned, which doesn't look cool. How can I set all the columns centered (pictures, text)? You can check my learning page here: http://port-80-fhaal90o6a.treehouse-app.com/mainpage.html

<div class="col-lg-4 col-xl-12"> <h2 class=" mb-4">Hagyományos cigány foglalkozások</h2> <img class="mb-4 img-fluid rounded" src="img/kisgrofo.jpg" alt="magyar celeb"> <p class="lead">Hagyományos cigány foglalkozásokat mutatnak be Csíkszeredában a Hargita megyei romák kézműves mesterségeinek megőrzése elnevezésű program keretében.</p> <p class="lead">A Hargita Megyei GELEM GELEM Egyesület szervezte rendezvényen 45 roma fiatal vesz részt képzéseken, és június 4-éig hagyományos cigány foglalkozásokat mutatnak be a Szakszervezetek Művelődési Házának előterében, hogy népszerűsítsék, megismertessék ezeket a nagyközönséggel.</p> </div>

2 Answers

The Bootstrap 4 utility class for this is: mx-auto. This is used for horizontally centering fix-width block-level content. It applies the following style:

.mx-auto { margin: 0 auto; }

pat barosy
pat barosy
6,759 Points

Without having seen your code...Have you tried margin: 0 auto. The zero is top & bottom. Auto is for the right and left sides.
You will have to give the element a width before this will work though. Separate text can be positioned with text-align: center Hope this helps.