Bootstrap 4 alert boxes extend the text to span the entire width of the alert

How can I make the paragraph text span across most of the box width in Bootstrap 4?

 <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>

cssbootstrap-4

Answer №1

Your content is currently taking up the majority of the space within its container. Specifically, the paragraph text located within the col-xs-6 class div element under the h3 tag seems to be occupying 100% of its container.

If you'd like the content to fully utilize the available area in the alert box, you'll need to adjust the container to 

<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
so that it spans the entire row by changing the numbers from 6 to 10:

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

This change is necessary because Bootstrap follows a 12-grid system, and there were originally 4 unused grid spaces in your layout.

To learn more, visit: https://getbootstrap.com/docs/4.0/layout/grid/

It's important to mention that col-xs is no longer supported in Bootstrap 4. The "extra small" size should now simply be specified as col-number.

https://i.sstatic.net/80MNm.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Putting the second line of a list in a paragraph element with indentation (excluding UL or OL)

I am working with a table that has the following structure: html { width: 400px; } <table> <tr> <td>Description:</td> <td style="white-space: pre-wrap;"> Some text which could be quite long with some &apos ...

htmlcss

What is the best way to transfer all li elements with a certain CSS style to a different ul?

I have a task to relocate all the <li style="display:none;"> elements that are currently nested under the <ul id="bob"> into another <ul id="cat">. During this relocation process, it is important that all the classes, ids, and CSS style ...

javascriptjqueryhtmlcsshtml-lists

Achieve uniform column height with Bootstrap 2 columns of equal height positioned between two larger columns

I am struggling to find a solution for a unique case in Bootstrap: Click here The challenge is to create 1 row with 3 columns. The first column should display a responsive image, the center column should contain two different text blocks (white and blue) ...

bootstrap-4

Facing issues with jQuery and Bootstrap: ERR_CONNECTION_RESET

My jQuery and Bootstrap are causing issues and showing the following error message: GET net::ERR_CONNECTION_RESET GET net::ERR_CONNECTION_RESET Imports: jQuery: <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> ...

javascriptjquerylaravelbootstrap-4

Tips for preventing the larger background from displaying a scroll on a web page

Specifically tailored for this specific page: I am looking to eliminate the scrollbar at the bottom of the browser, similar to how it appears on this page: Thank you ...

htmlcss

Is there a way to position headline text behind another headline? Take a look at the image provided for reference

I need help creating headline text with a background image similar to the example below. I tried using relative positioning on the first heading, but I can't seem to get it to work correctly. If anyone can provide me with the code to achieve this ef ...

htmlcss

Tips for automatically hiding a button when the ion-content is being scrolled and displaying it again once scrolling has stopped

I have implemented a scroll function event in my HTML file using the following code: <ion-content (ionScroll)="scrollFunction($event)"> <ion-card *ngFor="let product of products" no-padding> <ion-item class="bigclass"> <i ...

htmlcssionic-frameworkionic3scrollview

Center-align columns that are fewer in number than can fit in a row

Just starting out with Bootstrap My HTML structure looks like this: <div class="row"> <div class="col-lg-3"> First Column </div> <div class="col-lg-3"> Second Column </div> </div> Currently, there are ...

htmlcsstwitter-bootstrap-3

Navigate through pages using scrollspy without losing your position when returning

Hey all you web geeks out there, I could really use your help solving a little issue. I've been working with Bootstrap to build a website that utilizes scrollspy for navigating different sections of the page using the navbar. The only way I could sto ...

javascriptjqueryhtmlcsstwitter-bootstrap

Ways to utilize the ::after pseudo class with ElementRef within Angular

Is it possible to manipulate the background-color of the ::after pseudo selector for the specified element using Angular? @ViewChild('infobubble', { read: ElementRef }) infoBubbleElement: ElementRef; ngAfterViewInit(): void { const el ...

cssangularcss-selectors

Users are reporting a problem with the PrimeNG confirmation dialog where it becomes unresponsive and locks up the screen

Previously functioning code seems to have been affected by an update to PrimeNG. The confirmation dialog that was once usable is now hidden behind a gray click-mask, rendering everything on the screen unclickable: https://i.sstatic.net/YN7Iu.png The HTML ...

javascriptcssangulartypescriptprimeng

Establish the container with a specific height and enable scrolling functionality

Here is the code snippet I am currently working with: <section class="table"> <div class="table-row"> <div class="table-cell"></div> <div class="table-cell"></div> <div class="table-cell"></div> ...

htmlcss

photos arranged in rows rather than a single row

Looking for help with arranging the remaining photos in the second row? Check out this example image link. I'm struggling to organize a row of overflow images within the "small-img-row" division. This row is located under the main image in col-2. H ...

htmlcssflexbox

What is the best way to reference a PHP file located outside the same directory as the main PHP file?

My current file structure looks like this: Wamp>www>Newlinks CSS (folder) header.php footer.php Profiles (folder) MainPHPfile.php I'm trying to include the header and footer files into MainPHPfile.php, but it's not working ...

phphtmlcss

Extending image across several rows within a form

I'm facing an issue with trying to display an image across multiple rows in a horizontal Bootstrap form. The current layout looks like the image below. However, I want the profile picture on the left to span multiple rows of the input field. As it sta ...

htmlcsstwitter-bootstraptwitter-bootstrap-form

initiate an animated sequence upon the initialization of the Angular server

Is there a way to launch a Netflix animation after my server has started without success using setTimeout? I don't want to share the lengthy HTML and CSS code. You can view the code for the animation in question by visiting: https://codepen.io/claudi ...

htmlcssangulartypescript

Padding issue with Dropotron plugin not functioning properly

I'm struggling to reduce the right space on my drop-down menus. https://i.sstatic.net/rz3r3.jpg Here's what I've tried: .dropotron li { box-shadow: inset 0 1px 0 0 #e6e6e6; padding-right: 0 !important; } U ...

htmlcss

Exploring ways to customize the selected text color within a jQuery mobile division using CSS

Is there a way to change the color of selected text to #3C3 for the div one only and not for div two? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link ...

jquerycssjquery-mobilemobiletextselection

Unable to open modal in browser due to HTML, CSS, and jQuery issues

I'm having trouble creating a modal window that opens when a button is clicked for user registration. The button is being clicked, but the modal window isn't appearing. Here's my code: <script src="http://ajax.googleapis.com/ajax/libs/ ...

javascriptjqueryhtmlcssmodal-dialog

Steps for stopping the sass --watch function on a specific folder

Successfully got my SASS up and running with the help of fantastic documentation available everywhere. The guide I followed was http://sass-lang.com/guide. sass --watch myfolder/css Running a specific command worked like a charm, enabling every change in ...

cssmacosnpmsass