I'm trying to center a styled responsive image, but it doesn't seem to work. After removing classes one-by-one, I'm finding that my class "portimage" seems to be breaking the responsiveness.
I don't want the images to be larger than 700px and I'd like them to have a light border around them.
Here's the code:
<div class="row mtmini">
<div class="col-lg-12">
<img class="img-responsive center-block portimage" src="assets/img/CostcoSketch1-Home.jpg">
<br>
<img class="img-responsive center-block portimage" src="assets/img/CostcoSketch2-Menu.jpg">
<br>
<img class="img-responsive center-block portimage" src="assets/img/CostcoSketch3-CC.jpg">
</div>
</div>
Here's the CSS for the class "portimage":
.portimage {
max-width: 700px;
border:1px solid lightgray;
}
Sorry if this is a dumb question--just starting out. I tried searching for this but I'm not finding a solution that addresses styling the image beyond centering and responsiveness. Thanks in advance!
It should be working fine, please double check if you have your CSS link to bootstrap properly inserted. Also, if you're using build tools like gulp/grunt try restarting the watch task.
Also, is 'mtmini' class adding any styles to the 'row' div?
Related
I have tried using ml-auto class, float: left, the float-left class, and fixed-left class, but none of those have worked in fixing my image to the left. I don't want to use margin since that's not responsive on different sizes(some white-space is present there most of the time). I have looked at other people who had the same question, but the answers to those were just the owner having a typing mistake, and after looking through mine, I haven't found any.
Please leave an explanation or a link so I can learn which of these methods to use to push my image to the right and which is more suitable for different situations. Here's my JSfiddle, this includes all of my HTML and CSS.
https://jsfiddle.net/1kdtjmh8/
Here is the code for the image I'm having issues with
<div class="container">
<div class="row">
<div class="col-lg img-col">
<img class="img-fluid home-image ml-auto" src="HomeImage.jpg" alt="">
</div>
Here is the CSS
.home-image{
height: 100vh!important;
width: auto!important;
display: block;
float:left;
}
You are using container which has a max width of 1140px which is creating the space. you can replace that with container-fluid and this should solve the issue
Please go through below codepen.io URL you will find the working solutions for your query.
It can resolved with two resolutions:-
By making the container class to container-fluid and keep all the css and html as it is.
Visit this Link:- https://codepen.io/nimesh049/pen/NWjaxaY
.userImage{
height: 150px!important;
width: auto!important;
float:right;
}
<div class="container">
<div class="row">
<h1>Image Holder</h1>
<div class="col-lg img-col">
<img class="d-block userImage " src="https://www.pngfind.com/pngs/m/610-6104451_image-placeholder-png-user-profile-placeholder-image-png.png" alt="" />
</div>
i'm create a page for web survey using boostrap, because i want my design still same in laptop/computer when access in Tablet or handphone.
But i have found problem, when resize browser
This my web when size browser >= 995px
[![enter image description here][1]][1]
But when resize <= 990px
[![enter image description here][2]][2]
I don't know solution how to fix this problem
This is my code
<div class="container-fluid" >
<div class="row">
<div class="col-md-4 col-sm-4 lk-back">
</div>
</div>
In codepen
Help me thank's
Try img-responsive class in the img tag
<img class="img-responsive" src="path/to/image" />
a is not a block element by default.
a {
display: block;
}
But you should not apply bootstrap classes to your normal elements. Use the bootstrap classes just for the layout to avoid problems like this.
I'm trying to model the following design with Bootstrap.
Currently I've found a method to do this using "carousel-caption" class from bootstrap CSS but it doesn't seem to working as expected.
The html looks like this:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1000x550" alt="test" class="img-responsive">
<div class="carousel-caption">
<h1>Text word1 word2 superlative.</h1>
</div>
</div>
</div>
</div>
You can see an example of on https://jsfiddle.net/3vf5gog4/2/
This produces a single title but the image doesn't stretch and the title is not vertically centered and I can't figure out how I should be adding another title beneath the current carousel title
This is one of those things with bootstrap that can trip you up. So the .container-fluid class has a padding around it and so to the other grid elements so thats causing the issues with the stretch. Vertically centred elements in CSS can be a pain there is one good method I've seen on it but I typically just eye ball the percent and add some precent
I've edited your fiddle to take out the bootstrap padding and centre that text.
https://jsfiddle.net/3vf5gog4/5/
Try this :
.carousel-caption{
postion:absolute;
top : 20%;
}
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.
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">