Recomended way to horizontally align elements in div with bootstrap

Question

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:

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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;
}