I need to align the image to the left but css bootstrap is automatically aligning it to the center. how to fix it?
<div class="container">
<div class="row">
<div class="col-md-6 img-left"></div>
<img src="http://placehold.it/150x150" alt="this is the portfolio main photo">
<div class="col-md-6 text-right text-uppercase">
<h1>Bruno</h1>
<h4>The SAVIOR</h4>
</div>
</div>
</div>
the problem
I think you need to close the div that contains your image/anchor after the closing anchor tag. Like so:
<div class="col-md-6 img-left">
<img src="http://placehold.it/150x150" alt="this is the portfolio main photo">
</div>
I can't actually test this but give it a try, I think it should solve your problem.
Looks like you are closing tag with left align before the image.
<div class="col-md-6 img-left">
<img src="http://placehold.it/150x150" alt="this is the portfolio main photo">
</div>
Related
I wanted three images in each row...
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/2103864/pexels-photo-2103864.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/1476321/pexels-photo-1476321.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
</div>
I expected it to be inside the border and all the images should have been of same size (three in each row) ...But its not.. help...
You have <div class="thumbnail">, but the built-in bootstrap 3 thumbnail classname is <div class="img-thumbnail">.
You say you want all images to be the same size, but your images have different proportions. Their pixel sizes are: 500x333, 500x750, and 500x375. What behavior do you want exactly? You could force them to all be the same height and width by setting adding styles for height=500px; width=500px;, but then the images will be distorted and squashed.
What you'll want to do is remove &w=500 from the image URLs so they scale to the dynamic width of the Bootstrap grid, and maybe also change the class on the columns to col-md-4 or col-sm-4 to make sure the images sit next to each other on smaller screens.
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/2103864/pexels-photo-2103864.jpeg?auto=compress&cs=tinysrgb&dpr=1">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/1476321/pexels-photo-1476321.jpeg?auto=compress&cs=tinysrgb&dpr=1">
</div>
</div>
</div>
If you want all three images to have the same height as well, you could do something like this:
.thumbnail img {
max-height: 300px;
}
To achieve true dynamic uniformity, you should look at using Bootstrap 4 card groups instead.
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 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!
I'm using a template with Bootstrap.
The following code:
<div class="row mix-grid thumbnails wrapper white" id="pictures_placeholder">
<div class="col-md-3 col-sm-4 mix ">
<div class="mix-inner">
<img class="img-responsive" src="../../../assets/admin/pages/media/works/img1.jpg"
alt="">
<div class="mix-details picture-bottom-label">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="col-md-4 col-xs-3">
<img src="../../../assets/admin/pages/media/profile/profile_user.jpg"
class="img-responsive img-circle profile-pic"
alt=""
/>
</div>
<div class="col-md-8 col-xs-8 text-left user-name">Asaf Nevo</div>
</div>
</div>
</div>
</div>
</div>
</div>
does this:
How can I make the name (Asaf Nevo) to be entered to the image ?
try adding this to CSS:
div.user-name{height:92px;line-height:92px;}
hope that helps.
Put the name in the same div as the image. Make both inline.
<img src="../../../assets/admin/pages/media/profile/profile_user.jpg"
class="img-responsive img-circle profile-pic" alt="" />Asav Nevo
Now play with the CSS property vertical-align. Something like vertical-align: middle could work and yes, this property should be applied to the surrounding div if not mistaken, potentially also to the inline content itself. I cannot try it right now.
Add this to the css:
.user-name {
margin-top:50%;
}
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>