<img class="img-responsive center-block"/>
<div class="col-sm-2 mb-xs-30 wow fadeInUp">
<div class="team-item">
<div class="team-item-image">
<img src="images/team/jy.png" alt="" />
I am trying to make all the images be located at center. However, I do not know which bootstrap code I should use.
I tried to use img-responsive at the top of the section, but failed.
The given code is part of the images which is the first box I gave.
From my understanding, you're trying to make a centered row, five equally spaced and centered columns of images and you are using bootstrap, here is a link to the solution.
Related
I have 3 images which I need to display this way:
I tried to make it using simplest way:
<div class="row">
<div class="col-xs-9">
<img src="/image/1.jpg">
</div>
<div class="col-xs-3">
<img src="/image/2.jpg"><br /><br />
<img src="/image/2.jpg">
</div>
</div>
But there is a problem with sizing: images are uploaded by user so all of them can have different sizes and proportions (so image can be a square instead of rectangle). Also I need to limit max-height of the row because images can have up to 1024px height.
Can you help me, please? Thanks in advance.
I have large image similar to this. I need to put there images in bootstrap and align these to get layout similar to this. such that there tiles are arranged in a grid of 3 * 3. I was able to get these alignment with defult bootstrap classes like pull-right setting min width. but it does not show properly scale up in retina display and high resolution monitor how do I proceed using bootstrap 3. thanks in advance
Remove pull-right, min-width and put the image inside a bootstrap div with img-responsive class.
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="" alt="" class="img-responsive">
</div>
<div class="col-sm-8">
//your text
</div>
</div>
</div>
I just started using Bootstrap and it's awesome so far. However I have one question, I created a content container and put a picture in it and I'm only going to have one in the row and I want it to go in the center of the page. I have tried a lot of things but to no avail, they don't work. Any help is appreciated! I'm also using Bootstrap version 3.3.6
This is my code for the container
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="thumbnail">
<img src="random.jpg" alt="...">
<div class="caption">
<h3><center>I want the whole container in the center of the page.</center></h3>
</div>
</div>
</div>
</div>
</div>
Bootstrap has built in classes for you to use instead of the default tag. Try this for your image:
<img class="center-block" src="yourimage.png" />
I am learning how to become Front End Developer at Udacity. There is a project that I need to submit. I ran in couple of issues I couldn't find help with, some of my images and urls within divs don't want to align properly. I tried using this website as a solution https://codemyviews.com/blog/how-to-center-anything-with-css
because it offered most variations on aligning blocks... But none of them worked.
<div class="row">
<div class="col-4"><img src="http://www.panext.com/wordpress/wp-content/uploads/2012/09/question-63916_640-400x200.jpg"></div>
<div class="col-4"><img src="http://www.eu-projekti.info/eu/wp-content/uploads/2014/10/1159613_85120857-400x200.jpg"></div>
<div class="col-4 end"><img src="http://www.digitalzenway.com/wp-content/uploads/plan-to-eat-400x200.gif"></div>
</div>
These are images, I am trying to align first image to the left, 2nd to the center and 3rd to the right. I could align them by using margins and paddings in html, but I want it to work with responsive design.
<div class="row">
<div class="col-4">
https://github.com/udacity/Appify/
</div>
<div class="col-4">
https://github.com/udacity/Sunflower/
</div>
<div class="col-4">
https://github.com/udacity/Bokeh/
</div>
</div>
and these are urls right underneath the pictures, that aren't lining up, no matter what I try.
This is the screenshot of my webpage http://picpaste.com/Portfolio-NOGcuGm8.jpg
P.S. This is my first post at Stack Overflow, TIA!
You can use Bootstrap's text-center and text-right classes to modify inner alignment of columns.
<div class="row">
<div class="col-4"><img src="http://www.panext.com/wordpress/wp-content/uploads/2012/09/question-63916_640-400x200.jpg"></div>
<div class="col-4 text-center"><img src="http://www.eu-projekti.info/eu/wp-content/uploads/2014/10/1159613_85120857-400x200.jpg"></div>
<div class="col-4 text-right end"><img src="http://www.digitalzenway.com/wp-content/uploads/plan-to-eat-400x200.gif"></div>
</div>
If you aren't using Bootstrap, these classes simply apply text-align: center and text-align: right respectively.
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.