We Keep Coding

Different class in HTML depending of screen size

I'm newbie in bootstrap and I don't know how to do the following:
I'm working with Django and in my HTML template I have this:
<div class="tabs tabs-vertical tabs-left">
<ul class="nav nav-tabs">
This works fine with large screens, but it looks ugly when I access into the page with my phone, so I need that my template look like this if the screen is xs:
<div class="tabs">
<ul class="nav nav-tabs nav-justified flex-column flex-md-row">
Can this be done with bootstrap? It's necessary to clone the entire div content and hide depending of screen?
Thank you.

Just use javascript to add the classes if the screen width is less that your desired breakpoint. Since you're using Bootstrap, you can use jQuery to make it easier. Example:
if (window.innerWidth <= 500) {
$('#nav').removeClass('tabs-vertical tabs-left');
$('#navUl').addClass('nav-justified flex-column flex-md-row');
}
console.log(document.getElementById('nav').classList);
console.log(document.getElementById('navUl').classList);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs tabs-vertical tabs-left" id='nav'>
<ul class="nav nav-tabs" id='navUl'>
</ul>
</div>
You can use that if statement to do what you want. If you attach it to $(window).resize(); event you can update it to add the styles and remove them responsively.

You could try using mobiledetect.js script, and depending on what device it registers, send it to a different CSS script that would fit it for each type of device (i.e. mobile, pc, etc.)
Script download:
http://hgoebl.github.io/mobile-detect.js/

Dropddown header links to anchor

I want my dropdown menu header to both open the related menu and show directly the content of the first element of the submenu which is actually an anchor link in the page.
Here is the HTML code of the Dropdown Menu:
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
Menu
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li>submenu1</li>
<li>submenu2</li>
</ul>
</li>
</ul>
</div>
This is the HTML code of the anchored link:
<div id="myNavbar" class="tab-content">
<div class="tab-pane fade" id="submenu1">
<p>submenu1</p>
</div>
</div>
And this is the JS code I'm trying to use with no success. It works if I write a whole URL like "www.google.com" but not with "#submenu1".
$(document).ready(function() {
$('.dropdown').on('click', function () {
window.location="#submenu1";
});
});

you can try with
location.hash=anchorname
location.hash = "Submenu15";
var x = "The anchor " + location.hash;
document.getElementById("demo").innerHTML = x;
fiddle link http://jsfiddle.net/420rL0h2/

Try using the window.location.hash instead?
window.location.hash=anchorname;
Edit
You're using Twitter bootstrap right? The tabs won't be visible until the active class is added, and since you have a fade class too, I think you'll also need the 'in' class... Try this JS:
$('.dropdown').on('click', function () {
// Remove any active classes from the tabs
$('.tab-pane').removeClass('active in');
// Set the specific #submenu1 to be active
$('#submenu1').addClass('active in');
// Scroll the window down to the tabs that are now visible
window.location.href="#submenu1";
});
I'm not entirely sure what you're trying to achieve though, the links in the dropdown should do the displaying for you... but if you're just trying to force a specific tab to be open when you first click the nav dropdown, then this should do the trick.

Bootstrap toggleable tabs without having tab links

Is there a way to do the following
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
<div class="tab-pane" id='extra'> .... </div>
</div>
so there is another tab pane called #extra, but I don't want it to have a link as a tab, but I do want it to be toggleable by some other event
as bootstrap tabs.js works from trigger a tab('show') on a link and not on the pane itself, how do I trigger a tab pane without working on a tab?
note: I aware that the basic operation it does it doing a show() and hide() on the tab pane, but I feel that doing all this manually inhibits me from using callbacks, etc

You could add the tab for extras and then just hide it
Add this to your nav-tabs:
<li class="hidden"><a href="#extra" role="tab" data-toggle="tab" >Extra</a></li>
Then activate from somewhere else with JavaScript:
$("#launchExtra").click(function() {
$('#myTab a[href="#extra"]').tab('show')
});
Working demo in jsFiddle
Alternatively, you could just handle the whole thing yourself. The only thing .tab('show') does is remove the active class from all the other nav-tabs and tab-content elements. And then add back the .active class on the appropriate elements.
So first remove all the active elements and then add back the active class:
$("#launchExtra").click(function() {
$(".nav-tabs .active, .tab-content .active").removeClass("active");
$("#extra").addClass("active");
});
Working demo in jsFiddle

Create a link in memory and call the tab function on it.
$('<a data-toggle="tab" data-target="#some-id"></a>').tab("show")

an anchor link is used when you want to navigate. If you dont want to navigate, use a button. But style it like a link.
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<button class="btn btn-sm btn-link">Tab1</button>
</li>
</ul>
nows its a button and will not navigate. Just add any javascript you want to it.
But I recommend to use the anchor. Javascript tabs dont support history back in the browser. And its often tricky to start with ex. tab number 4 selected. I often let every tabpage be an own page. With its own route

