How do I get Bootstrap grids to work as expected in the tabbed area?
I have seen several questions like this, but did not get into the same problem as me.
I already know how to make the grids (more or less) work inside the tab bar. However, they don't seem to work as I expect. I expect to see a set of tabs, each of which uses its own personal space to display data containing a grid. Instead, I see sets of data tabs trying to share the same grid space, and so the rows of data are stacked to be pushed down the page. The entire tab area will be twice as large as required, with the data on Tab2 in the bottom half of the tab bar, and the top half empty (or will contain data from Tab1).
Example:
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Tab1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab2</a></li>
</ul>
<div id="tab-content">
<div id="tab1" class="tab-pane fade in active">
<div class="row">
<div class="col-sm-6">
...tab1, col1 information...
</div>
<div class="col-sm-6">
...tab1, col2 information...
</div>
</div>
</div>
<div id="tab2" class="tab-pane fade in active">
<div class="row">
<div class="col-sm-6">
...tab2, col1 information...
</div>
<div class="col-sm-6">
...tab2, col2 information...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What I'm trying to figure out is if I'm coding something wrong, or if Bootstrap just doesn't support what I'm trying to accomplish. I've already tested the idea of deleting div.row, without any success. (The data flows unevenly rather than staying on separate lines.) It seems that the .col * - * classes cannot use the same space, even though they are hidden.
Any ideas?
source to share
You are missing a class .tab-content
in a tabbed container that applies display:none
to hidden ones. Also, both of your tabs have a class active
that makes them appear at the beginning.
Here's the markup:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Tab1</a>
</li>
<li><a data-toggle="tab" href="#tab2">Tab2</a>
</li>
</ul>
<div id="tab-content" class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<div class="row">
<div class="col-sm-6">
...tab1, col1 information...
</div>
<div class="col-sm-6">
...tab1, col2 information...
</div>
</div>
</div>
<div id="tab2" class="tab-pane fade">
<div class="row">
<div class="col-sm-6">
...tab2, col1 information...
</div>
<div class="col-sm-6">
...tab2, col2 information...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
source to share
Working example
#tabby h3 {
color: white;
background-color: #428bca;
padding: 5px 15px;
margin-bottom: 0;
}
.colorBlue {
color: white;
background-color: #266080;
padding: 15px;
margin: 0;
}
.colorRed {
color: white;
background-color: #f00;
padding: 15px;
}
.colorYellow {
color: white;
background-color: #E4EC45;
padding: 15px;
}
.colorGrey {
color: white;
background-color: #343537;
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<h2>Panels and Grids</h2>
</div>
<div id="tabby" class="container">
<ul class="nav nav-tabs">
<li class="active"> <a href="#1" data-toggle="tab">Uno</a>
</li>
<li><a href="#2" data-toggle="tab">Dos</a>
</li>
<li><a href="#3" data-toggle="tab">Tres</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1">
<h3>Tab One</h3>
<div class="col-md-6 colorBlue">This is my first 6.</div>
<div class="col-md-6 colorRed">This is my second 6.</div>
</div>
<!--/row-->
<div class="tab-pane" id="2">
<h3>Tab Two</h3>
<div class="col-md-4 colorBlue">This is my first 3.</div>
<div class="col-md-4 colorRed">This is my second 3.</div>
<div class="col-md-4 colorYellow">This is my second 3.</div>
</div>
<div class="tab-pane" id="3">
<h3>Tab Three</h3>
<div class="col-md-3 colorBlue">This is my first 4.</div>
<div class="col-md-3 colorRed">This is my second 4.</div>
<div class="col-md-3 colorYellow">This is my second 4.</div>
<div class="col-md-3 colorGrey">This is my second 4.</div>
</div>
</div>
</div>
source to share
AJK . This will cause the contents of Tab2 to return and not navigate down the page. You had a tab-content
like id
when you just needed it like class
.
Also, if you don't want divs with text to stack like shown here, use col-xs-xx.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>HTML/CSS Block not appearing</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
.block {
height: 240px;
padding-top: 15px;
background-color:orangered;
}
.tab2-clr {
color: blue;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="container block">
<div class="panel panel-default">
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">Tab1</a>
</li>
<li><a href="#tab2" data-toggle="tab">Tab2</a>
</li>
</ul>
<div class="tab-content ">
<div class="tab-pane active" id="tab1">
<div class="col-xs-6">
<h4>...tab1, col1 information...</h4>
</div>
<div class="col-xs-6">
<h4>...tab1, col2 information...</h4>
</div>
</div>
<div class="tab-pane fade in tab2-clr" id="tab2">
<div class="col-xs-6">
<h4>...tab2, col1 information...</h4>
</div>
<div class="col-xs-6">
<h4>...tab2, col2 information...</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
source to share