Bootstrap Tabs

Bootstrap Tabs

HTML

<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="container">
	<ul class="nav nav-pills nav-fill navtop">
        <li class="nav-item">
            <a class="nav-link active" href="#menu1" data-toggle="tab">Ваш заказ</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#menu2" data-toggle="tab">Контактные данные</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" role="tabpanel" id="menu1">Шаг первый</div>
        <div class="tab-pane" role="tabpanel" id="menu2">Шаг второй
        <form name="checkout" method="post" class="checkout woocommerce-checkout form-horizontal" action="http://dmitirev.crazytest.studio/key/cart/" enctype="multipart/form-data" novalidate="novalidate">
          <input type="text" class="input-text " name="billing_phone" id="billing_phone" placeholder="Номер телефона *" value="" autocomplete="tel">
          <input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="Ваше имя" value="" autocomplete="given-name">
          <button type="submit" class="btn btn-primary" name="woocommerce_checkout_place_order" id="place_order" value="Подтвердить заказ" data-value="Подтвердить заказ">Подтвердить заказ</button>
        </form>
        </div>
    </div>
</div>

CSS

.navtop{
    margin-top:50px;
}
.tab-content {
    padding: 40px;
    margin-top: -20px; 
}