1

I've been using Bootstrap for a few months and it's pretty easy, but this very simple task is confounding me. On a desktop, I have a row with a large image logo on the left and 2 buttons on the right. On mobile devices, the image logo should be in the center and the 2 buttons under the image logo also centered so it looks like a nice, tidy triangle.

I have tried many different scenarios like nesting rows within and also creating lots of columns, but all the scenarios make the mobile view distorted.

Here is the code that shows the best on mobile, though it is still askew with the image logo aligning a little to the left and the buttons not centered well.

<div class="container">
     <div class="row">
        <div class="col-xs-9 col-md-8">
            <a href="#"><img src="imagelogo.jpg"></a>
        </div>
        <div class="col-xs-9 col-md-4" align=center>
            <a href="#" class="btn btn-success btn-lg" role="button">Back</a>
                &nbsp;&nbsp;
            <a href="#" class="btn btn-default btn-lg" role="button">Forward</a>
        </div>
     </div>  
  </div>

Any thoughts on how to guarantee the mobile view looks correct with everything centered? Thank you

Sumit patel
  • 3,807
  • 9
  • 34
  • 61
THX1138
  • 13
  • 1
  • 4

1 Answers1

1

bootstrap offers center alignment class for images and buttons

<div class="container">
     <div class="row">
        <div class="col-xs-9 col-md-8">
            <a href="#"><img src="imagelogo.jpg" class="img-responsive center-block"></a>
        </div>
        <div class="col-xs-9 col-md-4" align=center>
            <a href="#" class="btn btn-success btn-lg center-block" role="button">Back</a>
                &nbsp;&nbsp;
            <a href="#" class="btn btn-default btn-lg center-block" role="button">Forward</a>
        </div>
     </div>  
  </div>

if the buttons dont work add this css instead

.btn{
    display:table;
    margin:0 auto;
}

EDIT

<div class="container">
     <div class="row">
        <div class="col-xs-9 col-md-8">
            <a href="#"><img src="imagelogo.jpg" class="img-responsive center-mobile"></a>
        </div>
        <div class="col-xs-9 col-md-4" align=center>
            <a href="#" class="btn btn-success btn-lg center-mobile" role="button">Back</a>
                &nbsp;&nbsp;
            <a href="#" class="btn btn-default btn-lg center-mobile" role="button">Forward</a>
        </div>
     </div>  
  </div>

Try this and add this css 

@media (max-width:767px){
    .center-mobile{
        display:table;
        margin:0 auto;
    }
}
jsg
  • 1,224
  • 7
  • 22
  • 44
  • Thanks for your help. That aligns the image and the button in the center for *both* the large and small screen. Instead, on large screen I need the image on the left align and the buttons on the right align, but on small screen they should be centered like a triangle. The code you gave me works great on small screens and looks great, but on large screens it still centers the logo instead of aligning it left. – THX1138 Aug 18 '16 at 02:19
  • The align=center - attribute is no more supported by HTML5. – Deepak Yadav Aug 18 '16 at 08:23
  • Thanks for the additional edit and code. I tried that too but it's not moving the logo to the center on small screens. The buttons are moving the center because I have align=center in the div but the CSS is not helping. I made sure to clear caches on server and browser and checked different browsers. Any other ideas on what might be happening? It seems like a simple thing but I'm stumped too :p – THX1138 Aug 19 '16 at 03:08
  • Change 'col-xs-9' to 'co-xs-12'. as this assume in mobile the width of the column is 75% width. Normally with a media query that i provided this usually works, if not add float:none onto the .center-mobile styles and try adding the closing tag to the image so it should be '/> – jsg Aug 19 '16 at 09:56
  • If this doesnt work try looking at this page http://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3 – jsg Aug 19 '16 at 09:59