How to add an image in the bottom right corner using css
I am currently using this tab using bootstrap v3.3.4 ... CSS:
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
color: #fff;
cursor: default;
background-color: #92278f;
border-width: 1px;
border-style: solid;
border-color: #92278f;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: #92278f;
-moz-border-left-colors: none;
border-image: none;
}
.nav-tabs {
border-bottom: 4px solid #92278f;
}
DOM:
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#parent" data-toggle="tab">Parent</a></li>
<li><a href="#student" data-toggle="tab">Student</a></li>
</ul>
My current output is:
How can I add this image:
below and become like that?
+3
source to share
3 answers
I've updated your markup to match the upload. I am adding image to content panels insteadul.nav-tabs
No additional markup is required for the image. Done using a pseudo-element :after
.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Loading custom CSS after bootstrap -->
<style>
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #fff;
cursor: default;
background-color: #92278f;
border-width: 1px;
border-style: solid;
border-color: #92278f;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: #92278f;
-moz-border-left-colors: none;
border-image: none;
}
.nav-tabs {
border-bottom: 4px solid #92278f;
}
/*THE CHANGES I MADE*/
.tab-pane {
position: relative;
}
.tab-pane:after {
position: absolute;
content: "";
width: 41px;
height: 23px;
background: url(http://i.stack.imgur.com/XYs3f.png);
right: 0;
}
</style>
<div role="tabpanel">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#parent" data-toggle="tab">Parent</a>
</li>
<li><a href="#student" data-toggle="tab">Student</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="parent">Parent Tab Content</div>
<div role="tabpanel" class="tab-pane" id="student">Student Tab Content</div>
</div>
</div>
+1
source to share
CSS only solution.
You cannot make changes to the bottom border of an unordered list ( ul
). Instead, add a div below the tabs and add a triangle in front of it.
/*to make the triange*/
.row:before {
float: right;
width: 0;
height: 0;
border-style: solid;
border-width: 0 41px 23px 0; /*width and height*/
border-color: transparent #92278F transparent transparent;
}
/*chnage active tab color and bottom border*/
.nav-tabs {
border-bottom: 4px solid #92278F !important;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
background-color: #92278F !important;
color: white !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#parent" data-toggle="tab">Parent</a>
</li>
<li><a href="#student" data-toggle="tab">Student</a>
</li>
</ul>
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-md-3">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-md-3">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="col-md-3">
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<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.4/js/bootstrap.min.js"></script>
+1
source to share
1.set the parent ul as 'position: relative' 2.add the new div as the ul sibling as "position: absolute; background: image url", 3.set the "top" and "right" of the div image in css accordingly
<div style="position: relative">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#parent" data-toggle="tab">Parent</a></li>
<li><a href="#student" data-toggle="tab">Student</a></li>
</ul>
<div style="position: absolute;background:(imageurl);top:10px;right:0px"/>
</div>
0
source to share