I'm trying to customise a tab menu in bootstrap so that when a link is selected (active) it is highlighted in a coloured box. I can't seem to target the active element in css. Can someone advice how I need to do this? The html is as follows:
<div class="col col-md-3">
<div class="nav flex-column nav-pills" id="servicesTab" aria-orientation="vertical">
<a class="nav-link nav-pill-custom active" id="v-pills-orientation-tab" data-toggle="pill" href="#v-pills-orientation" role="tab" aria-controls="v-pills-orientation" aria-selected="true">Orientation</a>
<a class="nav-link nav-pill-custom" id="v-pills-education-tab" data-toggle="pill" href="#v-pills-education" role="tab" aria-controls="v-pills-education" aria-selected="false">Education</a>
<a class="nav-link nav-pill-custom" id="v-pills-investigation-tab" data-toggle="pill" href="#v-pills-investigation" role="tab" aria-controls="v-pills-investigation" aria-selected="false">Investigation</a>
</div>
</div>
These link to some tabs on the same page:
<div class="col col-md-9">
<div class="tab-content" id="v-pills-tabContent">
<!-- ORIENTATION TAB-->
<div class="tab-pane fade show active" id="v-pills-orientation" role="tabpanel" aria-labelledby="v-pills-orientation-tab">
<p>...</p>
</div>
<!-- EDUCATION TAB-->
<div class="tab-pane fade" id="v-pills-education" role="tabpanel" aria-labelledby="v-pills-education-tab">
<p>...</p>
</div>
</div>
</div>
Then the css for the nav-pill-custom class is given as follows.
.nav-pill-custom {
outline:none !important;
color: #6481A6;
}
.nav-pill-custom:hover {
background-color:#91cbeb;
border: #91cbeb;
}
.nav-pill-custom:focus,
.nav-pill-custom:active
{
background-color:#91cbeb;
border: #91cbeb;
}
Each of rthe css blocks works fine apart form the one for targeting the active link. I've also tried it without .nav-pill-custom:focus and I've tried it adding in .nav-pill-custom:active a targeting the anchor, which was a solution in another stackoverflow question but it doesnt seem to be working for me. How do I make this work?
Related
I would like to have a list of show/hide links that show divs occupying the same space, and able to be responsive.
My list appear on left and show content on right.
The idea is that when I click on Link 1, then content #1 will show up, and when I click on Link 2, then content #1 will disappear and content #2 will take it's place.
When loading the page on small and mobile screen, I would like to get content #1 showing up under Link 1 when clicking on it, and content 1 pushs link 2 down. And so on, content #2 showing up under Link 2, and pushs link 3 down…
I am working on Wordpress and Bootstrap, using my own theme. I don't reject to use .php file to achieve that. So far, I have tried this in html, css and js. Since I got stuck trying to get this reponsive, I am open to get a diffent method if necessary. But I would like to be able to fill the content and links name from Wordpress.
Here is my initial code
$(function () {
$("a[id^='link']").click(function (e) {
e.preventDefault();
var index = this.id.replace("link", "");
$(".panel").hide();
$("#panel" + index).show();
});
});
.side-nav {
font-size: calc(18px + 3vw);
}
.panel {
font-size: calc(18px + 1vw);
display: none;
position:absolute;
top: 0px;
right: 0px;
width: 70%;
}
<div id="side-nav-container">
<div class="side-nav">
<a id="link1 " href="# ">Link 1</a>
<a id="link2 " href="# ">Link 2>/a>
</div>
<div id="side-nav-content">
<div id="panel1 " class="panel ">Content 1</div>
<div id="panel2 " class="panel ">Content 2</div>
</div>
</div>
new code
$('#myTabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
})
.tab-content {
font-size: calc(12px + .99vw);
}
.nav-tab-list {
font-size: calc(18px + 1vw);
}
<div class="container">
<div class="row">
<div class="nav-tab-list col-lg-6 col-md-5 col-xs-12">
<ul class="nav nav-stacked" role="tablist">
<li class="active" role="presentation"><a role="tab" href="#home" aria-controls="home" data-toggle="tab">Home</a></li>
<li role="presentation"><a role="tab" href="#profile" aria-controls="profile" data-toggle="tab">Profile</a></li>
<li role="presentation"><a role="tab" href="#messages" aria-controls="messages" data-toggle="tab">Messages</a></li>
<li role="presentation"><a role="tab" href="#settings" aria-controls="settings" data-toggle="tab">Settings</a></li>
</ul>
</div>
<div class="col-lg-6 col-md-5 col-xs-12">
<div class="tab-content">
<div id="home" class="tab-pane active" role="tabpanel">Bonjour</div>
<div id="profile" class="tab-pane" role="tabpanel">Hello</div>
<div id="messages" class="tab-pane" role="tabpanel">Au revoir</div>
<div id="settings" class="tab-pane" role="tabpanel">Goodbye</div>
</div>
</div>
</div>
</div>
I have a tab container into my pages. I am trying to change the background of each tab pane when I click those tab links. I can change the background for each tab pane but my background image is not adjust into tab pane. I can not view full image because it becomes larger, I want to fit full image into the background. plz help
Here is my markup & css:
#import url('//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css');
.hotel-info-bg
{
background: url('../img/content/slide_bg_hotel-info.jpg');
}
<ul class="nav nav-tabs custom-tabs" role="tablist">
<li class="active">info
</li>
<li>amenities
</li>
<li>pets welcome
</li>
<li>behind the scene
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in hotel-info-bg" id="info">
<p>info</p>
</div>
<div class="tab-pane fade" id="amenities">
<p>amenities</p>
</div>
<div class="tab-pane fade" id="pets">
<p>pets welcome</p>
</div>
<div class="tab-pane fade" id="scene">
<p>behind the scene</p>
</div>
</div>
Here is s demo link: http://www.bootply.com/7OJqr7zXcn
Try this hope it will helps you -
.hotel-info-bg{
background:url("http://dummyimage.com/3375x2000/ebb0eb/f0f7fa.jpg") no-repeat center;
background-size: 100%;
height: 1200px;
}
In an AngularJS+Bootstrap project, I'm trying to create a vertical nav menu/tabs on the left, while the content of one of the tabs should have its own tabs (secondary tabs), horizontal.
My problems:
1. The secondary tabs' contents are displayed outside the desired location
2. Navigation in the secondary tabs doesn't work.
You can check out my code here: http://www.bootply.com/vhArvv1N5V
The main nav bar (vertical) works fine (as demonstrated at: http://www.bootply.com/74926)
To solve the first problem you need to float that first navigation left. I resolved this by using Bootstrap's col-md-2 and col-md-10 around the navigation and the tab content, plus the obligatory row and container-fluid for layout. To solve the second problem, you missed out some of the data-toggle="tab" and .tab-pane on the second set of tabs.
I also changed your first nav from .nav-tabs to just .nav. Nav tabs rounds the corners etc, not really needed here. Plus I removed almost all of your CSS and relied more on Bootstrap.
<div class="container-fluid">
<div class="row">
<!-- Nav left -->
<ul class="nav col-md-2" id="leftTabs">
<li class="active">
<a href="#a_tab" data-toggle="tab">
<span></span>ItemA
</a>
</li>
<li>
<a href="#b_tab" data-toggle="tab">
<span></span>ItemB
</a>
</li>
<li>
<a href="#c_tab" data-toggle="tab">
<span></span>ItemC - TABS!
</a>
</li>
</ul>
<!-- Nav content -->
<div class="tab-content col-md-10">
<div class="tab-pane active" id="a_tab">
<h1>Content of A</h1>
</div>
<div class="tab-pane" id="b_tab">
<h1>Content of B</h1>
</div>
<div class="tab-pane" id="c_tab">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<!-- Nav tabs content -->
<div class="tab-content">
<div id="first" class="tab-pane active">Content of first</div>
<div id="second" class="tab-pane">Content of second</div>
<div id="third" class="tab-pane">Content of third</div>
</div>
</div>
</div>
</div>
</div>
DEMO
Have styled a twitter bootstrap button to be centered in a thumbnail, and when the CSS is Inline (header or body) it works perfectly, but after moving the styles to an External stylesheet the button is left-aligned..
All the other styles that were inline and moved to an external sheet work perfectly..
Here's a bootply showing a centered-aligned button via an inline style:
http://bootply.com/65903
If you move the style to an external stylesheet, the button will not be centered..
Please advise!
Here's the CSS Style:
<style> #centered {text-align: center;} </style>
Here's the HTML:
<div class="full span8" id="centered">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3" id="thumbnail-width">
<div class="thumbnail">
<div id="image"></div>
<div class="caption" id="caption-color">
<div id="header">
<h1>
Header
</h1>
</div><br>
</div>
<p>
<div class="btn-group">
<button class="btn btn">Button</button>
<button class="btn btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</div><!--/View-->
</p>
</div>
</li>
</ul>
</div><!--/row-->
</div><!--/span-->
Try this:
<div class="full span8 text-center" id="centered">
I have a Google Chart that displays fine in its own page /graph/map_freq but is sized down when I display it as a tab content.
Here's the tabbable code:
<div class="tab-pane" id="map_freq">
<%= render "graph/map_freq" %>
</div>
Here's the code in graph/map_freq.html.erb:
<div id="chart_div" style="width: 900px; height: 500px;"></div>
I am pretty sure this is related to tabbable component of Bootstrap.
You shall mark it up like so...
<ul class="nav nav-tabs" id="map_freq">
<li class="active"><a data-toggle="tab" href="#featured-members">Your Tab Name</a></li>
</ul>
<div class="tab-content" id="yourId">
<div id="map_freq" class="tab-pane active fade in">
Your Content Here.
</div>
</div>
The code shall output a page similar to THIS ONE.