Exercício Bootstrap

<!doctype html>
<html lang="pt-br">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Olá, mundo!</title>
  </head>
  <body>
    <div class="container">
        <!-- Example row of columns -->
        <div class="row">
          <div class="col-md-4 border rounded">
          <h3>coluna 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida eget sem et blandit. Etiam in enim sapien. Duis ante dolor, ullamcorper eget elementum vitae, eleifend id nibh. Morbi tincidunt volutpat neque eu egestas. Fusce iaculis nunc in posuere ultrices. Maecenas tempor, orci eu varius ornare, arcu odio rhoncus sapien, sit amet bibendum neque justo quis risus. Quisque semper enim vel arcu eleifend consectetur.

Donec vitae bibendum lorem. Sed purus orci, tincidunt non blandit eu, fermentum non massa. Curabitur sodales, turpis in euismod varius, risus purus vestibulum felis, vel condimentum metus orci eu ante. Ut eleifend congue condimentum. Aenean placerat efficitur ante in auctor. Ut rutrum dui a felis tempus bibendum. In hac habitasse platea dictumst. Morbi et est convallis elit consequat vestibulum sit amet non tellus. Duis ac ligula lacinia, egestas tellus tempor, rhoncus justo.</p>
          </div>

          <div class="col-md-4 border border-success rounded">
          coluna 2
          </div>

          <div class="col-md-4 border border-info rounded">
          coluna 3
          </div>

        </div>

        <div class="row">
          <div class="col-md-8">
          <h3>coluna 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida eget sem et blandit. Etiam in enim sapien. Duis ante dolor, ullamcorper eget elementum vitae, eleifend id nibh. Morbi tincidunt volutpat neque eu egestas. Fusce iaculis nunc in posuere ultrices. Maecenas tempor, orci eu varius ornare, arcu odio rhoncus sapien, sit amet bibendum neque justo quis risus. Quisque semper enim vel arcu eleifend consectetur.

Donec vitae bibendum lorem. Sed purus orci, tincidunt non blandit eu, fermentum non massa. Curabitur sodales, turpis in euismod varius, risus purus vestibulum felis, vel condimentum metus orci eu ante. Ut eleifend congue condimentum. Aenean placerat efficitur ante in auctor. Ut rutrum dui a felis tempus bibendum. In hac habitasse platea dictumst. Morbi et est convallis elit consequat vestibulum sit amet non tellus. Duis ac ligula lacinia, egestas tellus tempor, rhoncus justo.</p>
          </div>

          <div class="col-md-4">
          coluna 2
          </div>



        </div>

        <div class="row">
          <div class="col-md-6">
          <h3>coluna 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida eget sem et blandit. Etiam in enim sapien. Duis ante dolor, ullamcorper eget elementum vitae, eleifend id nibh. Morbi tincidunt volutpat neque eu egestas. Fusce iaculis nunc in posuere ultrices. Maecenas tempor, orci eu varius ornare, arcu odio rhoncus sapien, sit amet bibendum neque justo quis risus. Quisque semper enim vel arcu eleifend consectetur.

Donec vitae bibendum lorem. Sed purus orci, tincidunt non blandit eu, fermentum non massa. Curabitur sodales, turpis in euismod varius, risus purus vestibulum felis, vel condimentum metus orci eu ante. Ut eleifend congue condimentum. Aenean placerat efficitur ante in auctor. Ut rutrum dui a felis tempus bibendum. In hac habitasse platea dictumst. Morbi et est convallis elit consequat vestibulum sit amet non tellus. Duis ac ligula lacinia, egestas tellus tempor, rhoncus justo.</p>
          </div>

          <div class="col-md-6">
          coluna 2
          </div>



        </div>

        <div class="row">
          <div class="col-md-3">
          <h3>coluna 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida eget sem et blandit. Etiam in enim sapien. Duis ante dolor, ullamcorper eget elementum vitae, eleifend id nibh. Morbi tincidunt volutpat neque eu egestas. Fusce iaculis nunc in posuere ultrices. Maecenas tempor, orci eu varius ornare, arcu odio rhoncus sapien, sit amet bibendum neque justo quis risus. Quisque semper enim vel arcu eleifend consectetur.

Donec vitae bibendum lorem. Sed purus orci, tincidunt non blandit eu, fermentum non massa. Curabitur sodales, turpis in euismod varius, risus purus vestibulum felis, vel condimentum metus orci eu ante. Ut eleifend congue condimentum. Aenean placerat efficitur ante in auctor. Ut rutrum dui a felis tempus bibendum. In hac habitasse platea dictumst. Morbi et est convallis elit consequat vestibulum sit amet non tellus. Duis ac ligula lacinia, egestas tellus tempor, rhoncus justo.</p>
          </div>

          <div class="col-md-3">
          coluna 2
          </div>

          <div class="col-md-3">
          coluna 3
          </div>

          <div class="col-md-3">
          coluna 4
          </div>

        </div>


    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>