Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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.

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; }