CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Chris Bolton
Chris Bolton

Reputation: 2314

Recomended way to horizontally align elements in div with bootstrap

I want the elements to be side by side and not on top of one another.

When I say best way, I want the elements to not overlap when you change the size of the screen.

Here is my HTML:

<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
    <div class="col-md-offset-1 col-sm-12 col-md-10" style="background-color: #f6f6ff;">
        <img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150">
        <h1>2</h1>
        <img src="media/github.png" alt="GitHub" height="150" width="150">
    </div>
</div>

Here is a picture of what it looks like:

Upvotes: 1

Views: 9786

Answers (4)

APAD1
APAD1

Reputation: 13666

Right now you have an h1 separating the two images. Since heading tags are block level elements by default, it's not possible to line up the images side by side with the h1 separating them. However, if you put each image/heading in their own column, they will line up:

<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
    <div class="row">

        <div class="col-xs-6">
            <h1>1</h1>
            <img src="http://placehold.it/150x150" alt="Subversion" height="150" width="150">
        </div>

        <div class="col-xs-6">
            <h1>2</h1>
            <img src="http://placehold.it/150x150" alt="GitHub" height="150" width="150">
        </div>

        <div class="clearfix"></div>

  </div>
</div>

Bootply

Upvotes: 2

Jesse van Muijden
Jesse van Muijden

Reputation: 325

The bootstrap answer is the best. I had the same requirement before, only difference being that it was not acceptable to have the content in the different columns visually spread apart too much on large screens. In that case, you would use the original html and use css

.container-fluid div > * {
    margin: 0 auto;
    display: inline;
}

Upvotes: 0

Amit
Amit

Reputation: 6304

If you want two elements to be side by side, you can use "row" and "col" from the bootstrap grid.

For example, this is how to code 2 images:

<div class="row">
  <div class="col-lg-6">
    <img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150">
  </div>
  <div class="col-lg-6">
    <img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150">
  </div>
</div

Upvotes: 0

sjokkogutten
sjokkogutten

Reputation: 2095

Using the Grid system to scale up to 12 columns, as described here

<div class="row">
  <div class="col-md-4">
    <img src="media/subversion_logo-384x332.png" alt="Subversion" height="150"  width="150">
  </div>
  <div class="col-md-4">
    <h1>2</h1</div>
  <div class="col-md-4"> 
    <img src="media/github.png" alt="GitHub" height="150" width="150
</div>

You can change the size of the columns by increasing/decreasing col-md-4

Upvotes: 0

Related Questions