CODEWITHSUNDEEP
csstwitter-bootstrapcenter
lowercase
lowercase

Reputation: 1220

Center Bootstrap column with multiple DIV tags

I want to show an image, and next to it (on the same line) some text. This is easy enough, but I also want this content (image and text), to be centered in a bootstrap grid so it retains its properties on all devices and continues to scale/collapse.

enter image description here

<div class="row-fluid">
    <div class="container">
        <img src="img.jpg" class="img-responsive">
        <h1>CONTENT</h1>
    </div>
</div>

I have tried using offsets, but can't get it to work. Should I wrap the image and content in spans? Any help appreciated.

Upvotes: 1

Views: 1485

Answers (2)

aleksandar
aleksandar

Reputation: 2399

You should add a wrapper div for the image and the text, and then align it to the center.

HTML:

<div class="row-fluid">
    <div class="container">
      <div class="centered">
        <img src="img.jpg" class="img-responsive">
        <h1>CONTENT</h1>
      </div>
    </div>
</div>

CSS:

.centered {
    text-align: center;
}

Upvotes: 2

jonathanmcdaniel
jonathanmcdaniel

Reputation: 338

I think that your mistake is using row-fluid instead of containter-fluid. The latter will center the row within.

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12"
        <img src="img.jpg" class="img-responsive">
        <h1>CONTENT</h1>
    </div>
</div>

You could also make your own custom class and apply margin: 0 auto; to the element.

Upvotes: 1

Related Questions