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
Related
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!
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;
This is the code I wrote using Bootstrap:
<div class='container-fluid' >
<div style='background-color:#24242a;height:20vh;margin-top:10%;left:0;margin-left:0%;'>
<div class="row" style='padding-top:20px;width:100%;' >
<center><h1 style='font-weight: 400;letter-spacing: 0.05em;color:#E4D5D5;'>CINE SUNTEM <span style='font-weight:bold;'>NOI?</span></h1></center>
<div class="col-xs-6 col-sm-4 col-lg-4">
1
</div>
<div class="col-xs-6 col-sm-4 col-lg-4">
2
</div>
<div class="col-xs-6 col-sm-4 col-lg-4">
3
</div>
</div>
</div>
</div> <!-- END CONTAINER -->
But the div is only 80% the width of the screen and centered. How can I make it 100% width? I will appreciate all answers.
The class container-fluid is not supposed to be full width. If you want to e.g. add a background color that stretches to 100% width of the window I suggest you make a wrapper div outside of the container-fluid:
<div style="width:100%; height: 600px; background-color: red;">
<div class="container-fluid">...</div>
</div>
The container-fluid class is just a fluid container as an addition to the normal container class from Bootstrap. I have used this many times and it should work! Try the code above to check it out.
EDIT
The OP used the code above to introduce a full-width container with Bootstrap. He also had the additional problem of having a parent div, which already had the container class. Beware of this as the parent can also additionally limit the ability to introduce full-width window divs.
I have some html content that I want to align and distribute as two columns beneath each other, of equal content.
But on mobile divices, I'd like the content to be stacked as one column.
How could I achieve this using bootstrap css?
I tried as follows, which did not work:
<div class="row">
<div class="col-lg-2">
//the content to distribute
</div>
</div>
Additionally, I cannot use css columns as I have to support IE8+9.
<div class="row">
<div class="col-xs-12 col-sm-6">
//first half
</div>
<div class="col-xs-12 col-sm-6">
//second half
</div>
</div>
The col-xs-12 tell the column to be at full screen when using mobile phones (or small screens).
The col-sm-6 tell the column to be at half size of the row when using any higher size devices.
I suggest reading bootstrap docs
----Edit----
If you want to use columns css- also for ie8,9 you can check this js plug in:
http://welcome.totheinter.net/columnizer-jquery-plugin/
hi you can use this i think please take a look
.tt{
border : 2px solid grey;
}
<div class="container">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 tt">
first half
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 tt">
second half
</div>
</div>
</div>
and here is the working demo code..
Demo code
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.