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">
Related
This question already has answers here:
Order columns through Bootstrap4
(6 answers)
Closed 2 years ago.
how are you?
I have the following situation. I need that when I switch to cellular xs mode, the image is displayed to the right of the title. for example, for the title it is col-xs-9 and the image is col-xs-3. Previously I did it in boostrap3, which the example solution is the following:
<div class="col-xs-4 col-sm-3 pull-right col-md-12">
<img src="...." alt="" class="img-responsive" style="max-width:100px;" />
<div>
<header class="col-xs-8 col-sm-9 col-md-12">
<a href="#">
<h2>Title</h2>
</a>
</header>
Giving as a solution the pull-right class,
But in this case, for boostrap4, I have tried with the float-right and the float-sm-right replacing the pull-right, but it doesn't work. How could I fix it? Could there be any examples?
I show how I want the image to look in relation to the text.
picture mode pc or big screen
xs mode image or cellular
I've tried to recreate your situation in both versions, and I've used order keyword for positioning of order of cells in row.
here is in version 3
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="col-xs-9 pull-right col-sm-12">
<img src="https://placehold.it/200x200" alt="" class="img-responsive" style="max-width:100px;" />
</div>
<header class="col-xs-3 col-sm-12">
<a href="#">
<h2>Title</h2>
</a>
</header>
and this is version 4
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-9 order-2">
<img src="https://placehold.it/200x200" alt="" class="img-responsive" style="max-width:100px;" />
</div>
<header class="col-3 order-1">
<a href="#">
<h2>Title</h2>
</a>
</header>
</div>
</div>
Can somebody tell me why my "thumbnails" (will make them look nicer after setting up the page) are not in the row format I am attempting in code link?
<div class="row">
<div class= "col-md-6">
<div class="thumbnail">
<a target="_blank" href="http://codepen.io/gusd773/pen/YZExVE">
<img src="http://jumpoff.tv/assets/images/made/assets/images/posts/ready_to_die2_326_202_s_c1_center_top.jpg"></a>
</div>
</div>
<div class= "col-md-6">
<div class="thumbnail">
<a target="_blank" href="http://codepen.io/gusd773/pen/YZExVE">
<img src="http://jumpoff.tv/assets/images/made/assets/images/posts/ready_to_die2_326_202_s_c1_center_top.jpg"></a>
</div>
</div>
</div>
</div>
Because you are not referencing bootstrap
Codepen
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
There are CSS in the codepen for
`col-md-6`
Use the below code and adjust the width for columns.
`.col-md-6{width:50%; float:left;}`
Let me know one if that works the way you intended it to.
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!
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>