What should I do to get my boxes horizontally aligned?

Question

I tried doing the style="display: inline-block" on each div but it doesn't work. Please help.

Here's my HTML:

 <div class="hobby" style="display: inline-block">
        <div class="album py-5 bg-light">
          <div class="container">
            <div class="row">
              <div class="col-md-4">
                <div class="card mb-4 shadow-sm">
                  <img class="card-img-top" src="coding.jpg" />
                  <div class="card-body">
                    <h3>Coding</h3>
                    <p class="card-text">This is my primary hobby. That's why I was able to create a lot of projects.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hobby" style="display: inline-block">
        <div class="album py-5 bg-light">
          <div class="container">
            <div class="row">
              <div class="col-md-4">
                <div class="card mb-4 shadow-sm">
                  <img class="card-img-top" src="guitar.jpg" />
                  <div class="card-body">
                    <h3>Guitar</h3>
                    <p class="card-text">I love music. And one way I appreciate it is by playing guitar.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hobby" style="display: inline-block">
        <div class="album py-5 bg-light">
          <div class="container">
            <div class="row">
              <div class="col-md-4">
                <div class="card mb-4 shadow-sm">
                  <img class="card-img-top" src="coding.jpg" />
                  <div class="card-body">
                    <h3>Mandarin</h3>
                    <p class="card-text">I learn Mandarin Chinese. I really like this language because of its intonation.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> <!-- hobby div -->

score 1 · Accepted Answer · answered Jun 08 '20 at 08:18

1

just wrap your code into parent div like this .

    <div style="display:flex">
      // your current code

   </div>

answered Jun 08 '20 at 08:18

Arpit Vyas

2,118
1
7
18

@Zeddrix Fabian can you please upvote this ans if this was fruitfull . Thank you !! – Arpit Vyas Jun 17 '20 at 06:34

score 1 · Answer 2 · answered Jun 08 '20 at 08:20

Your current use of style="display: inline-block" seems to work for me. Perhaps you should check the margins and padding on your elements to make sure there is enough room to fit them side-by-side.

<div class="hobby" style="display: inline-block">
    <div class="album py-5 bg-light">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <div style="width:100px;height:100px;background-color:gray"></div>
              <div class="card-body">
                <h3>Coding</h3>
                <p class="card-text">This is my primary hobby..</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hobby" style="display: inline-block">
    <div class="album py-5 bg-light">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <div style="width:100px;height:100px;background-color:gray"></div>
              <div class="card-body">
                <h3>Guitar</h3>
                <p class="card-text">I love music.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hobby" style="display: inline-block">
    <div class="album py-5 bg-light">

score 1 · Answer 3 · answered Jun 08 '20 at 08:42

Give the style in a parent div.

<div class="parent-div>
    <div class="child-div>

    </div>
    <div class="child-div>

    </div>
    <div class="child-div>

    </div>
</div>

Try either:

.parent-div {
    display: inline-block;
}
.child-div {
    width: 33%;
    height: 200 px;
}

Or:

.parent-div {
    display: flex;
    flex-wrap: wrap;
}

What should I do to get my boxes horizontally aligned?

3 Answers3