CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Fahardine Ben Fahardine
Fahardine Ben Fahardine

Reputation: 115

How to center image depending of screen size using bootstrap

How to center profile image depending of screen size using bootstrap?

Here what I have done so far:

html:

<div class="col-md-12">
  <div class="col-md-2 col-xs-12">
    <div class="deck">
      <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="list image" width="160">    
    </div>
    <div class="title-users-list-profile"> 
        <img class="comments-author" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS_9j6SU0VDO8PQtsal3pvO2Xrp4eu2IbOYQVjLUDtRNQmn6PIBqDw3B4o" alt="image picture"/>
    </div>

  </div>

</div>

CSS:

.deck{
  display: flex;
}
.comments-author {
  border-radius: 50%;
  border: 6px solid #fff;
  margin: 5px;
  box-shadow: 0 0 0 5px rgba(0,0,0,.2);
}   
.title-users-list-profile img{
  position: relative;
  width: 50px;
  height: 50px;
  top: -35px;
  left:50px;
  margin-top: 8px;
  margin-bottom: -25px;
}

https://jsfiddle.net/tzc2gdcf/

Upvotes: 1

Views: 1038

Answers (2)

HZN
HZN

Reputation: 28

You can use flex box to align image. Check this guide : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and using @media to specific rules to single media size

Upvotes: 1

cpru
cpru

Reputation: 78

If you are only wanting to have the image center based the current dimension you could look at adding a media query. Will change css rules based on pixel width/etc. https://getbootstrap.com/docs/3.3/css/

Upvotes: 0

Related Questions