Still problems with bootstrap

1

cant seem to get the options for the navigation bar to go to the right. when i try and add padding to the items it moves as a whole and no spaces between the actual words. I think maybe my divs are messed up.
Also, I’ve noticed that switching between bootstrap 3 and 4 changes things a bit. Which should I be using?

My Codepen

 > <html>
> 
> <head>
>       <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
>       <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
>       <title>ZCH Web Design</title>
>       <link rel="stylesheet" href="main.css" >
>       <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
>     </head>
>       <body>
>       <div class="container.fluid">
>         <div class="navbar navbar-default"><!--Navbar-->
>           <div class="navbar-header">
>             <a class="navbar-brand" href="#">zchdesign</a>
>           </div><!--end navbar header-->
>           <ul class="navbar-nav">
>             <li class="active"><a href="#">home</a></li>
>             <li><a href="#">about</a></li>
>             <li><a href="#">projects</a></li>
>             <li><a href="#">contact</a></li>
>           </div><!--end list-->
>             
>            </div><!--navbar close div!--!>
>         
>         <div class="header"><!--Page Header-->
>           <br>
>           <br>
>          <br>
>          <br>
>          <br>
>           <h1 align=center>ZCH Web Design</h1>
>         </div><!--End Page Header-->
>         </div><!--End container.fluid-->
>         </body>
>     </html>

css is:

>     body{
>       background-image: url("http://www.gagallery.com/images/background.jpg");
>      background-repeat: no-repeat;
>        background-size: 100%;
>     }
>     .header{
>       font-family:permanent marker;
>     }

  >   .navbar-nav>li{
>       display:inline-block;
>       float: right;
>     }

Thank you so much guys

2

I don’t think this is your problem, but it should be:

<div class="container-fluid">
3

Hey. There are a few issues. First of all, you don’t need the html, head and body tags in Codepen.

Also, don’t put your CSS files in the html panel. Use the Codepen Settings option to load them and be sure they always use “https” (Codepen is not happy, otherwise).

6ac30680f5854d3c5737bfcf935b411d.png741×610 29.4 KB

You were linking boostrap.css twice (in html panel and in the settings option) and that was giving you some styling issues.

As you see in the image, I would suggest using Bootstrap 4. Even if it’s still in alpha, it doesn’t seem to have any major issues at the moment and provides a lot of useful and easy-to-use classes to style your website.

For example, you navbar code would be like this:

<nav class="navbar navbar-toggleable-xl navbar-light bg-faded">
  <a class="navbar-brand" href="#">zchdesign</a>
  <div class="collapse navbar-collapse" id="navbar">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link active" href="#">home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">about</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">projects</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">contact</a>
      </li>      
    </ul>
  </div>
</nav>

Notice the “ml-auto” class in the navbar-nav ul? That basically means “margin-left:auto” and it’ll push your elements to the right. More about spacing here and about the navbar here.

Your current navbar (with Boostrap 3), instead, is missing some wrapper divs and some closing tags. It should be like this:

  <div class="navbar navbar-default"><!--Navbar-->
    <div class="container-fluid">
      <div class="navbar-header"><!--navbar header-->
        <a class="navbar-brand" href="#">zchdesign</a>
      </div><!--end navbar header-->
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav"><!--list-->
          <li class="active"><a href="#">home</a></li>
          <li><a href="#">about</a></li>
          <li><a href="#">projects</a></li>
          <li><a href="#">contact</a></li>
        </ul><!--end list-->
      </div>
    </div>
  </div>

As for your div with the title, just use the header element and the bootstrap “text-center” class on the h1 to center it. More about text alignment here.

<header><!--Page Header-->
  <h1 class="text-center pt-5">ZCH Web Design</h1>
</header>

Bootstrap 4 provides some padding classes as well, as you can see by the pt-5 (padding-top) class on the h1. If the provided classes don’t fit your needs, you can easily use css to add more\less padding.

I made a fork of your portfolio with these changes here.

Hope this helps!

2 Likes
4

Thank you so much for you extremely informative and helpful post! I cannot thank you enough! It looks like I had both bootstrap 3 and 4 selected in codepen and was using a combination of both to try and make the page.

1 Like