Bootstrap 3 Dropdown on iPad not working

I have a simple Bootstrap 3 dropdown that is working in all browsers that I've tested (Chrome, FF, IE, Chrome on Android) but it is not working in Safari or Chrome on the iPad (ios 7.04).
I thought this was an issue with the ontouchstart as suggested in some other posts dealing with Bootstrap 2 but I've tried that with a local file and have had no success:
Bootstrap Collapsed Menu Links Not Working on Mobile Devices
I also don't want a solution where I have to modify the original javascript file since we're currently pulling that from a CDN.
I created a simple snippet here to test:
https://www.bootply.com/Bdzlt3G36C
Here's the original code that's in the bootply in case that link dies in the future:
<div class="col-sm-5 col-offset-2 top-buffer">
<div class="dropdown">
<a class="dropdown-toggle" id="ddAction" data-toggle="dropdown">
Action
</a>
<ul class=" dropdown-menu" =""="" role="menu" aria-labelledby="ddaction">
<li role="presentation"><a class="dropdown-toggle" id="ddAction" data-toggle="dropdown>
Action
</a>
<ul class=" dropdown-menu"="" role="menu" aria-labelledby="ddaction">
</a><a role="menuitem" tabindex="-1" href="http://www.google.com">Open Google</a>
</li>
</ul></div>
</div>

I figured it out. I was missing the href="#" in my anchor tag. It was working fine in other browsers but not chrome or safari on IOS. Works fine now. Here's the final code for anyone that's interested:
<div class="dropdown">
<a class="dropdown-toggle" id="ddAction" data-toggle="dropdown" href="#">
Action
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="ddaction">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="http://www.google.com">Open Google</a>
</li>
</ul>
</div>
And a working sample here:
http://www.bootply.com/104147

If you don't want to use an <a> tag, or add a redundant href attribute, you can just apply cursor:pointer css to the element, and it will work

safari versions we tested on iOS do not interpret z-index initial correctly. Increase the z-index on dropdown-menu. Instead of clicking on the item, it is hidden and the menu closes. To make Safari work we needed to override bootstrap z-index: initial.
.dropdown-menu {
z-index: 25000 !important;
}

You can also add a class to your a tag called clickable. This is a bootstrap class. It sets the css cursor: pointer.
<a class="clickable"></a>

I just had this issue - where the Bootstrap 3 navbar dropdown menu was not opening on an iPad mini 2 (but worked on an iPhone 7 and various desktops/laptops). After debugging directly on the iPad, I discovered the problem was using 'let' instead of 'var' inside a js function. Once I switched the 'let's to 'var's, everything was good to go. Just wanted to add this here in case it (or removing a similar obsolete feature) proves to be a fix for someone else too!

bootstrap target toggle was not working for me on iPhone/iPad WebKit. I ended up to toggle show class manually when clicked on the dropdown container
$scope.showDropdown = function(dropdownManuId) {
var element = document.getElementById(dropdownManuId);
if( element.classList.contains("show") ) {
element.classList.remove("show");
} else {
element.classList.add("show");
element.focus();
element.scrollIntoView();
}
};

Bootstrap Tab is not working when tab with data-target instead of href

I am developing bootstrap tabs with the use of data-target attribute to match the tab panes instead of using the href attribute, since i am developing angular app(href might spoil my route ).
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-target="home">Home</a></li>
<li><a data-target="profile">Profile</a></li>
<li><a data-target="messages">Messages</a></li>
<li><a data-target="settings">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
<script>
jQuery(function () {
jQuery('#myTab a:last').tab('show')
})
</script>
Please see this fiddle http://jsfiddle.net/xFW8t/4/. Where i recreated the whole .
I don't want the bootstrap style to be applied for my tabs, i want only the functionality, i want my styles to applied , is it anyway to stop bootstrap style to be applied?
Please help in this thanks in advance for any help.

Add data-toggle="tab" attribute in your markup
<a data-target="#home" data-toggle="tab">Home</a>
Js Fiddle Demo

try like this :
jQuery(function () {
jQuery('#myTab a').on('click', function() {
$(this).tab('show');
});
})

As mentioned by #Sachin, you have to specify the data-toggle attribute.
Other than that, make sure you correctly fill in your data-targets. These take jQuery selectors, not element ids, when used with `data-target.(link)

If you are using data-toggle="tab" - you can remove your js initialization -
<script>
jQuery(function () {
jQuery('#myTab a:last').tab('show')
})
</script>
Bootstrap will init tabs automatically.
If you want to init your tabs maually - you can remove data-toggle="tab" from the layout and itin all tabs separately:
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})