100% sizing image inside div issue, unwanted space on left and right - html

building a webpage, and i ran in to some trouble, so here´s whats going on,
Im building the page using the bootstrap´s grid, but only the grid.
ive made a staff page where i want 4 pictures side by side, with a small margin between each image, the pictures should squares with an aspect of 1:1
Heres my: html;
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
<img src="img/product.jpg">
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
<img src="img/product.jpg">
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
<img src="img/product.jpg">
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
<img src="img/product.jpg">
The image inside the div is cropped in 1:1
and has the following css:
max-width: 100%; max-height: 100%;
position:relative;
display:block;
Heres the problem, for some reason the image dosn't fill out the div, the image is centered with about one em space on each side which result in an unwanted margin between the images.
Also how do i place magin between the divs, without one of the divs jumps down, when each div is 20% of the width.
I dont have enough reputation to post images yet :/

Try the following: In your css create a class called .nopadding (or anything you want) assign the following values to it padding-left:0; padding-right:0; then add it to <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 nopadding">
play around with it til you get the desired result.

Related

bootstrap 3 row height is always 400px

I am trying to get a Highcharts pie chart to display correctly.
<div id="chart">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div id="row-electric" class="row row-chart">
<div id="divPieSubst" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
<div id="divPieFeedr" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
</div>
<div class="row row-chart">
<div id="divPieCycle" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
<div id="divPieRoute" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div id="divBarDays"></div>
</div>
</div>
row-chart is something I tried to do with some CSS I found:
<style>
div.row-chart {
height: auto;
}
</style>
Currently, I am struggling with the CCS, which I think is caused by bootstrap v3.3.7.
Why is it always coming back as a tall rectangle?
I included the Highcharts tag, because this could be something that Highcharts is doing.
In Highcharts API we can read:
height: null, number, string
...
By default (when null) the height is calculated from the offset height
of the containing element, or 400 pixels if the containing element's
height is 0. Defaults to null.
So yes - the height is set by the chart.
API Reference: https://api.highcharts.com/highcharts/chart.height
What I understand that you want to resize the rectangles height?
have you took a look at this page ?
https://getbootstrap.com/docs/4.0/utilities/sizing/
The full snippet is needed I think what you posted is only a small part of it . I don't see any link to an external or internal bootstrap stylesheet .
another option is to resize the div tags with the css height property
so take a look at this link too
https://www.w3schools.com/cssref/pr_dim_height.asp
peace!

bootstrap grid system filling image

I am trying to create a column that is separated into 2 nested columns. They both should be images that cover the entire height and width of their respected columns. However, for some reason the images go over the div that contains them.
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<img class="fitimages" src="./images/pic1.jpg">
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
<img class="fitimages" src="./images/pic2.jpg">
</div>
.fitimages{
max-width: 100%;
max-height: 100%;
}
I used max-width and max-height so that they would surround the parent div but for some reason the left image doesn't fill the entire width and height while the right one goes over it.
give your img this style : object-fit: cover;

Resposive div with image inside and text

I have 3 column in a wrapper div and each div has two div's one with image and one with text.
I want to make it responsive so that image % text share 50% of area and at certain point text is visible & image is hidden or vice versa.
http://codepen.io/anon/pen/meWYeQ?editors=110
<div class="container">
<div class="row inner-wrapper">
<div class="row footer-quick-links">
<!--
<div class="col-xs-12 col-sm-6 col-md-4 bk-blue no-padding">
One
</div>
<div class="col-xs-12 col-sm-6 col-md-4 bk-dark-blue no-padding">
Two
</div>
<div class="col-xs-12 col-sm-6 col-md-4 bk-magenta no-padding">
Three
</div>
-->
<div class="footer-ql-box bk-dark-blue"><div class="f-img-box"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=163&h=100"></div><div class="f-label-box"><span>OUR MISSION</span></div></div>
<div class="footer-ql-box bk-blue"><div class="f-img-box"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=163&h=100"></div><div class="f-label-box"><span>VISION</span></div></div>
<div class="footer-ql-box bk-magenta"><div class="f-img-box"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=163&h=100"></div><div class="f-label-box"><span>CONTACT</span></div></div>
</div>
</div>
</div>
Add a 100% to the width to the image inside image box and drop the absolute positioning of the image box itself (so the image properly scales it's half).
.footer-ql-box img{width:100%; height: 100px;}
.f-img-box{float:left;width:49%;}
Note forcing the height to 100px allows it so the height of the image does not scale down when the window shrinks.
Example

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

Positioning the divs using bootstrap in different viewports

I am using bootstrap 3 and I would like to create three divs that change their position depending on the current viewport. I think this should be possible, but somehow i cannot conclude how this can be established using bootstrap. So I have 3 divs, lets call them img text and ex.
I would like them to work for the different viewports as the following image suggests.
I have played around with pull and push, but that does not seems to solve my problem. I am looking for a “pull-up class” so that i can move for example a div to the right (using push) and then be able to move it up.
This is an example that still does not work..
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-6">
img
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-6 col-md-pull-6">
text
</div>
<div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-0">
exp
</div>
</div>
EDIT 1: This code is one of the answers to this question that exactly targets the core of the problem. I updated the example image and added another one to illustrate the problem.
This code produces this behaviour (Notice the empty space on the right side of the sm view)
EDIT 2: The accepted answer provides a solution for a fixed size text, img, exp.
For the behavior you want, you need to use the bootstrap push and pull classes.
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-6">
img
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-6 col-md-pull-6">
text
</div>
<div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-0">
exp
</div>
</div>
You can see it in action here: http://www.bootply.com/CNGe5KxWxK
More info about pushing and pulling can be found here: http://getbootstrap.com/css/#grid-column-ordering