html - How to Get My Header Set Up Using Bootstrap? -
i finish noob when comes using bootstrap, or html. made simple banner using photoshop , simple nav-bar high school robotics team, having problem comprehending bootstrap's grid system. reason, navbar cutting off banner. want banner below navbar, how using bootstrap?
<!doctype html> <html> <head> <title>robotics team 3774 home</title> <!-- link 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>
bootstrap doesn't have banner element, , grid scheme isn't related placing item page. if want banner spans page navbar does, want @ jumbotron element. have replace "banner" class "jumbotron" so:
<!-- banner --> <div class="jumbotron"> <img src="banner.png" class="img-responsive" alt="reponsive image" /> </div> then need add together little custom styling hide grayness background , have banner image take width of screen:
.jumbotron { padding-left:0; padding-right:0; padding-bottom:0; } that should it. had edit reply 1 time saw had posted link website.
demo here
html css twitter-bootstrap
No comments:
Post a Comment