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) Using Bootstrap Components Building a Navbar

mohammed mayat
mohammed mayat
4,228 Points
Posted by mohammed mayat
mohammed mayat
4,228 Points

padding around right link

how do i space around link to the right which says presented by treehouse, is there a class in bootstrap to make nav text bigger

mohammed mayat
mohammed mayat
4,228 Points
mohammed mayat
mohammed mayat
4,228 Points

<!DOCTYPE html> <html lang="en"> <head> <title>Full Stack Conf</title> <!-- Required meta tags always come first --> <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">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrapmin.css">

<!--My stylesheet-->
<link rel="stylesheet" href="css/mystyles.css">

</head> <body class="bg-default">

<nav class="navbar navbar-inverse bg-primary navbar-fixed-top"> <div class="container"> <ul class="nav navbar-nav navbar-left"> <li class="nav-item active"> <a class="nav-link" href="#Home">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#speakers">Speakers</a> </li> <li class="nav-item"> <a class="nav-link" href="#scedule">Scedule</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <a class="nabvar-brand" href="https://teamtreehouse.com/home">Prersented by Treehouse</a> </ul> </div> </nav>

<div class="container text-center"> <h1 class="display-1 m-t-3">Full Stack Conf</h1> <p class="lead m-b-3">Coming Soon, a One day conference about all things Javascript</p>

 <div class="col-lg-6 col-md-offset-3">
<div class="input-group">
  <input type="text" class="form-control" placeholder="Enter Your Email for Info...">
  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">Sign Up</button>
  </span>
</div>

</div> </div>

  <div class="container pt-5">

<!-- about --> <div class="row"> <div class="col-sm-6 col-sm-push-3"> <!-- when pushing or pulling column do opposite example "col-sm-6 col-sm-push-3" "col-sm-3 col-sm-pull-6"> --> <h3 class="mb-4">About Full Stack Conf</h3> <img class="img-fluid rounded hidden-xs-down" src="img/portland.jpg" alt="portland Conference" width="100%"> <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-sm-3 col-sm-pull-6"> <h3>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-sm-3"> <h3>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 end-->

<!-- speakers --> <h1 class="display-4 text-center my-5 text-muted">Speakers</h1> [Speaker bios go here]

<!-- schedule --> <h1 class="display-4 text-center my-5 text-muted">Schedule</h1> [Conference schedule goes here]

<!-- signup form --> <hr> <div class="row py-4 text-muted"> <div class="col-md-6 col-xl-5 offset-xl-2"> <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"> <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 --> </div><!--container end-->

<!-- jQuery first, then Bootstrap JS. -->
<script src="js/jquery3.2.1.js"></script>
<script src="js/bootstrap.min.js"></script>

</body> </html>

1 Answer

Karan Nahar
Karan Nahar
16,157 Points
Karan Nahar
Karan Nahar
16,157 Points

Hey! I have already posted a answer to your question one. You can find it here. And to make nav text bigger and stand out use the class lead. Here is link to the Typography section of bootstrap. (http://getbootstrap.com/docs/4.0/content/typography/)