CODEWITHSUNDEEP
cssbootstrap-4
Vzupo
Vzupo

Reputation: 1468

bootstrap 4 alerts make text display across the alert box

I am using bootstrap 4 and I want the paragraph text to display across the width of the box. How can I make it spread over most of it?

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  
  <div class="row">
        <div class="col-md-2">
        </div>
        <div class="col-md-8">

            <div class="alert alert-info">
                
          <div class="row">
        <p class="col-xs-12">
     
  
        <div class="col-xs-2 col-md-2 col-sm-2 col-lg-2"> <i class="fas fa-hand-paper fa-3x" ></i>
             
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
          <H2>
        Message
          </H2>
          <h3>
         title here
          </h3>
          <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
 
         </div>
         </div>

Upvotes: 1

Views: 235

Answers (1)

Liam Pillay
Liam Pillay

Reputation: 806

Your message is displaying over the majority of the element's container. Your paragraph text, I assume to be the col-xs-6 class div element under the h3 (as this is the only paragraph element with text in it) is displaying 100% of its container.

If you want it to fit the entirety of the alert you need to make the container <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> fit the entire row by changing the numbers 6 to 10:

<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">

This is because bootstrap runs off a 12 grid system. You had 4 unused grid spaces.

Read more here: https://getbootstrap.com/docs/4.0/layout/grid/

It should also be noted that col-xs is no longer supported in Bootstrap 4. The extra small size is now just col-number.

Bootstrap grid sizes

Upvotes: 1

Related Questions