I have three images on my site that are not equally spaced apart.
I would like to space these three items evenly across the page.
I have tried adding them into a container and applying different span classes to them but with no joy.
What is the best way to solve this without causing problems elsewhere? (e.g. on smaller devices).
<div class="col-1 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
</a>
</div>
<div class="col-5 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
</a>
</div>
<div class="col-8 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
</a>
</div>
The images are not equally spaced because you have provided inappropriate column classes for second and third div's.
Use col-4 for second(instead of col-5) and col-7 for third(instead of col-8) div.
<div class="col-1 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
</a>
</div>
<div class="col-4 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
</a>
</div>
<div class="col-7 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
</a>
</div>
You might aswell want to provide extra padding to each div for small resolutions.
Additionally, as haxxxton mentioned in comments, you should rather stick to standard bootstarp-3 classes for better usability.
Cheers!
You may like the reactive behaviour of a flex based solution like in this JSFiddle:
http://jsfiddle.net/6tknc03s/
.container {
display:flex;
justify-content:space-around;
flex-wrap:nowrap;
}
.container img {
width:100%;
}
I've tested this solution in Chrome, compatibility in FF and iOS requires vendor specific prefixes to be added to the CSS I've used.
Your best bet is to put them in col-*-4 (I chose sm, but whatever works best for you) and make sure to add class="img-responsive" to the img element, like so:
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive">
</div>
</div>
</div>
Example: http://www.bootply.com/4lmpKkgENa
Try this out. it works i have edited your code with adding style to it.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
li {
display:inline;
list-style:none;
}
</style>
</head>
<body>
<div class="col-1 row-5 sizex-3 sizey-3">
<ul>
<li> <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
</a>
</li>
<li>
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
</a></li>
<li>
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
</a></li>
</ul>
</div>
</body>
</html>
Try this out:
<div class="row>
<div class-"container">
<div class="col-lg-4">
<img src="">
</div>
<div class="col-lg-4">
<img src="">
</div>
<div class="col-lg-4">
<img src="">
</div>
</div>
</div>
Related
As stated in the title, I have a div with a class .container and, for some reason, the div is not being displayed but the contents of the div are being displayed. The height of the .container is also 0
This is the HTML:
{block name='header_logo'}
<div class="header-logo">
<div class="container">
<div class="row">
<div class="col-md-2 hidden-sm-down" id="_desktop_logo">
<a href="{$urls.base_url}">
<img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
</a>
</div>
</div>
</div>
</div>
{/block}
and this is the inspector output:
<div class="header-logo">
<div class="col-md-2 hidden-sm-down" id="_desktop_logo">
<a href="...">
<img class="logo img-responsive" src="..." alt="some text">
</a>
</div>
</div>
If you look at the inspector output, you will see that the .container and the .row div's are not begin created. Any help will be highly appreciated.
Not sure if it's necessary, but I'm basing my theme of the prestashop classic theme.
Is it because you have the height as 0 ? Idk, im still new to this ...
Verify you included bootstrap correctly, Add this line to your html, between <head> and </head>,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
I want to use css, bootstrap to align the first line align left, and the second line will center on the text length of the first line.
I tried many ways but not.
code follow
<div class="col-md-6">
<a href="/" style="text-decoration:none">
<div class="col-md-12 row-eq-height" style="padding:0;">
<div class="col-md-2" style="padding:0">
<img src="/Content/images/logo.png" class="img-responsive" alt="">
</div>
<div class="col-md-10 tex-center" style="padding-right:0;">
<div style="padding:0">
<div class="line1-bold">THIS IS THE FIRST LONG HEADLINE</div>
<div class="line2">THIS IS THE SECOND HEADLINE</div>
</div>
</div>
</div>
</a>
</div>
Please check this..
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="col-md-6">
<a href="/" style="text-decoration:none">
<div class="col-md-12 row-eq-height" style="padding:0;">
<div class="col-xs-2" style="padding:0">
<img src="https://www.tenforums.com/attachments/browsers-email/18558d1485951187t-microsoft-edge-logo-microsoft-edge-100582336-large.png" class="img-responsive" style="width:100px" alt="">
</div>
<div class="" style="float:left;">
<div class="line1-bold" style="color:#b63957; font-size:18px;">THIS IS THE FIRST LONG HEADLINE</div>
<div class="line2" style="color:#b63957; font-size:16px; text-align:center;">THIS IS THE SECOND HEADLINE</div>
</div>
</div>
</a>
</div>
Try adding the class text-center to your divs.
Here is a working pen.
Something like this?
I don't know about your task, but I deleted some tags.
CSS
.img-responsive {
width: 100px;
float: left;
}
span {
display: block;
}
HTML
<div class="col-md-6">
<a href="/" style="text-decoration:none">
<div class="col-md-12 row-eq-height" style="padding:0;">
<img src="https://www.tenforums.com/attachments/browsers-email/18558d1485951187t-microsoft-edge-logo-microsoft-edge-100582336-large.png" class="img-responsive" alt="">
<span class="text-left">THIS IS THE FIRST LONG HEADLINE</span>
<span class="text-center">THIS IS THE SECOND HEADLINE</span>
</div>
</a>
</div>
Reference Link
I have these codes:
<div class="col-md-12">
<div class="parent">
<img class="img-responsive" src="image.png">TEXT
<img class="img-responsive" src="image.png">TEXT
<img class="img-responsive" src="image.png">TEXT
</div>
</div>
And it's giving me this:
I want to move the text to the right of the image.
Is there anyway I can make it happen without removing the img-reponsive class?
I want it to be like:
.parent > a{
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12">
<div class="parent">
<img class="img-responsive" src="http://placehold.it/50x50">TEXT
<img class="img-responsive" src="http://placehold.it/50x50">TEXT
<img class="img-responsive" src="http://placehold.it/50x50">TEXT
</div>
</div>
Adding pull-left to the images will work for you:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="col-md-12">
<div class="parent">
<img class="img-responsive pull-left" src="//placehold.it/50?text=FB"> FB
<img class="img-responsive pull-left" src="//placehold.it/50?text=TW"> TW
<img class="img-responsive pull-left" src="//placehold.it/50?text=IN"> IN
</div>
</div>
Or, just give another class and set the display to inline-block. Because, all the .image-responsive does is setting max-width and height with display: block;.
.img-responsive.inline-responsive {display: inline-block;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="col-md-12">
<div class="parent">
<img class="img-responsive inline-responsive" src="//placehold.it/50?text=FB"> FB
<img class="img-responsive inline-responsive" src="//placehold.it/50?text=TW"> TW
<img class="img-responsive inline-responsive" src="//placehold.it/50?text=IN"> IN
</div>
</div>
Note: As I said before, the img-responsive adds block level display to the <img /> so it is not possible to have both img-responsive as well as having the image's display inline... :(
I wish to have a group of centered images arranged in a certain way on the homepage of a bootstrap site. To look like the image below:
I want them to remain centered and then shrink when we go to mobile, with the "freeshipping block" not displaying so it just the two horizontal blocks below 750px.
I have set up a Plunker with the code I have
https://plnkr.co/edit/l6rbmEZQbqGZYifBmF5k?p=preview
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12 customer-greeting">
<p class="intro_text">My opening blurb of text</p>
<div class="offerscontainer">
<div class="offeroftheday">
<a href="product_info.php?products_id=221">
<img class="img-responsive" src="http://i.imgur.com/TQ6gwoO.jpg">
</a>
</div>
<div class="freeshipping">
<img class="img-responsive" src="http://i.imgur.com/Xqw75nl.jpg">
</div>
<div class="24hrdelivery">
<a href="index.php?cPath=53">
<img class="img-responsive" src="http://i.imgur.com/F3JTlas.jpg">
</a>
</div>
</div>
</div>
Should I be adding float classes or should they all be bootstrap col-8-sm, col-4-sm etc?
PS - Should #queries be used in Bootstrap sites or should they pretty much all layout be handled in the HTML code with col-8-sm (bootstrap classes) etc
You can do it like this..
HTML
<div class="container">
<div class="row">
<div class="col-sm-8">
<img class="img-responsive width-100" src="http://i.imgur.com/TQ6gwoO.jpg">
<br>
<img class="img-responsive width-100" src="http://i.imgur.com/TQ6gwoO.jpg">
<br>
</div>
<div class="col-sm-4">
<img class="img-responsive width-100" src="http://i.imgur.com/Xqw75nl.jpg">
</div>
</div>
</div>
CSS
.width-100 { width: 100%; }
You can write col-md-* or col-sm-* depending on your requirement!
Instead of setting up one after another, by reducing the screen images stretch unnatural (and stay in 4 columns).
I paste a piece of code with only 2 pictures, because otherwise stackoverflow blocking publication of the post.
Thanks in advance
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="viewport">
<a href="#">
<span class="dark-background" style="display: none;">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
<img src="images/portfolio/image1.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" />
</a>
</div>
</div>
<div class="col-xs-3">
<div class="viewport">
<a href="#">
<span class="dark-background" style="display: none;">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
<img src="images/portfolio/image2.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" />
</a>
</div>
</div>
</div>
</div>
As per your comment, if you use
<img src="images/portfolio/image3.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" class="img-responsive" />
it will ignore the second image tag. Instead use:
<img src="images/portfolio/image3.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item img-responsive" />
Also, you've made the column col-xs-3 which means that it will be 4 columns from 0px. To make the image 100% width up until the first (small) breakpoint, use col-sm-3instead.
So:
...
<div class="col-sm-3">
<div class="viewport">
<a href="#">
<span class="dark-background" style="display: none;">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
<img src="images/portfolio/image1.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" />
</a>
</div>
</div>
...
Use class="img-responsive" on img tags. See doc for more info