I'm trying to figure out why my changes to the padding and margin properties of the various navbar assets is failing to allow for the menu to resize properly on mobile.
JsFiddle is at https://jsfiddle.net/phobrla/b9zpbejg/
<html>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<li>The Burkean<br/>Pentad</li>
<li class="active">Intro <span class="sr-only">(current)</span> </li>
<li>Act</li>
<li>Scene</li>
<li>Agent</li>
<li>Agency</li>
<li>Purpose</li>
<li>Quiz</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</html>
Chande .navbar-inverse by .navbar-default
Regards!
JSFIDDLE
.navbar-outer .navbar-default{
background:red;
}
<div class="navbar-outer">
<nav class="navbar navbar-default">
I tried to setup bootstrap tabs without javascript (like written here: http://getbootstrap.com/javascript/#markup).
Code copied from bootstrap page:
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Tab 1</div>
<div role="tabpanel" class="tab-pane" id="profile">Tab 2</div>
<div role="tabpanel" class="tab-pane" id="messages">Tab 3</div>
<div role="tabpanel" class="tab-pane" id="settings">Tab 4</div>
</div>
</div>
https://jsfiddle.net/Zoker/w6xeyznk/
As you can see, it does not work and I don't know why. Anybody got an idea?
Have you included the jquery.js and the bootstrap.js it's important for work because you don't have to code the js part but bootstap already have it.
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
I am new to web coding entirely and I'm trying to create a grid of art projects for an online portfolio using bootstrap.
I'm trying to make specific columns show on a grid when the relevant button is clicked.
Currently when I click the text 'Video' it hides everything that isn't a video project as desired, but if I then click 'Photo', the video projects will hide and the photo projects will still be hidden and won't show.
Here's my code:
<div class="jumbotron text-center">
Video |
Photo
</div>
<div class="container-fluid">
<div class="row-fluid text-center">
<div class="collapse in col-xs-6 col-sm-4 col-md-3 novideotag">
<p>example: photo project 1</p>
</div>
<div class="collapse in col-xs-6 col-sm-4 col-md-3 nophototag">
<p>example: video project 1</p>
</div>
</div>
I want to be able to click 'Video' and show only video projects, click 'Photo' and show only photo projects but I'm not sure I'm going about it the right way; perhaps some javascript is required?
Below is a very basic jQuery solution to implement the show and hide feature. First assign a ID to the link and use the click() method of jQuery to initiate the click event. e.preventDefault() is used to override the browser's default click behaviour.
To implement the show and hide, call show(), hide() or slideUp(), slideDown() methods. There are many ways to do this. But this is one of the alternatives.
$('#video').click(function(e) {
e.preventDefault();
$('.novideotag, .design').slideUp();
$('.nophototag').slideDown();
});
$('#photo').click(function(e) {
e.preventDefault();
$('.nophototag, .design').slideUp();
$('.novideotag').slideDown();
});
$('#design').click(function(e) {
e.preventDefault();
$('.nophototag, .novideotag').slideUp();
$('.design').slideDown();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron text-center">
Video |
Photo |
Design
</div>
<div class="container-fluid">
<div class="row-fluid text-center">
<div class="collapse in col-xs-4 col-sm-4 col-md-4 novideotag">
<img src="http://placehold.it/200x200" />
<p>example: photo project 1</p>
</div>
<div class="collapse in col-xs-4 col-sm-4 col-md-4 nophototag">
<img src="http://placehold.it/200x200" />
<p>example: video project 1</p>
</div>
<div class="collapse in col-xs-4 col-sm-4 col-md-4 design">
<img src="http://placehold.it/200x200" />
<p>example: Design Project</p>
</div>
</div>
as the title says. Here is the code I'm using this theme http://startbootstrap.com/template-overviews/grayscale/
Edit where is the whole code to make it clear:
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<!-- <i class="fa fa-play-circle"></i> <span class="light">Start</span> Bootstrap -->
<img class="img-responsive" src="img/ssmk_logo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#weather">Weather Forecast</a>
</li>
<li>
<a class="page-scroll" href="#download">Estate Agent</a>
</li>
<li>
<a class="page-scroll" href="#contact">Stocks</a>
</li>
<li>
<a class="page-scroll" href="#about">About Us</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Should the objective be to get your logo into the Bootstrap navbar, you'll have to resize the image in some way. Your options for that are to do it with CSS, or to make a smaller version of it to be served up to your site. My solution resizes it using CSS.
img {
margin-top: -11px;
height: 40px;
width: 45px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="http://i.imgur.com/9PRm767.png" />
</a>
</div>
</div>
</nav>
Per the documentation for Bootstrap nav branding using images, this is how you add an image to your navbar instead of text for branding purposes. The documentation also says you'll need to either override some CSS depending on your image. My CSS here gets rid of some of the margin the navbar-header creates so the image is nice and flush with the rest of the navbar. Should you want a larger image to be used, you'll need to mess with the width of your navbar.
Using the img-responsive class from Bootstrap is not appropriate here due to the widths of various components in the navbar for Bootstrap, which only collapses down in smaller viewports and does not, itself, dynamically resize along all dimensions as the viewport gets wider. The Bootstrap navbar is easily the most inflexible item in the entire framework, but that's not a bad thing because really, you shouldn't be messing with the size of the navbar too much.
UPDATE
With the correct closing tags that should work. As you can see if you resize Maradona image, it appears to be responsive. I suggest you to validate your entire HTML and check if there is some error on it.
http://jsfiddle.net/xd1p8pov/
Your html (as we see it) is missing one div and one nav closing tags. Have you tried to inspect the .img-responsive class? By default in Bootstrap should be :
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
I almost copied the code from their website. The tab is initiated perfectly, and when I click on tabs, new panels are activated. However, the "active" class is not applied to the activated tab.
This is the code:
<ul class="nav nav-tabs">
<li data-toggle="tab" data-target="#a" class="active">a</li>
<li data-toggle="tab" data-target="#b" >b</li>
<li data-toggle="tab" data-target="#c" >c</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="a"> in tab a </div>
<div class="tab-pane fade" id="b">in tab b</div>
<div class="tab-pane fade" id="c">in tab c</div>
</div>
According to the Docs you need to put an id on each link in the header and that link needs to be inside the li which should have no other styles, i.e doesn't need all the data-target stuff in the li. Your list has with no data-toggle or id.
Your HTML would be like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">AAA</div>
<div class="tab-pane" id="b">BBB</div>
<div class="tab-pane" id="c">CCC</div>
<div class="tab-pane" id="d">DDD</div>
</div>
And you shouldn't need any Javascript, according to the Docs
Make sure your jquery is inserted BEFORE bootstrap js file:
<script src="jquery.min.js" type="text/javascript"></script>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="bootstrap.min.js" type="text/javascript"></script>
In my case, I have two elements with the same id. I could not notice the cause of problem for a long time, because the first such element was hidden.
This will work
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
My problem was that I sillily concluded bootstrap documentation is the latest one.
If you are using Bootstrap 4, the necessary working tab markub is: http://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior
<ul>
<li class="nav-item"><a class="active" href="#a" data-toggle="tab">a</a></li>
<li class="nav-item">b</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">a</div>
<div class="tab-pane" id="b">b</div>
</div>
My problem was with extra </div> tag inside the first tab.
for some weird reason bootstrap tabs were not working for me until i was using href like:-
<li class="nav-item"><a class="nav-link" href="#a" data-toggle="tab">First</a></li>
but it started working as soon as i replaced href with data-target like:-
<li class="nav-item"><a class="nav-link" data-target="#a" data-toggle="tab">First</a></li>
In my case we were setting the div id as a number and setting the href="#123", this did not work.. adding a prefix to the id helped.
Example:
This did not work-
<li> <a data-toggle="tab" href="##i"> <li/>
...
<div class="tab-pane" id="##i">
This worked:
<li><a data-toggle="tab" href="#prefix#i"><li/>
...
<div class="tab-pane" id="#prefix#i">
One more thing to check for this issue is html tag attribute id. You should check any other html tags in that page have the same id as nav tab id.
When I removed the smooth scroll script (https://github.com/cferdinandi/smooth-scroll), it worked.
When I moved the following lines from the head section to the end of the body section it worked.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
In my case (dynamically generating the sections): the issue was a missing "#" in href="#...".
For anyone struggling with this issue using bootstrap3 use the below classlist. If you've copy pasted from the DOC, It won't surely work. Becasue of the .show in new version.
<div class="tab-pane fade in active" >
<div class="tab-pane fade in" >
Use this for your code
<ul class="nav nav-tabs" style="margin-top:10em;">
<li class="active" data-toggle="tab">Assign</li>
<li data-toggle="tab">Two</li>
<li data-toggle="tab">Three</li>