CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
Zeliax
Zeliax

Reputation: 5386

Bootstrap responsive image will not stay in center

I'm trying to line up three pictures within a bootstrap grid. All of the images were centered, which is what I'm trying to, before I added a img-responsive class to one of the images. I do however want the images to be responsive while also making them a tiny bit larger than they are already. Tried numerous things such as "width: 200%;" however without success

How it looks

enter image description here

I created a "center-all" class within my css that should center all the three of them, and it did work, just until I added the img-responsive class to the red one. The class was not added to any of the other images.

.center-all {
  text-align: center;
  align-items: center;
  align-content: center
  vertical-align: center;
}

JSFiddle

https://jsfiddle.net/8a6ee7f5/

Images doesn't work in Fiddle ofc.

What I want to achieve:

I want the images to be 2 times larger than what they currently are and I want them to be responsive while still keeping them centered.

Thanks in advance!

Upvotes: 2

Views: 2187

Answers (2)

Steve K
Steve K

Reputation: 9055

So bootstrap already has an element centering class called .text-center you can just add this class to the row wrapping your items and everything in that row will be centered. Then instead of using .img-responsive you can add a width to the image instead or give the image a percentage width. It will maybe look something like the following hopefully this is what you are looking for:

Here is a fiddle Updated Fiddle

note: I have added a border-radius of 50% to your images because I assume you want them to be round. If you want to use 100px you can change it back.

Css:

#values img{
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 80%;
}
#val1 {
  background-color: #792c24;
}

#val2 {
  background-color: #4f5e6d;
}

#val3 {
  background-color: #665e25;
}

Html:

<div class="container" id="values">
  <h3 class="fancy">Values</h3>
  <div class="row text-center">
    <div class="col-sm-4">
      <h4>Independent</h4>
      <img id="val1" src="http://placehold.it/300x300">
    </div>
    <div class="col-sm-4">
      <h4>Team Player</h4>
      <img id="val2" src="http://placehold.it/300x300">
    </div>
    <div class="col-sm-4">
      <h4>Dedicate</h4>
      <img id="val3" src="http://placehold.it/300x300">
    </div>
  </div>
</div>

Upvotes: 1

Zeliax
Zeliax

Reputation: 5386

I found the answer to my question(s).

When adding the img-responsive class to the image it moves to the left. By adding "center-block" to the class to the image it should stay in the center.

<img src="..." class="img-responsive center-block">

Now I just need to find the answer on how to upscale my pictures to 200%.

EDIT: I found the following to upscale my images:

CSS

.wrapper {
  width: 40%;
}

and added that to my image class.

HTML

<img src="..." class="img-responsive center-block wrapper">

And that fixed it.

Upvotes: 5

Related Questions