Project Move - Making 3 div's stand side by side

Yeah so how do you make 3 divs stand side by side?

heres the html:

<div class="supporting">
      <div class="container">
        <div class="col">
          <p>Become more active by tracking your runs, rides, and walks.</p>
           <div class="wrapper2"> <h2>Sync</h2>
          <p>access your activity on your phone, tablet or computer</p>
         <div class="wrapper3">
          <p>Set personal challenges and see have far you rank among your friends</p>

and here is the css i’ve tried:

.supporting {
.wrapper2 {
.wrapper3 {

How do i show you the Html?

You have a couple of options, you could use display: inline-block, you could also just float all three to the left, this will try to position all the elements as far up and to the left as possible, i think this is a good way to go. Even better would be a grid system in case overflow

for next time, use one of the two following options to make your code/indent is visible:

select your code and press ctrl + shift + c (or cmd + shift + c if you use a mac)

if this instructions are unclear, you can also insert 3 backticks before and after your code, like so:


the backtick is located above the tab key on your keyboard

@itsapregnantday You should wrap each <h2> and <p> in it’s own <div class="col-md-4">...</div>. This is how you’re meant to do it, by using Bootstrap’s grid system :slight_smile:

1 Like