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 4 Basics (Retired) Responsive Layouts with the Bootstrap Grid Styling Content

Megan Amendola
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Megan Amendola
Treehouse Teacher

Spacing utilities not working

I am using the newest way (mb-2 instead of m-b-2), but I am not seeing spacing on my <h3> or <img> elements. I did see spacing happen on the container div.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Full Stack Conf</title>
    <!-- bootstrap css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"     integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

  </head>
  <body>
    <div class="container pt-2">

      <!--about-->
      <div class="row">
        <div class="col">
          <h3 class="mb-2">About Full Stack Conf</h3>
          <img class="mb-1 img-fluid" src="img/pdx.jpg" alt="Portland">
          <p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p>
          <p>Explore the future of JavaScript with a lineup of industry professionals. Discover new techniques to advance your career as a web developer.</p>
        </div>
        <div class="col">
          <h3 class="mb-2">Expert Speakers</h3>
          <p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p>
          <p>Want to meet the international JavaScript community and share skills with some of the world's top experts, hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p>
          <p>Full Stack Conf is committed to being inclusive and welcoming for everyone. We look forward to another intensive day of learning and sharing.</p>
        </div>
        <div class="col">
          <h3 class="mb-2">What You'll Learn</h3>
          <ul>
            <li><strong>MongoDB</strong>: NoSQL database</li>
            <li><strong>Angular</strong>: JavaScript framework</li>
            <li><strong>Express</strong>: Framework for Node</li>
            <li><strong>Node.js</strong>: JavaScript environment</li>
            <li><strong>ES2015</strong>: Latest version of JavaScript</li>
            <li><strong>Babel</strong>: JavaScript compiler</li>
          </ul>
        </div>
      </div><!--about-->
    </div><!--container-->

    <!-- jQuery first, then bootstrap js -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>
Lewis Marshall
Lewis Marshall
22,672 Points

All H elements have a default of margin bottom .5rem that is equal to mb-2.

So if your try mb-3, mb-4 or mb-5 to the H element it will add margin bottom to it.

Try mb-2 for the image because you have it set to mb-1.

http://v4-alpha.getbootstrap.com/utilities/spacing/