How do I add margin above images in Bootstrap3? - html

When I make the browser window small, the images are clumped together, I want to add some spacing between them, when they stack vertically, note that I also want to do this in pure bootstrap, because I know how to do it in css.
Code:
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive center-block" src="http://via.placeholder.com/250x250">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive center-block" src="http://via.placeholder.com/250x250">
</div>

#media (max-width: 767px) {
img {
margin-bottom: 15px;
display: block;
overflow: hidden;
}
}
You can use it with media query to control every element in different screens.
Thia code control the extra small screen like mobile screen.. it will add margin bottom to every image.
Follow the link to know more about media query
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Related

images resizing using bootstrap and css3

I have a problem with my images they are not responsive
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 visible-xs">
<div class="overview-device-wrapper">
<img src="img/landing/landing-app-left-overview.png" class="img-responsive" alt="">
</div>
</div>
/* Small decives (phones, 320px and up)*/
#media (min-width: #screen-xs-min) {
.overview-device-wrapper{
width: 320px;
}
}
the image does not appear properly in a mobile browser
image on a pc screen
image on a mobile browser
the image should appear on the left not at the bottom in a mobile browser
Responsive images
Images in Bootstrap 3 can be made responsive-friendly via the addition of the
Responsive Class
.img-responsive.
This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.
Image Demo with Class:
<img src="..." class="img-responsive" alt="Responsive image">

Center div inside a div that is in a bootstrap grid

I have the following structure:
<div class="footer col-md-12">
<div class="social col-md-3 col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-4">
<div id="fb"></div>
<div id="linkedin"></div>
<div id="gplus"></div>
</div>
</div>
There is also a div with copyright text, that I can't post. it is before the "social" div. On mobile devices, I am removing the copyright text(via display: none;), and I want to center the social icons, but I am unable to do so. I manage to do it, with margins and percentages, but on a specific resolution only, all other mobile resolutions are broken. Can someone assist me?
Note: I tried changing the xs column width and offset, but no combination managed to center the icons. I am posting the one, that was closest, that I centered with adding some margins.
i think that you just need to use class names in html and css as below
HTML
<div class="footer col-md-12">
<div class="copyright col-md-9 col-sm-8">
copyright information
</div>
<div class="social col-md-3 col-sm-4 col-xs-12">
Facebook -
Twitter -
Linkedin
</div>
</div>
CSS
.social{
background:aqua;
text-align: center;
}
.copyright{
background:silver;
}
#media screen and (max-width: 767px) {
.copyright {
display: none !important;
}
}
and this is the sample : https://jsfiddle.net/Tanbi/asohog47/1/
PS: For understanding clearly i used css background colors.
Have you tried:
.social {
display: block;
margin: 0 auto;
}
I find this works for me in most responsive centering dilemmas (with bootstrap in past times too I believe).
Let us know if this helps?

Retaining Aspect Ratio on DIVs with Fixed Gutter and Parent Padding

Haven't asked something here in a long time. I'm trying to build my design portfolio, and since I'm not really a front-end developer I lack a lot of knowledge, but that's why I'm here :)
I've got a container which is a DIV with a given padding. Inside I'll have a grid consisting of fluid-width cards. What would be the best option, or how to proceed towards that, for retaining the card aspect ratio (square) and the gutter between cards when resizing the parent element?
Simply put, I'm looking for something like the attached image:
So no matter the screen size, the gutter and padding will stay the same while the cards change their width to fill up the space.
I'm looking for something as CSS-pure as possible. Where should I look?
Thank you!
I am not sure if i got it right. Nenad's solution seems to be good. But i understood that the cards always stay 3 in a row doesn't matter how big or small the screen is (if this makes sense on every screen is another question now). I made you a fiddle in which you don't have to use pictures, you just have to include a little bit of JQuery Code, it's not much.
var divWidth = $('.square').width();
$('.square').height(divWidth);
Please see my fiddle here: https://jsfiddle.net/ee128fy2/
It would be no problem editing this for smaller screens to not have 3 squares in a row.
Note that the square height will not change when you resize your browser window, it will change on pageload. But anyway, i think no one will resize the window when looking on it on mobile phone or something.
Edit:
If you use pictures instead of jquery, resize will work live when scaling the browser window.
You can do this using boostrap https://jsfiddle.net/2Lzo9vfc/60/
HTML
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
</div>
</div>
CSS
.portfolio-item {
margin: 20px 0;
}
#media(max-width: 768px) {
.portfolio-item {
margin: 20px auto;
width: 100%;
text-align: center;
}
.portfolio-item img{
margin: 0 auto;
}
}

Adjust width of inline buttons automatically based on parent width

