CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Bill Noble
Bill Noble

Reputation: 6734

Trying to centre a fixed width rule and left aligned text in a Bootstrap column

I am trying to centre an item in a Boostrap column that consists of a fixed width image (that is narrower than the column width) and some text under the image that is left aligned with the left edge of the rule (and NOT left aligned with the left edge of the Bootstrap column).

My code looks like this:

.imgWidth {
  max-width:150px;
}
        <div class="row text-center">
            <div class="col-xs-12 col-sm-12 col-md-2 text-center">    
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2">
                 <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div>  
                  <div class="text-left">text under image</div>  
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2">
                 <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div>  
                  <div class="text-left">text under image</div>  
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2">
                 <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div>  
                  <div class="text-left">text under image</div>  
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2">
                 <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div>  
                  <div class="text-left">text under image</div>  
            </div>
            <div class="col-xs-12 col-sm-12 col-md-2 text-center">         
            </div>
        </div>

This code centres the image in the column but the text, rather than being left aligned under the image, is left aligned with the column.

Is there are way to get the text left aligned with the image above? I have tried every possible combination of code that I can think of but with no success.

Upvotes: 0

Views: 693

Answers (1)

lee_gladding
lee_gladding

Reputation: 1100

Have you tried to add a class to the text divs in the columns and adding the max-width to them also as well as adding margin auto to the text div's too?

CSS:

.imgWidth, .someClass {
    max-width:150px;
    margin: auto;
}

HTML:

    <div class="row text-center">
        <div class="col-xs-12 col-md-2 text-center">    
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div>  
              <div class="text-left someClass">text under image</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div> 
              <div class="text-left someClass">text under image</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div> 
              <div class="text-left someClass">text under image</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div> 
              <div class="text-left someClass">text under image</div>  
        </div>
        <div class="col-xs-12 col-md-2 text-center">         
        </div>
    </div>

Upvotes: 3

Related Questions