html - Remove space between navbar and jumbotron in Bootstrap 3 -
there space between navbar , jumbotron in bootstrap 3. there space between jumbotron , 3 horizontal thumbnails. want rid of space. have change css , change padding or best way?
_header
<nav class="navbar navbar-inverse" role="navigation"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div style="font-family:webdings;"> <%= link_to "project", root_path, class: 'navbar-brand' %> </div> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="active"><%= link_to "about", about_path %></li> <li><%= link_to "team", team_path %></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">resources<b class="caret"></b></a> <ul class="dropdown-menu"> <li><%= link_to "action 1", about_path %></li> <li><%= link_to "action 2", about_path %></li> <li><%= link_to "action 3", about_path %></li> <li><%= link_to "action 4", about_path %></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><%= link_to "contact", contact_path %></li> <li><%= link_to "sign up", register_path %></li> </ul> </div><!-- /.navbar-collapse --> </nav
home (with thumbnails)
<%= provide(:title, "home") %> <div class="jumbotron"> <div class="container"> <h1>welcome club!</h1> <p>blabla</p> <p><a class="btn btn-primary btn-lg">sign up</a></p> </div> </div> <div class="column"> <div class="col-xs-4"> <div class="thumbnail"> <img src="http://b2bleadblog.com/images/2007/05/18/huddlehands.jpg" alt="my image" /> <div class="caption"> <h3>blablabla</h3> <p style="font-size:17px">blablalbal.</p> </div> </div> </div> </div>
you have set margin-bottom:0;
navbar
, jumbotron
classes. can use custom stylesheet override this. use custom css next bootstrap css reference. below:
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="../css/customstyles.css" rel="stylesheet" type="text/css" />
see bootply example
Comments
Post a Comment