1

I'm trying to get two columns next to each other but what ever I try they stay on top of each other.

The code I have is this:

<div class="container">
<div class="row">
    <div class="col-sm-12">
        <div class="row">
            <div class="recept-data">
                <div class="col-sm-6 ingredients">
                    <div class="fields-heading">
                        <i class="fa fa-shopping-basket">
                        </i>
                        <strong>Ingrediënten:</strong>
                    </div>                  
                    <div class="datalist">
                    {@onderdelen}
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="fields-heading">
                        <i class="fa fa-clock-o"></i>
                        <strong>Voorbereidingstijd:</strong>
                    </div>
                    <div class="datalist">
                        {@voorbereidingstijd}
                    </div>

                    <div class="fields-heading">
                        <i class="fa fa-clock-o"></i>
                        <strong>Bereidingstijd:</strong>
                    </div>
                    <div class="datalist">
                        {@bereidingstijd}
                    </div>  
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<hr>

<div class="fields-heading">
<i class="fa fa-file-o"></i>
<strong>Bereidingswijze:</strong>
</div>

As far as I can tell bootstrap is loaded. I do see it in my page source code.

Hier a screenshot of what I try to achieve: enter image description here

And this is what I get so far:

enter image description here

Any ideas?

A3O
  • 513
  • 12
  • 29
  • Thanks, the answer on the other thread helped. As it turned out the code was implemented with Bootstrap 3 but is now 4 in the site. That fooled me. – A3O Sep 19 '18 at 06:58

0 Answers0