I building a web application using the Bootstrap grid system as my layout. So far everything was working great but got into this issue where I have a div row that has a large image (width 1280px by height 150 px) and when you resize the page the image overlaps over divs.
To fix that I put a fixed height (height 150px) on my div and it stopped resizing and overlapping but I introduced a new problem. This nows throws off my layout and adds a vertical scrolling bar and I need my web app to fit the entire page only.
I was thinking of maybe adding a overflow: hidden to my CSS but seems a bit hacky to me. Just looking for advice and maybe a different approach to my layout. It seems that Bootstrap dosent play nice with fixed heights.
https://jsfiddle.net/DTcHh/9847/
<div class="container-fluid row-fluid" style="height: 100%;">
<div class="row grey" style="height: 10%;"> title of the website here </div>
<div class="row yellow" style="height: 150px; text-align: center;">
<img width="1280px" height="150px" src="https://41.media.tumblr.com/tumblr_m4n498M3NQ1r9f8g8o1_1280.png" />
</div>
<div class="row grey" style="height: 60%;"> main content area </div>
<div class="row grey" style="height: 10%;"> footer area </div>
</div>
The way you are using bootstrap is not correct. Your are not manipulating bootstrap grid system properly. Your have put your image in a row but not in a column. You know you should have minimum one column(e.g. col-md-12) in a row. Then Bootstrap will consider your image or content perfectly. Refactor your code and follow the way bootstrap told you to do. Besides, you can make your image responsive using bootstrap's img-responsive class. See here: http://getbootstrap.com/css/#images-responsive
I think what you are looking for is this. This basically applies max-width: 100%; height: auto; and display: block; to the image so that it scales nicely to the parent element.
<img src="..." class="img-responsive" alt="Responsive image">
You can read more at http://getbootstrap.com/css/#images-responsive
Sample here: https://jsfiddle.net/qxLtmhat/
First you know you should have minimum one column(e.g. col-md-12 in a row) - see the first answer from Imran and second you hard coded the width and height - remove them and add the img-responsive class on the img.
Related
I've been trying to make a group of images-list page using bootstrap but I can't make it responsive on other resolutions, The images moves left and the entire style of the arrangement will break.
<div class="fluid-container">
<div>
<img class="img-responsive" src="source-path">
</div>
<div>
<img class="img-responsive" src="source-path">
</div>
<div>
<img class="img-responsive" src="source-path">
</div>
<div>
<img class="img-responsive" src="source-path">
</div>
<div>
in this one ^ The images appears in 1-row and not sided to each other, And when I use style="float: left;" it works but not responsive as I wished, Is there a better way to make a better album{images-list} using bootstrap?
Your images are responsive.
In the sense that they do scale down depending on parent size.
Here is how .img-responsive is defined in Bootstrap 3:
display: block;
max-width: 100%;
height: auto;
Please note, as Sreemat well pointed out, you do not need to wrap the images in <div>s since they already have display:block.
The problem is most people, when they say responsive they also expect it to grow in size according to the parent's width, which .img-responsive does not do, as doing that has the potential of making small images look really bad.
But if that's your desired behavior, add this to your CSS:
.img-responsive {
min-width: 100%:
}
I'm trying to modify a bootstrap template to add a full length 1200 px banner at the top, instead of the smaller 120 x 60 images/logo-company.png logo that is there on the original site.
I have tried to no avail, but I would like to be able to seat this larger banner perfectly for desktop view, while having it be responsive on mobile devices.
I assume the original logo was so small that it didn't needto have code call outs to make it responsive.
Would anyone be kind enough to take a look and see if they can supply the necessary HTML and or CSS code to achieve this for me please.
original site.
http://jituchauhan.com/industrial/boxed-layout/industrial-darker/index.html
If background image isn't working for you here is a simple solution:
<div class="header-row" id="header-row" style="padding: 0px; overflow:hidden; height:100px;">
<!-- container-fluid is the same as container but spans a wider viewport,
it still has padding though so you need to remove this either by adding
another class with no padding or inline as I did below -->
<div class="container-fluid" style="padding: 0px;">
<div class="row">
<!-- You originally has it set up for two columns, remove the second
column as it is unneeded and set the first to always span all 12 columns
even when at its smallest (xs). Set the overflow to hidden so no matter
the height of your image it will never show outside this div-->
<div class="col-xs-12">
<a class="navbar-brand logo" href="index.html">
<!-- place your image here -->
<img src="http://placekitten.com/g/1200/600" alt="company logo" style="width: 100%;">
</a>
</div>
</div>
</div>
</div>
You can set background image for header and remove/hide the logo image.
#header-row {
background-image: url(../images/logo-company.png);
}
I'm building a website which will list some buildings for sale with a picture and a small description. Since I want the website to be responsive I'm trying to use the Bootstrap3 grid system.
So the current html I have is as follows (running code here on bootply):
<div class="container">
<div class="row">
<div class="col-sm-8">
<article class="row property-ad">
<div class="col-sm-4">
<img class="property-thumbnail" src="https://uwaterloo.ca/pharmacy/sites/ca.pharmacy/files/uploads/images/pharmacy-building-street-view.jpg">
</div>
<div class="col-sm-8">
<div class="property-ad-title">Nice building</div>
<div class="property-ad-description">and some describing text here</div>
</div>
</article>
</div>
<div class="col-sm-4">
<div class="right-side-ad">
some advertisement is going here
</div>
</div>
</div>
</div>
The problem is that the title and description are only displayed correctly on a large (lg) screen. On an md or sm screen however, the title and description are partly displayed on top of the image because the image appears larger than its container. I tried giving the image a max-width: inherit;, but that doesn't seem to do anything.
Next to the fact that I don't know how to give it a proper max-width, the main problem seems to be that I don't really know what behaviour I would want. Because if the image resizes its width, it would either get distorted, or it would also need to change its heigth. If the height changes however, the text next to it could get a larger height than the image, which would also make the layout look messy.
So my main questions;
What is the typical desired behaviour to make a website responsive when working with images that are next to text?
How would I implement that?
All tips are welcome!
Don't use your custome class for the img just add the bootstrap class for responsive images
img-responsive
<div class="col-sm-4">
<img class="img-responsive" src=".....jpg">
</div>
Check this Bootply
Simply stated: Bootstrap has the img-responsive class, or you could set max-width: 100% to the img tag.
I am working on a website and I am trying to make use of the grid/column system provided in bootstrap. What I want to do is have a picture on the left side with the text beside it to the right. This is the html that I have written so far:
<div class="container">
<div class="row">
<div class="col-xs-4 circle-pic">
<!-- circle -->
</div>
<div class="col-xs-8">
words and stuff go here
</div>
</div>
</div>
and this is the css that I've written so far:
.circle-pic {
height: 150px;
width: 150px;
border-radius: 100%;
border: 2px solid black;
}
My problem is that the first div is not taking up 4 columns as I expect it too which is causing it these elements to be uncentered. I think the problem occurring because I specified the width and height for the circle and that is overwriting something in col-xs-4. Is that the case? If so, how would I go about centering these elements? If not then, Why is the circle not taking up 4 columns worth of space?
EDIT: I am using bootstrap 3.2.0. I have tested on safari and chrome and I do not have any custom rules for col-xs-4.
No, the border radius will not affect the table style.
The width will. It will force the div to be 150px wide on every resolution which will make it not responsive anymore.
Bootstrap has a feature for showing round pictures. You can doing that like this:
<img src="..." alt="My image" class="img-circle">
I am building a template with bootstrap 2.3.2 and I want to have images that have certain dimensions according to the grid. (I'm not using the fluid grid, however I am using the responsive features).
I expect that the image which is contained e.g. in a span4 div would shrink accordingly even if it has a larger resolution, but instead it is shown at its real pixel size. Is there a way to shrink the image according to the div size? Or do I have to apply an explicit width in the css?
I know that in plain CSS I could achieve what I want in this way: How do I auto-resize an image to fit a div container but I was wondering if in Bootstrap there is a dedicated class for this.
Here's my code:
<div class="container">
<div class="row">
<div class="span12">
<div class="row">
<div class="span4">
<img class="img-polaroid" src="public/images/h1.jpg" alt="" />
</div>
<div class="span8">
<img class="img-polaroid" src="public/images/h2.jpg" />
</div>
</div>
</div>
</div>
</div>
If you are set using Bootstrap 2, then your best bet is just to do what the question you referenced says, and add a specific rule in your CSS, as the 2.x branch does not have anything specific for responsive images.
Another option to consider would be to move to Bootstrap 3, which does have a responsive image helper. It is as simple as adding .img-responsive to any image. See the 3.x docs for more details at: http://getbootstrap.com/css/#overview-responsive-images.