How to center an image with fluid layout in Twitter Bootstrap 2.3.2?

Question

I am using bootstrap for my own site and I struggle in centering a single jpg image.

I use the following code

<header class="row-fluid">
<div class="span4 offset4">
<img src="img/yup.jpg" title="Hello" alt="World";>
</div>
<div class="title span12">
<h1>Hello Kitty</h1>
</div>          
</header>

but still the image is not centered... what is wrong here? Many thanks!!

score 1 · Answer 1 · answered Oct 04 '13 at 14:55

Or embed the image inside a div, then center that div. Here is how I've done it :

<form class="form-signin">
  <div id="auth-logo-container">
    <img src="http://www.fme.ma/wp-content/uploads/2012/02/logo.png">
  </div>
  <br>
  <br>
  <input type="text" class="input-block-level" placeholder="Votre login">
  <input type="password" class="input-block-level" placeholder="Votre mot de passe">
  <br>
  <br>
  <button class="btn btn-large btn-danger input-block-level" type="submit">Sign in</button>
</form>
<style type="text/css">
.form-signin {
  max-width: 300px;
  padding: 19px 29px 29px;
  margin: 50px auto 20px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
#auth-logo-container{
  max-width: 247px;
  margin: 0 auto;
}
</style>

Jay Shukla · Accepted Answer · 2013-07-25T12:53:21.263

0

try this

<header>
   <div class="row-fluid">
       <div class="span5 offset2">
          <center><img src="img/yup.jpg" title="Hello" alt="World"></center>
       </div>
   </div>
   <div class="row-fluid"> 
       <div class="title span12">
          <h1>Hello Kitty</h1>
       </div>        
  </div>  
</header>

UPDATE : based on comment

When you use row-fluid, it will create row which can be manageable by 12 parts named as span1,span2...span12. Where offset is applying as margin-left. You can apply it as per your requirement. it is also divided into 12 parts. Here, I have used tag because you want your image in center as by default it is left align.

edited Jul 25 '13 at 12:53

answered Jul 25 '13 at 12:23

Jay Shukla

5,794
8
33
63

f%%ing magnets! how do they work?? ;-) so i guess the image was too large to be contained in only 4 cells? many thanks shukla – ℕʘʘḆḽḘ Jul 25 '13 at 12:42
@Noobie - It is little confusing to understand how bootstrap works. Still I have tried my best to explain you. – Jay Shukla Jul 25 '13 at 12:58
hello shukla.. another point: how can I make the image responsive too? when I reduce my navigator, the image stays the same... thx – ℕʘʘḆḽḘ Jul 29 '13 at 20:26
Just give height and width in % in your css. If you haven't set any size to your image then just add height and width as 100% in your css. You can also do this stuff using media queries but it is not supported by IE so be careful before using this. – Jay Shukla Jul 30 '13 at 05:57

How to center an image with fluid layout in Twitter Bootstrap 2.3.2?

2 Answers2