I want to implement navigation with nav-pills class on my website but when I use the code below, buttons in navigation are too big. I would like to change its height. Any solution?
<div class="row">
<div class="box">
<div class="col-sm-12 text-center">
<ul class="nav nav-pills">
<li role="presentation" class="active">Rekonstrukce</li>
<li role="presentation">Zemní práce</li>
<li role="presentation">Rodinné domy</li>
</ul>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic1.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<img class="img-responsive" src="http://placehold.it/750x450" alt="">
</div>
<div class="col-sm-4 text-center">
<img class="img-responsive" src="http://placehold.it/750x450" alt="">
</div>
<div class="clearfix"></div>
</div>
</div>
Add this in your css:
.nav>li>a {
padding: 4px 6px !important;
}
(Adjust the padding values according to the size you need)
Related
I have a nav-tab section to house some images and there will be different images for different sections.
When you resize the fiddle to a smaller size, you can see the huge white space that the images overlap. I'm unsure as to how I can fix this... I have to surely remove height-100, but I want to enforce the height as it'd look nice.
HTML CODE:
<div class="container-fluid bg-dark h-100">
<div class="row">
<div class="col-md-8">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link text-danger" data-toggle="tab" href="#tab1" role="tab">tab1</a>
</li>
<li class="nav-item">
<a class="nav-link text-danger" data-toggle="tab" href="#tab2" role="tab">tab2</a>
</li>
<li class="nav-item">
<a class="nav-link text-danger" data-toggle="tab" href="#tab3" role="tab">tab3</a>
</li>
<li class="nav-item">
<a class="nav-link text-danger" data-toggle="tab" href="#tab4" role="tab">tab4</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content text-white">
<div class="tab-pane fade in" id="tab1" role="tabpanel">
<!--Row 1 start-->
<div class="row py-2 h-100">
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
</div>
<!--Row 1 end-->
<!--Row 2 start-->
<div class="row py-2 h-100">
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
</div>
<!--Row 2 end-->
<!--Row 3 start-->
<div class="row py-2 h-100">
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
</div>
<!--Row 3 end-->
</div>
<div class="tab-pane fade in" id="tab2" role="tabpanel">
x
</div>
<div class="tab-pane fade in " id="tab3" role="tabpanel">
x
</div>
<div class="tab-pane fade in" id="tab4" role="tabpanel">
x
</div>
</div>
</div>
<div class="col-md-4 control">
<div class="container-fluid">
some content here
</div>
</div>
</div>
</div>
CSS:
html, body {
box-sizing: border-box;
height: 100%;
margin: 0;
}
.control{
background-color:#24262D;
}
Here is the JSFiddle (With B4 and CSS):
https://jsfiddle.net/yeg1dsut/9/
Thank you!
Instead of using h-100 (height:100%), you should use min height...
.container-fluid {
min-height: 100%;
}
I am trying to remove a space between 2 elements in my html page.
I set margin-left:0px; but it does not work.
Here is the code:
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-6 thumb">
<div class="thumbnail" href="#">
<img class="img-responsive" src="https://scontent-arn2-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13687120_1671928519797295_1730075489_n.jpg?ig_cache_key=MTMwOTc1OTU2NDk2NjUzNzE2NQ%3D%3D.2" alt="">
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-6 thumb">
<ul class="bullet-remover">
<li class="item">
<div class="media">
<div class="media-body">
<h3 class="media-heading"><strong>Luisa Martine</strong></h3>
😍😍😍🙌😌👌👏👏👏😏😏
</div>
</div>
</li>
</ul>
</div>
</div>
As you can see, there is a space between image and ul tag.
I have tried to remove the left margin with:
.bullet-remover{
list-style-type: none;
margin-left: 0px;
}
But it does not work?
I can see that you have some custom padding to your bullets. So one option is to cancel out the padding-left and padding-right of the ".thumb"
One more issue. please don't leave out the ".container" around your ".row". Those two are perfect & made for each other.
container adds left and right padding which will be cancelled by the rows, so there won't be any scrollbar in the page
Option 2:
if you are fine with the column gutter spaces,
Then your bullet remover should be as follows
.bullet-remover{
padding:0;
margin:0;
list-style:none;
}
Check the snippet
.thumb {
/*padding-left: 0 !important;
padding-right: 0 !important;*/
}
.bullet-remover
{
list-style:none;
padding:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-6 thumb">
<div class="thumbnail" href="#">
<img class="img-responsive" src="https://scontent-arn2-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13687120_1671928519797295_1730075489_n.jpg?ig_cache_key=MTMwOTc1OTU2NDk2NjUzNzE2NQ%3D%3D.2" alt="">
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-6 thumb">
<ul class="bullet-remover">
<li class="item">
<div class="media">
<div class="media-body">
<h3 class="media-heading"><strong>Luisa Martine</strong></h3>
😍😍😍🙌😌👌👏👏👏😏😏
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
What is the best way to style the selected column of the following HTML code
<div class="row">
<div class="col-md-3 portfolio-item starter">
<a href="#/starter">
<img class="img-responsive" src="images/starter.jpg" alt="starter">
</a>
<h2>Starter</h2>
</div>
<div class="col-md-3 portfolio-item">
<a href="#/salads">
<img class="img-responsive" src="images/salads.jpg" alt="salads">
</a>
<h2>Salads</h2>
</div>
<div class="col-md-3 portfolio-item">
<a href="#/main">
<img class="img-responsive" src="images/main.jpg" alt="main">
</a>
<h2>Main</h2>
</div>
<div class="col-md-3 portfolio-item">
<a href="#/dessert">
<img class="img-responsive" src="images/desserts.jpg" alt="desserts">
</a>
<h2>Desserts</h2>
</div>
</div>
<!-- /.row -->
I have 4 columns as above, when user selects(clicks) one of the column, i want to highlight it with some style
Try this
Add main-menu class and active class
JQUERY
$('.main-menu div').on('click',function(){
$('div').removeClass('active');
$(this).addClass('active');
});
CSS
.active{
background-color:green;
}
DEMO
This seems to be my 2nd question regarding Twitter Bootstrap Grid system - but I'm fumbled.
I'm trying to build an image gallery, where each slide has an interesting layout. The JavaScript part is no problem (yay jQuery!) - it is the CSS/HTML part I'm stuck with.
Here's what I got so far - jsfiddle
<div class="container" style="padding-top: 20px; position: relative; padding-bottom: 20%; height: 0; overflow: hidden">
<div class="flexslider" style="position: absolute; top: 0; left: 0; padding-top: 20px; padding-bottom: 20px; width: 100%; height: 100%">
<ul class="slides">
<li>
<!-- Slide #1 -->
<div class="row">
<div class="col-xs-offset-2 col-xs-3" style=""> <a href="#" class="thumbnail">
<img src="img/bg-blur/IMG_8446.jpg">
<div class="thumbtext"><h3>TEXT</h3></div>
</a>
</div>
<div class="col-xs-5">
<div class="row">
<div class="col-xs-4"> <a href="#" class="thumbnail">
<img src="img/bg-blur/IMG_8757.jpg">
<div class="thmbtxt">Description</div>
</a>
</div>
<div class="col-xs-4"> <a href="#" class="thumbnail">
<img src="img/bg-blur/IMG_8848.jpg">
<div class="thmbtxt">Description</div>
</a>
</div>
<div class="col-xs-4"> <a href="#" class="thumbnail">
<img src="img/bg-blur/IMG_8864k.jpg">
<div class="thmbtxt">Description</div>
</a>
</div>
<div class="col-xs-6"> <a href="#" class="thumbnail">
<img src="img/bg-blur/noga.jpg">
<div class="thmbtxt">Description</div>
</a>
</div>
<div class="col-xs-6"> <a href="#" class="thumbnail">
<img src="img/bg-blur/untitled-(1-of-11).jpg">
<div class="thmbtxt">Description</div>
</a>
</div>
</div>
</div>
<div class="col-xs-2"></div>
</div>
</li>
</ul>
</div>
</div>
If you notice, the left-most image takes up only 1 row. What I'm trying to do is automatically resize it (the block in which it is sitting in), so it takes up the entire height of the 2 rows. This way it would look neat and symetrical.
Any ideas or thoughts about this?
Maybe I'm over thinking this.. How can I have an odd number of thumbnails using Bootstrap's grid. I have 7 thumbnail images at the bottom. I'd like to space them out of course using the grid. Maybe this isn't possible and should just use regular CSS?
Here's what I tried:
<div class="row-fluid">
<div class="span12">
<ul class="thumbnails">
<li class="span1">
<div class="thumbnail">
<img src="img/diningroom/1.jpg" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="img/diningroom/2.jpg" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="img/diningroom/3.jpg" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="img/diningroom/4.jpg" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="img/diningroom/5.jpg" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="img/diningroom/6.jpg" alt="">
</div>
</li>
<li class="span1">
<div class="thumbnail">
<img src="img/diningroom/6.jpg" alt="">
</div>
</li>
</ul>
</div>
</div>
You can customize bootstrap columns here (see #gridColumns).