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).
Related
So im working on my portfolio for a class project and Im struggling with aligning my projects on a single row. Here is what I have / need help with....
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="https://codepen.io/Designird/pen/JwLQoj" target="_blank" class="project project-title">
<img class="img-thumbnail" src="https://i.imgur.com/8TGwqfY.jpg" alt="project">
<div class="project-tile">Howard Stern Tribute Page</div>
</a>
</div>
</div>
<div class="col-md-4">
<a href="https://codepen.io/Designird/pen/Jwemdd" target="_blank" class="project project-title">
<img class="img-thumbnail" src="https://i.imgur.com/UtN8xFJ.jpg" alt="project">
<div class="project-tile">Product Landing Page</div>
</a>
</div>
</div>
<div class="col-md-4">
<a href="https://codepen.io/Designird/pen/xmoWLB" target="_blank" class="project project-title">
<img class="img-thumbnail" src="https://i.imgur.com/lY9IvVn.jpg" alt="project">
<div class="project-tile">UFO Sighting Survey</div>
</a>
</div>
</div>
</div>
</div>
First thing I noticed was that you have too many closing </div> tags. You should indent your code properly so it would be easy to notice that. I added img-fluid class to images so they are responsive and do not overflow the container.
Check out the snippet below in full screen.
I removed many elements and I left what was important to solve the problem. i hope it helps.
You should also check out Bootstrap documentation, you have everything there. LINK
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.css">
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="#">
<img class="img-fluid" src="https://i.imgur.com/8TGwqfY.jpg" alt="">
<div>Howard Stern Tribute Page</div>
</a>
</div>
<div class="col-md-4">
<a href="#">
<img class="img-fluid" src="https://i.imgur.com/UtN8xFJ.jpg" alt="">
<div>Product Landing Page</div>
</a>
</div>
<div class="col-md-4">
<a href="#">
<img class="img-fluid" src="https://i.imgur.com/lY9IvVn.jpg" alt="">
<div>UFO Sighting Survey</div>
</a>
</div>
</div>
</div>
This question already has answers here:
Can I have multiple background images using CSS?
(8 answers)
Closed 6 years ago.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="">
<meta name="author" content="">
<title>Main Website</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<nav>
<div>
<div>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Mens Clothing</li>
<li>Womens Clothng</li>
<li>Boys Clothing</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div>
<div>
<div class="accordion">
<ul>
<li>
<div class="caption">Slide 1</div>
<a href="#">
<img src='Slider_Image1.jpg'/></a>
</li>
<li>
<div class="caption">Slide 2</div>
<a href="#">
<img src='Slider_Image2.jpg'/></a>
</li>
<li>
<div class="caption">Slide 3</div>
<a href="#">
<img src='Slider_Image3.jpg'/></a>
</li>
</ul>
</div>
</div>
<div>
<div class="centre , fade ,">
<div class="thumbnail">
<a href="Nike_Shoes1.html">
<img src="Image1.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div class="thumbnail">
<a href="Nike_Trainers.html">
<img src="Image2.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div class="thumbnail">
<img src="Image3.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div class="thumbnail">
<a href="new.html">
<img src="Mens_Clothing.jpg" alt="Mens Clothing">
</div>
</div>
<div class="centre , fade">
<div class="thumbnail">
<a href="women_clothing.html">
<img src="Womens_Clothing.jpg" alt="Womens Clothing">
</div>
</div>
<div class="centre , fade">
<div class="thumbnail">
<a href="boys_clothing.html">
<img src="Boys_Clothing.jpg" alt="Boys Clothing">
</div>
</div>
<div class="centre , fade">
<div class="thumbnail">
<img src="Converse_clothing.jpg" alt="Converse Clothing">
</div>
</div>
<div class="centre , fade">
<div class="thumbnail">
<img src="Adidas_clothing.jpg" alt="Adidas Clothing">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<!-- Footer -->
<footer>
</footer>
</div>
Here is the code for a website I am developing and I am trying to add images for the background. What I am looking to do is add 2 images on either side of the webpage, I am not sure on how to go about this also while trying to add an image as my background I see a white area the image is not set as the background, any help is appreciated.
Your best bet would be to merge the two images into one image using an image editor and then setting the merged image as your background.
Just open paint glue the 2 images together and use it as background.
I need three images to be placed in the first row and two images in second row as shown in the below figure.
My code for the above image is as follows,
<div class="row" style="margin-left:15%">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a Graduate</p>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a Post Graduate</p>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a PhD Guy</p>
</div>
</div>
<br>
<div class="row" style="margin-left:20%">
<div class="col-xs-6 col-md-3" style="margin-left:20%">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a Course taking one</p>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">Others</p>
</div>
</div>
But when I view it in mobile mode using chrome inspect element it is displayed as below
I know I have placed an extra div but if I don't place the div the fourth image is placed in the first row.
How can I get them aligned.
Maybe try this:
https://jsfiddle.net/68kycb4g/
<div class="container">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-offset-1 col-sm-5"></div>
<div class="col-xs-6 col-sm-5"></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
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)