Add borders around Bootstrap tabs
Becca
I'm using Bootstrap tab markup like this:
.nav-tabs {
&.nav-tabs-alt {
padding-top: 30px;
li {
a {
color: @brand-info;
font-size: 16px;
}
}
li.active {
a {
background-color: #fff;
color: @brand-primary !important;
font-size: 16px;
}
}
}
}
.tab-content {
&.tab-content-alt {
}
}<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-alt" role="tablist">
<li role="presentation" class="active"><a href="#call" aria-controls="home" role="tab" data-toggle="tab">Call Us</a></li>
<li role="presentation"><a href="#email" aria-controls="profile" role="tab" data-toggle="tab">Email Us</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content tab-content-alt">
<div role="tabpanel" class="tab-pane fade in active" id="call">...</div>
<div role="tabpanel" class="tab-pane fade" id="email">...</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>However, I want to do this if the border surrounds the entire tab, as shown below, but in my example the border is not smooth and there are breakpoints. Any ideas how to achieve this result?
.nav-tabs {
&.nav-tabs-alt {
padding-top: 30px;
li {
a {
color: @brand-info;
font-size: 16px;
}
}
li.active {
a {
background-color: #fff;
color: @brand-primary !important;
font-size: 16px;
}
}
}
}
.tab-content.tab-content-alt {
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-top-color:transparent;
border-radius: 4px;
}
}<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-alt" role="tablist">
<li role="presentation" class="active"><a href="#call" aria-controls="home" role="tab" data-toggle="tab">Call Us</a></li>
<li role="presentation"><a href="#email" aria-controls="profile" role="tab" data-toggle="tab">Email Us</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content tab-content-alt">
<div role="tabpanel" class="tab-pane fade in active" id="call">...</div>
<div role="tabpanel" class="tab-pane fade" id="email">...</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>Emmanuel Lopez
I'm not sure I know, I just changed the border radius to zero, which created the effect of the fluid container
.nav-tabs {
&.nav-tabs-alt {
padding-top: 30px;
li {
a {
color: @brand-info;
font-size: 16px;
}
}
li.active {
a {
background-color: #fff;
color: @brand-primary !important;
font-size: 16px;
}
}
}
}
.tab-content.tab-content-alt {
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-top-color:transparent;
border-radius: 0px;
}
}<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-alt" role="tablist">
<li role="presentation" class="active"><a href="#call" aria-controls="home" role="tab" data-toggle="tab">Call Us</a></li>
<li role="presentation"><a href="#email" aria-controls="profile" role="tab" data-toggle="tab">Email Us</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content tab-content-alt">
<div role="tabpanel" class="tab-pane fade in active" id="call">...</div>
<div role="tabpanel" class="tab-pane fade" id="email">...</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>