I currently have 3 buttons that are inline. I'm having issues in how to style these buttons so the width is automatically calculated to take the width of the parent div. For example, if the parent div is 1000px, I'd like the width of the inline buttons to be 1000/3 - a set margin to space these buttons. So those need to be taken into account which will be fixed. Catch is, the first and last element should not have a left margin and right margin respectively. This way I can dynamically add buttons and the styling should take care of the width. Hope that helps?
JsFiddle
HTML:
<div class="row" style="width: 1000px;border: 1px solid #999;">
<div class="row" style="padding-bottom:20px;">
My Button
My Button2
My Button3
</div>
</div>
You could use a table as so:
<table style="width:100%;">
<tbody style="width:inherit;">
<tr>
<td>Left</td>
<td>Centre</td>
<td>Right</td>
</tr>
</tbody>
</table>
And then add as many <td> elements as needed.
Assuming you are ignoring bootstrap standards, and wanting to custom style this.
try
.row {
/*width: 1000px;*/
border: 1px solid #999;
}
.row .row {
padding-bottom: 20px;
margin 0 -10px; /*offset the left and right gutter*/
}
.btn-default {
display: block;
float: left;
text-align: center;
margin: 10px; /*example margin*/
padding: 30px;/*example padding */
/*width: 30%;*/ /*fall back if needed*/
width: Calc((100% / 3) - 20px); /*minus 2 x margin*/
}
JSFiddle
KingKongFrog. Hi again. When you set a width to a fixed value like 1000px you lose the ability to be responsive. Try to use percentage. When using Bootstrap the xs starts around 700px, if you have say 3 buttons side by side you can run into problems fitting them across a small screen like 320px.
So you need to take over control from bootstrap css a little to do want you want to do.
I have added some of the bootstrap classes and also added some more custom classes to help show what you may need to do here.
Using #media (max-width: 320px) is the main width that you may need to control like reducing the size of the buttons/fonts etc. And if using any col-xs-offset-X when it shown on a screen size within 320px you will need to reset these to zero left etc.
Custom css that you want/need to over ride Bootstrap needs to be placed below bootstrap in the page.
Have a look at the Fiddle here and try resizing it.
Here is a full screen fiddle view that's easy for resizing.
<br>
<div class="container bg-info">
<br>
<div class="col-lg-12 bg-warning">
<br>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3
col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-xs-offset-2
col-xxs-pull-1">
My Button1
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3
col-lg-offset-0 col-md-offset-0 col-sm-offset-1 col-xs-offset-0
.col-xxs-offset-1">
My Button2
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3
col-lg-offset-0 col-md-offset-0 col-sm-offset-1 col-xs-offset-0
col-xxs-push-1">
My Button3
</div>
<br><br>
</div>
<br>
</div>
If you are working with bootstrap, you have to understand the grid system. There is col-xs-..., col-sm-..., col-md-..., col-lg-... to handle the column width. Therefore don't set a width. Read bootstrap grid options to understand the basics. A whole width of the screen has in total 12 columns. For example col-xs-12 in smaller displays fills the whole width.
HTML
<div class="row">
<div class="col-..."></div>
<div class="col-..."></div>
<div class="col-..."></div>
</div>
<div class="row myButtons">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
My Button
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
My Button2
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
My Button3
</div>
</div>
Here in all device sizes every part has 4 columns. In total 12. (Set, for example every cols-xs-4 to col-xs-12 and resize the screen to see what happens!). That's how bootstrap work.
Example

Bootstrap thumbnails too small on mobile

I have a set of Bootstrap thumbnails on my web page and I have set all the images with class .img-responsive. When I open the page on a mobile browser the thumbnails are appearing too small and I can't even resize them with css.
Here are my thumbnails:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/thumbnails/traditional.jpg" class="img-rounded img-responsive" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/thumbnails/mehndi.jpg" class="img-rounded img-responsive" alt="...">
</a>
</div>
... altogether 12 thumbnails
</div>
I have tried to edit the size of the thumbnails for mobile phone size devices with the following media query:
#media(max-width:767px){
.thumbnail > img {
height:70px;
width:120px;
}
}
However the width doesn't seem to surpass 80px, it seems like I can only set width up to around 80px and anything higher won't do anything.
If I leave the thumbnails like they are without trying the above CSS code they appear too small on mobile devices and I need a way to increase the size of the thumbnails on mobile devices only.
Here is a link to the site:
Change col-xs-6 to col-xs-12
So instead of
<div class="col-xs-6 col-md-3">
You'll have
<div class="col-xs-12 col-md-3">
This will make it so that each thumbnail will take up the full width of the phone, instead of having two across.
I have fixed the problem, I found that I had the below code elsewhere in my CSS that I didn't take notice of. This below media query was what made my images appear so small on mobile devices, I took it out and now images appear fine. Thanks for the help guys.
#media(max-width:767px){
.thumbnail > img {
height:40px;
}
}