Bootstrap строк внутри столбцов

Question

Я хочу сделать макет как этот 1

Когда я использую этот код, он работает отлично, но я получаю эти ошибки в валидаторе 2

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="menu" id="menu">
          <div class="container-fluid">
            <div class="media">
              <div class="media-body">
                <div class="col-md-8 menu-position">
                  <h2>Drinks menu</h2>
  
                  <div class="row">
                    <div class="col-md-5">
                      <h3 class="menu-h3">Cocktails</h3>
                      <col>
                        <row>
                          <col>
                            <h3 style="display: inline;">Cuba libre</h3>
                            <h3 class="price">4 €</h3>
                            <p>White rum, Coke, Limes</p>
                          </col>
                        </row>
                        <row>
                          <col>
                            <h3 style="display: inline;">Moscow mule</h3>
                            <h3 class="price">4 €</h3>
                            <p>Vodka, ginger, lime</p>
                          </col>
                        </row>
                        <row>
                          <col>
                            <h3 style="display: inline;">Cuba libre</h3>
                            <h3 class="price">4 €</h3>
                            <p>White rum, Coke, Limes</p>
                          </col>
                        </row>
                    </div>
      
                    <div class="col-1"></div>
      
                    <div class="col-md-5">
                      <h3 class="menu-h3">Beer</h3>
                      <col>
                        <row>
                          <col>
                            <h3 style="display: inline;">Bernard 4.2%</h3>
                            <h3 class="price">4 €</h3>
                            <p>Unfiltered light lager</p>
                          </col>
                        </row>
                        <row>
                          <col>
                            <h3 style="display: inline;">Bernard 4.6%</h3>
                            <h3 class="price">4 €</h3>
                            <p>Unfiltered lager</p>
                          </col>
                        </row>
                        <row>
                          <col>
                            <h3 style="display: inline;">Bernard 5%</h3>
                            <h3 class="price">4 €</h3>
                            <p>Unfiltered lager</p>
                          </col>
                        </row>
                    </div>
                  </div>
      
      
                  <div class="row">
                    <div class="col-md-5">
                      <h3 class="menu-h3">White wine</h3>
                      <col>
                        <row>
                          <col>
                            <h3 style="display: inline;">Chardonnay</h3>
                            <h3 class="price">4 €</h3>
                            <p>White wine</p>
                          </col>
                        </row>
                        <row>
                          <col>
                            <h3 style="display: inline;">Riesling</h3>
                            <h3 class="price">4 €</h3>
                            <p>White wine</p>
                          </col>
                        </row>
                    </div>
      
                    <div class="col-1"></div>
                    
                    <div class="col-md-5">
                      <h3 class="menu-h3">Red wine</h3>
                      <col>
                        <row>
                          <col>
                            <h3 style="display: inline;">Primitivo di manduria</h3>
                            <h3 class="price">4 €</h3>
                            <p>Red wine</p>
                          </col>
                        </row>
                        <row>
                          <col>
                            <h3 style="display: inline;">Merlot</h3>
                            <h3 class="price">4 €</h3>
                            <p>Red wine</p>
                          </col>
                        </row>
                    </div>
                  </div>
                </div>
              </div>
              <img src="C:/Users/Dan/Documents/GitHub/bar/assets/img/menu-image.jfif" class="menu-image" alt="menu image">
            </div>
          </div>
        </div>

Когда я использую <div class="col"> and <div class="row"> из Bootsrap вместо <col> and <row> макет не отображается должным образом и нет ошибок в валидаторе

Так что кто-то может мне помочь пожалуйста, как сделать макет с первого изображения без ошибок проверки?

Answer 1

Estoy utilizando Flexbox y Bootstrap

Aquí te dejo una guía de flexbox, полное использование: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<style>
        .items{
           display: flex;
           justify-content: space-between;
         }
      </style>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 menu-position">
                <div class="row">
                    <div class="col-2"></div>
                    <div class="col-8">
                        <h2>Drinks menu</h2>
                        <br>
                        <div class="row">
                            <div class="col-5">
                                <h4 class="menu-h3">Cocktails</h4>
                                <div class="items">
                                    <div class="bebida">
                                        <h5>Cuba libre</h5>
                                        <h6>White rum, Coke, Limes</h6>
                                    </div>
                                    <div class="price">
                                        4 €
                                    </div>
                                </div>
                                <div class="items">
                                    <div class="bebida">
                                        <h5>Cuba libre</h5>
                                        <h6>White rum, Coke, Limes</h6>
                                    </div>
                                    <div class="price">
                                        4 €
                                    </div>
                                </div>
                                <div class="items">
                                    <div class="bebida">
                                        <h5>Cuba libre</h5>
                                        <h6>White rum, Coke, Limes</h6>
                                    </div>
                                    <div class="price">
                                        4 €
                                    </div>
                                </div>
                            </div>
                            <div class="col-2"></div>
                            <div class="col-5">
                                <h4 class="menu-h3">Beer</h4>
                                <div class="items">
                                    <div class="bebida">
                                        <h5>Cuba libre</h5>
                                        <h6>White rum, Coke, Limes</h6>
                                    </div>
                                    <div class="price">
                                        4 €
                                    </div>
                                </div>
                                <div class="items">
                                    <div class="bebida">
                                        <h5>Cuba libre</h5>
                                        <h6>White rum, Coke, Limes</h6>
                                    </div>
                                    <div class="price">
                                        4 €
                                    </div>
                                </div>
                                <div class="items">
                                    <div class="bebida">
                                        <h5>Cuba libre</h5>
                                        <h6>White rum, Coke, Limes</h6>
                                    </div>
                                    <div class="price">
                                        4 €
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-5">
                                <h4 class="menu-h3">Cocktails</h4>
                                <div class="items">
                                    <div class="bebida">
                                        <h5>Cuba libre</h5>
                                        <h6>White rum, Coke, Limes</h6>
                                    </div>
                                    <div class="price">
                                        4 €
                                    </div>
                                </div>
                                <div class="items">
                                    <div class="bebida">
                                        <h5>Cuba libre</h5>
                                        <h6>White rum, Coke, Limes</h6>
                                    </div>
                                    <div class="price">
                                        4 €
                                    </div>
                                </div>
                                <div class="items">
                                    <div class="bebida">
                                        <h5>Cuba libre</h5>
                                        <h6>White rum, Coke, Limes</h6>
                                    </div>
                                    <div class="price">
                                        4 €
                                    </div>
                                </div>
                            </div>
                            <div class="col-2"></div>
                            <div class="col-5">
                                <h4 class="menu-h3">Beer</h4>
                                <div class="items">
                                    <div class="bebida">
                                        <h5>Cuba libre</h5>
                                        <h6>White rum, Coke, Limes</h6>
                                    </div>
                                    <div class="price">
                                        4 €
                                    </div>
                                </div>
                                <div class="items">
                                    <div class="bebida">
                                        <h5>Cuba libre</h5>
                                        <h6>White rum, Coke, Limes</h6>
                                    </div>
                                    <div class="price">
                                        4 €
                                    </div>
                                </div>
                                <div class="items">
                                    <div class="bebida">
                                        <h5>Cuba libre</h5>
                                        <h6>White rum, Coke, Limes</h6>
                                    </div>
                                    <div class="price">
                                        4 €
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-2"></div>
                </div>
            </div>
            <div class="col-md-4">
                <img src="image.jpg" class="menu-image" alt="menu image">
            </div> 
        </div>
    </div>
    </div>
</body>