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 4 Basics (Retired) Responsive Layouts with the Bootstrap Grid Column Ordering and Offsetting

Nouh Ahmed
Nouh Ahmed
7,085 Points
Posted by Nouh Ahmed
Nouh Ahmed
7,085 Points

Col-xl-4 is not working

<hr>
  <div class="row p-y-2 text-muted">
    <div class="col-md-6 col-xl-4">
      <p><strong>About Treehouse</strong></p>
      <p>Treehouse brings affordable technology education to people everywhere to help them achieve their dreams and change the world.</p>
    </div>
    <div class="col-md-6 col-xl-4">
      <p><strong>Stay up-to-date on Full Stack Conf</strong></p>
      <div class="input-group">
         <input type="text" class="form-control" placeholder="Email">
         <span class="input-group-btn">
           <button class="btn btn-primary" type="button">Sign up</button>
     </span>
    </div>
      </div>
    </div>
 <hr><!-- /signup form -->

Col-xl-4 is not working. Is ther an update for this code.

Felix Yakubov
Felix Yakubov
17,475 Points
Felix Yakubov
Felix Yakubov
17,475 Points

Could you please provide with codepen or redesign the code so it will be readable? Then we will be able to help =)

Nouh Ahmed
Nouh Ahmed
7,085 Points
Nouh Ahmed
Nouh Ahmed
7,085 Points

Felix Yakubov how can i post my code so it can be readable

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Nouh Ahmed, below every reply box is a link that says Markdown Cheatsheet and it gives you tips on how to format posts, including code. I went ahead and took care of this one for you by using three ``` to open and close the code block.

With that, I copied your code over to codepen, and it worked. http://codepen.io/kevink/pen/VPzZWG

So I'm not sure without more info why you're not seeing similar results. Make sure you are using B4, the current version, B3 does not have an XL class. You may need to update to the latest version of B4 to see if that fixes it.

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Sorry Nouh Ahmed

You're two columns don't add up to 12 at the XL size. You're using col-xl-4 on both divs -- that only adds up to 8. What are you trying to accomplish with this larger breaksize setting (the xl part)?