CODEWITHSUNDEEP
htmlcsstwitter-bootstrapgrid
znaczki654
znaczki654

Reputation: 47

Bootstrap 4.2.1, text appears outside the div

the text inside div is going outside, I don't know how to fix it. I've tried the way of putting columns in the order like shown in my code from here:

How can I get a Bootstrap column to span multiple rows?

An Image used as a template

How the page looks like

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About us</title>
    <!-- versioning can often help (href="css/style.css?ver=2.0") -->
    <!-- BOOTSTRAP 4 -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <style>
    body {
        background-color: #696969;
        margin-top: 100px;
    }
    .well {
        background-color: #deedee;
        margin: 3px;
    }
    </style>
 </head>
 <body>


<div class="container-fluid text-center">
   <div class="row">
        <div class="col-md-7">
            <div class="row">
               <div class="col-md-12">
                   <div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, molestiae saepe! Facilis quidem dolorem temporibus mollitia doloremque, possimus voluptas error aperiam iusto repellendus numquam, laudantium nemo a, debitis nam eveniet repellat rem voluptates culpa iure nisi quae asperiores nulla molestiae consequatur. Facilis quos soluta necessitatibus, excepturi libero. Veritatis impedit expedita architecto assumenda quo cum earum reprehenderit ad reiciendis, explicabo consequatur, iste facilis vel esse nesciunt nihil animi minima eum accusantium eveniet nam. Dolor quas voluptates, officiis numquam corporis quos. Doloribus nisi maiores placeat quas minima, autem numquam natus totam quidem nostrum, quos vel illo magnam blanditiis quam eligendi sed voluptates.</div>
               </div>
           </div>
           <div class="row">
               <div class="col-md-12">
                   <div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, molestiae saepe! Facilis quidem dolorem temporibus mollitia doloremque, possimus voluptas error aperiam iusto repellendus numquam, laudantium nemo a, debitis nam eveniet repellat rem voluptates culpa iure nisi quae asperiores nulla molestiae consequatur. Facilis quos soluta necessitatibus, excepturi libero. Veritatis impedit expedita architecto assumenda quo cum earum reprehenderit ad reiciendis, explicabo consequatur, iste facilis vel esse nesciunt nihil animi minima eum accusantium eveniet nam. Dolor quas voluptates, officiis numquam corporis quos. Doloribus nisi maiores placeat quas minima, autem numquam natus totam quidem nostrum, quos vel illo magnam blanditiis quam eligendi sed voluptates.</div>
               </div>
            </div>
           <div class="row">
               <div class="col-md-12">
                   <div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, molestiae saepe! Facilis quidem dolorem temporibus mollitia doloremque, possimus voluptas error aperiam iusto repellendus numquam, laudantium nemo a, debitis nam eveniet repellat rem voluptates culpa iure nisi quae asperiores nulla molestiae consequatur. Facilis quos soluta necessitatibus, excepturi libero. Veritatis impedit expedita architecto assumenda quo cum earum reprehenderit ad reiciendis, explicabo consequatur, iste facilis vel esse nesciunt nihil animi minima eum accusantium eveniet nam. Dolor quas voluptates, officiis numquam corporis quos. Doloribus nisi maiores placeat quas minima, autem numquam natus totam quidem nostrum, quos vel illo magnam blanditiis quam eligendi sed voluptates.</div>
               </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="well m-0">
               <div class="row">
                   <div class="col-md-7">
                       Jan Kustra
                       <br>
                       <br>
                       <br>
                       <br>
                       <br>
                       <br>
                   </div>
                   <div class="col-md-5">
                       <img src="img/300.png" alt="my face" width="50%" class="float-right">
                   </div>
               </div>
               <div class="row">
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni similique, suscipit laudantium, error explicabo repellat aperiam, ullam ab non exercitationem vitae, totam quidem eaque labore. Totam neque eaque architecto facilis, unde laudantium quas. Id vel, unde error, fugiat vero ipsa dicta doloribus mollitia ea et eaque incidunt esse. Aliquid ipsa perspiciatis reiciendis, eligendi dolorum architecto, voluptatum, consectetur similique ex quo ad nam, itaque officiis id porro ducimus doloremque reprehenderit. Inventore vel rem voluptatem ullam ab itaque harum rerum, ut hic modi facilis minus quibusdam, veniam quam ipsum. At maiores tenetur, natus illo repudiandae velit, similique harum accusantium voluptatum, quia quas!</p>
               </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Upvotes: 0

Views: 67

Answers (1)

Tuffknitz
Tuffknitz

Reputation: 36

You're missing the column surrounding the text block.

Yours:

<div class="row">
   <p>Lorem ipsum...</p>
</div>

Correct:

<div class="row">
   <div class="col-md-12">
      <p>Lorem ipsum...</p>
   </div>
</div>

Upvotes: 2

Related Questions