Photoshop Question posted in
The official user guide can be found here.

How to Get My Header Set Up Using Bootstrap? – Photoshop

I am a complete noob when it comes to using bootstrap, or any HTML. I made a simple banner using photoshop and a simple nav-bar for my high school robotics team, but I am having trouble comprehending bootstrap’s grid system. For some reason, my navbar is cutting off my banner. I want the banner below the navbar, how would I do this using bootstrap?

<!DOCTYPE html>
<html>
<head>

<title>Robotics Team 3774 Home</title>

<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">


<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<!-- Navbar -->

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Team 3774</a>
        </div>
        <div class="navbar-collapse collapse" style="height: 0.866667px;">
            <ul class="nav navbar-nav">
                <li><a href="#">Team Bio</a></li>
                <li><a href="#">Our Robot</a></li>
                <li><a href="#">Our Coach</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Outreach</a></li>
                <li><a href="#">Youtube</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- Banner -->
<div class="banner">
    <img src="Banner.png" class="img-responsive" alt="Responsive image">
</div>




</body>
Tags:

3

Answers


  1. 0

    include your banner inside the container tag

    <head>

<title>Robotics Team 3774 Home</title>

<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">


<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<!-- Navbar -->

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Team 3774</a>
        </div>
        <div class="navbar-collapse collapse" style="height: 0.866667px;">
            <ul class="nav navbar-nav">
                <li><a href="#">Team Bio</a></li>
                <li><a href="#">Our Robot</a></li>
                <li><a href="#">Our Coach</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Outreach</a></li>
                <li><a href="#">Youtube</a></li>
            </ul>
        </div>
    </div>
   <!-- Banner -->
<div class="banner">
    <img src="Banner.png" class="img-responsive" alt="Responsive image">
</div>
</div>

    Login or Signup to reply.
  2. 0

    Bootstrap doesn’t really have a banner element, and the grid system isn’t necessarily related to placing an item like that into your page. If you want a banner that spans the page like the navbar does, then you probably want to look at their Jumbotron element. All you really have to do is replace your “banner” class with a “jumbotron” like so:

    <!-- Banner -->
<div class="jumbotron">
    <img src="Banner.png" class="img-responsive" alt="Reponsive image" />
</div>

    Then you just need to add a little custom styling to hide the gray background and have your banner image take up the width of the screen:

    .jumbotron {
    padding-left:0;
    padding-right:0;
    padding-bottom:0;
}

    That should do it. I had to edit my answer once I saw that you had posted the link to your website.

    Demo Here

    Login or Signup to reply.
  3. 0

    Just add the following line to your CSS:

    body
{
    padding-top:50px;
}

    And you should be good to go.

    This is generally done in Bootstrap when navbar-fixed-top is used.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search