I am trying to override two images on top of other using Bootstrap, as the code below:
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2 col-lg-offset-2" style="border:solid 1px black">
<div style='position: relative; width:100%; height:100%; background:center; border:solid 1px red'>
<img src="Images/banner-transparente.jpg" class="img-responsive" />
<div style='position: absolute; width: 100%; height: 100%; top: 20%; border:solid 1px black'>
<img src="Images/logo-trt-home.png" class="img-responsive" />
</div>
</div>
</div>
</div>
The result is OK when the screen is in a large scale:
but when on small screens, the image is cropped.
How can I do that using Bootstrap's grid system, using the responsiveness needed for the image?
code on http://jsfiddle.net/s116Ld99/5/
I've tried the code below:
<div class="row">
<div class="col-lg-8 col-md-8 col-md-offset-2 col-lg-offset-2" style="border:solid 1px black">
<div style="background-image:url('Images/banner-transparente.jpg'); border: solid 1px green">
<img src="Images/logo-trt-home.png" class="img-responsive" />
</div>
</div>
</div>
It works perfectly!
[1] https://jsfiddle.net/bwth52ft/
I would make the first image a background image. Putting position: absolute on the logo is going to make it ignore its container.
Not completely done, but closer: http://jsfiddle.net/s116Ld99/7/
<div style="background-image:url('http://files.intersu.webnode.pt/200000002-a2450a33fe/bannerB[1].jpg'); background-repeat: no-repeat; background-size: 100% auto; border:solid 1px green">
<img src="https://eloconcursos.com.br/imagem/59954926655ae736857b696.73701051.jpg/167/200/4:3" class="img-responsive" />
</div>
Problem: The width of image's parent is fixed which gets from the image. When you resize the window, it does not changed so the image is big in small screen.
You can add width(percent) to the image container. It's better to do this by css media query in certain width.
Jsfiddle
<div style=" width:20%;position: absolute; top: 20%; border:solid 1px yellow">
<img src="https://eloconcursos.com.br/imagem/59954926655ae736857b696.73701051.jpg/167/200/4:3" class="img-responsive" />
</div>
Related
I have two bootstrap columns, side by side, but when I add a margin to separate them then the columns stack on top of each other. I am using the Mixed: mobile, tablet, and desktop grid template for my two columns, and I'm not sure whether this is the cause.
#antGame { // container
height: 60%;
position: relative;
background-color: #fff;
border: 1px solid grey;
padding: 0 !important;
}
#stimuliContainer {
height: 40%;
}
#stimuli {
width: 100%;
max-height: 100%;
}
#errorMsg {
height: 20%;
width: 100%;
}
#antInstruct {
height: 60%;
background-color: #fff;
border: 1px solid grey;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-8" id="antGame">
<div id="stimuliContainer">
<img id="stimuli" src="images/ant/cues/blank.png">
</div>
<div class="col-xs-12 col-sm-6 col-lg-8" id="errorMsg">
<span>Error Message</span>
</div>
</div>
<div class="col-xs-6 col-lg-4" id="antInstruct">
<h4>Instructions</h4>
<span>Hi</span>
</div>
</div>
</div>
I don't recommend to override the padding of the Bootstrap columns, because it can break the responsive, but you know, sometimes you are forced to do it.
In that case the most clean way you can do, is add a custom class .padding-2, that overrides the Boostrap padding but don't destroy the responsive.
HTML
<div class="container">
<div class="row">
<div class="col-xs-6 padding-2 ">
<div style="border: 1px black solid; background-color: red;">
1 col
</div>
</div>
<div class="col-xs-6 padding-2 ">
<div style="border: 1px black solid; background-color: blue;">
2 col
</div>
</div>
</div>
</div>
CSS
.padding-2 {
padding-left: 2px;
padding-right: 2px;
}
Demo: http://www.bootply.com/eO033QYCn3
Try to use padding instead of margin, and then, if you want to have for example border, you can add another element inside this one with padding.
Here's an example:
<div class="container">
<div class="col-xs-6" style="padding: 5px">
<div style="border: 1px black solid;">
1 col
</div>
</div>
<div class="col-xs-6" style="padding: 5px">
<div style="border: 1px black solid;">
2 col
</div>
</div>
</div>
And demo:
https://plnkr.co/edit/5fCMTJMJWPALk3W45t1i?p=preview
I'm trying to use Bootstrap grid system with rows each has 4 column contains image, but the image size is big and it gets over its container, so I set image position: absolute and div position: relative but it still doesn't work. Is there any way to make the image fit the div container with container's size?
.sec5row {
border: 1px solid red;
position: relative;
}
.filter {
position: absolute;
}
<div class="container">
<div class="row">
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
</div>
<div>
You can use the below code to fit image inside the responsive div
.filter {
width:100%;/*To occupy image full width of the container and also fit inside the container*/
max-width:100%/*To fit inside the container alone with natural size of the image ,Use either of these width or max-width based on your need*/
height:auto;
}
I think the bootstrap class ".img-responsive" solves your problem. So try something like this:
<div class="container">
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f1.jpg" alt="f1">
</div>
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f2.jpg" alt="f1">
</div>
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f3.jpg" alt="f1">
</div>
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f4.jpg" alt="f1">
</div>
</div>
<div>
It sets the style of your image to "max-width: 100%;" and "height: auto;" which should be exactly what you need. There should be no need for any additional css.
Add css to your code
#img {
width: 100px;//change px size
height: 100px;//change px size
padding-left: 3px;
padding-top: 5px;
}
Just add class="img-responsive" to your img tag...it works fine
Couldn't find an answer to this so..
It's probably a very simple solution but I've been tunnel visioning for the past 20 minutes and it's frustrating me.
The padding of an image, which I'm trying to give a circle background element, is really annoying.
Margin doesn't work either.
My image is 120 px large, and the padding of 2em just makes it smaller, but I want it to stay the same size, but have a bigger background size.
Here's the code:
<div class="row">
</div class="container-fluid">
<div class="col-md-4 img-icon-pad">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
</div>
/* Boxes */
.img-icons {
height: 120px;
width: auto;
background-color: #f8f8ec;
border: 2px solid #e97117;
padding: 2em;
border-radius: 50%;
}
.img-icon-pad {
}
And a screenshot of what I mean:
No padding
https://i.gyazo.com/745896ad418274f70e8189f6b84c7b6d.png
Padding:
https://i.gyazo.com/b2a264d8a361a426cc43992d90352e79.png
I think it is ok
<div class="row">
<div class="container-fluid">
<div class="col-md-4 ">
<div class="thumbnail">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
</div>
<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
</div>
<style>
.thumbnail {
height: 150px;
width: 150px;
border: 2px solid #e97117;
background-color: #f8f8ec;
padding: 2em;
}
</style>
Did you increase the height of .img-icons class from 120 to 150px or bigger if you want.
If that doesn't work then you have probably restricted size of the div containing the img.
I was going to say that in .img-icons class you have width set to auto. This may be causing resizing. If you set it to a fixed width it may not resize.
i think this is what are you trying to do :
<div class="row">
<div class="col-md-4">
<div class="img-responsive img-icons" >
<div class="img">
</div>
</div>
</div>
</div>
css:
.img-icons {
height: 120px;
width:120px;
background-color: #f8f8ec;
border: 2px solid #e97117;
border-radius: 50%;
padding: 2em;
}
.img{
text-align:center;
height:120px;
width:120px;
background-color: #f8f8ec;
border: 2px solid #e97117;
}
you can see the result here https://jsfiddle.net/nt0zqc1t/3/
I am currently trying to fit a border around an image and unfortunately bootstrap isn't making it easy. It seems that they add padding in the columns which is preventing the border from fitting. I am not sure if there is a way to do it without removing the padding bootstrap provides. Here is my code
<section class="part2">
<div class="container">
<div class="row">
<img src="/wp-content/themes/creativeforces/images/kid2.jpg" class="resize-image col-sm-4" id="image1" alt="">
<img src="/wp-content/themes/creativeforces/images/kid2.jpg" class="resize-image col-sm-4" alt="">
<img src="/wp-content/themes/creativeforces/images/kid2.jpg" class="resize-image col-sm-4" alt="">
</div>
<div class="row">
<div>
<p class="text-center col-md-4">Teach</p>
<div>
<p class="text-center col-md-4">Read</p>
</div>
<div>
<p class="text-center col-md-4">Play<p>
</div>
</div>
</div>
</section>
.part2{
background-color: #EEEEEE;
// width:100%;
margin-top: 30px;
padding-bottom: 20px;
padding-top: 20px;
}
#image1{
border: 3px solid #000;
}
As you can see the border is not properly fitted around the image.
Any help would be appreciated!
I have had this issue before and I took the padding off the image. It has never affected my design in any way.
As you may know you would simply add:
#image1{
border: 3px solid #000;
padding: 0;
}
I have also done a bit of digging after you asked your question and it seems like someone else suggested removing the padding.
Bootstrap unwanted image padding
I'm trying to achieve the following layout for a search result box. Specifically a 100% width and height image that on the right has two stacked containers that equals the height of the image, each with differing background colours that are butted up right against the image.
All attempts to achieve this simple layout are failing miserably. The issue I keep hitting is the when using something like:
<div class="search-result-box">
<div class="row">
<div class="col-md-3">
<img src="" class="img-responsive" style="height: 196px;" height="196">
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
The image doesn't quite fill the col-md-3 column completely and thus you see the column's background.
What's the best way to do this?
Bootstrap columns have a padding of 15px by default. Also the image width has to be 100%. You can do something like this:
<div class="search-result-box">
<div class="row">
<div class="col-md-3" style="padding: 0;">
<img src="" class="img-responsive" style="width: 100%;">
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
Jsfiddle: http://jsfiddle.net/HM4gE/1/
I wouldn't use Bootstrap columns though to achieve this since you seem to have some fixed heights and widths for columns. Instead I would do it like this (given that the height and the width of the image is always 196px): http://jsfiddle.net/HM4gE/2/
Check browser support for calc() before using it: http://caniuse.com/calc
Here a possible answer:
<div class="search-result-box">
<div class="row">
<div class="col-md-3">
<img src="" class="img-responsive" style="height: 196px;" height="196" />
</div>
<div class="col-md-9">
<div class="title">Title</div>
<div>Link1</div>
</div>
</div>
</div>
.search-result-box {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.row > * {
display: table-cell;
}
.col-md-3 {
background: orange;
width: 260px;
height: 196px;
}
.col-md-9 {
vertical-align:top;
background: grey;
}
.title {
background: #ccc;
width: 100%;
height: 150px;
}
http://jsfiddle.net/junkie/fAPQ6/2/