[Solved] How to put elements side by side like media player using bootstrap?

by


I suppose you are allowed to use bootstrap for your grid?

A possible solution could look like this:

<div class="row">
  <div class="col-md-3">
    <img src=""> <!-- place your image here -->
  </div>
  <div class="col-md-9">
    <!-- title -->
    <div class="row">
      <div class="col-md-12 text-center">
        Yahin hoo main...
      </div>
    </div>

    <!-- your buttons -->
    <div class="row">
      <div class="col-md-4 text-center">
        rewind
      </div>
      <div class="col-md-4 text-center">
        play
      </div>
      <div class="col-md-4 text-center">
        forward
      </div>
    </div>

    <!-- bar -->
    <div class="row">
      <div class="col-md-12 text-center">
        |----*------------------|
      </div>
    </div>
  </div>
</div>

You don’t have to use a table in your code, because you can also use the bootstrap grid to align your track-information.

I “guessed” the correct distribution of the 12 elements of the grid and assigned 3 parts to the image and 9 for the rest. You might have to adjust these parameters and test it in your code.

The bootstrap documentation provides many information and examples. You will find all answers to your problem in this documentation 😉

2

solved How to put elements side by side like media player using bootstrap?