Creating a unique Bootstrap 4 custom notification dialog box

I am currently working on a design using bootstrap for an Alert message card. I had initially thought of using <div class="card">, but I am unsure if that is the best approach.

Here is an image of what I am trying to create:

https://i.sstatic.net/u28Pd.png

My vision for the design is to have the left side of the alert in the background color #373C47 with an Icon in the center, and the right side with some text and a title. 

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

<div class="card depth-5 card-alert-danger">
  <div class="card-body">
    <div class="row">
      <div class="col-md-3">
        <p>Icon background color</p>
      </div>
      <div class="col-md-9">
        <h4 class="card-title m-0">Title</h4>
        <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
      </div>
    </div>

  </div>
</div>

I attempted to utilize columns for this design, but found it to be quite challenging. Are there any easier methods to achieve this layout?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you're searching for it, the term for what you need is a Media Object in Bootstrap 4.

Here is an example that closely resembles your image using only native Bootstrap 4 classes (click the "run code snippet" button below): 

<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
    body {
        background-color: grey;
    }
</style>

<div class="container">
    <div class="row mt-4">
        <div class="col">
            <div class="media bg-warning">
                <i class="fa fa-user-circle align-self-center m-4" style="font-size: 3rem;" aria-hidden="true"></i>
                <div class="media-body bg-light p-4">
                   <div class="row">
                       <div class="col">
                           <h5 class="mt-0">Media object heading</h5>
                       </div>
                       <div class="col-1 text-right">
                           <a href="#">&times;</a>
                       </div>
                   </div>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                </div>
            </div>
        </div>
    </div>
</div>

Answer №2

Eliminate the padding from the card-body element, and the background color will extend to the border.

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

<div class="card depth-5 card-alert-danger">
  <div class="card-body" style="padding:0">
    <div class="row">
      <div class="col-md-3" style="background:#373C47">
        <p style="color:white">Icon background color</p>
      </div>
      <div class="col-md-9" style="padding:8px">
        <h4 class="card-title m-0">Title</h4>
        <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
      </div>
    </div>

  </div>
</div>

To have the left side touch the border, change padding:0 to padding-left:0.

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

Jquery scroll animation not reaching the intended position when scrolling upwards

While developing a new feature for my music player, I encountered an issue with centering the track/div upon clicking in the scrollable parent div. Sometimes it doesn't scroll to the center as intended and instead scrolls erratically to the top of the ...

jqueryhtmlcss

The dimensions of the image are determined by its orientation

I am working with two different types of images on my website: vertical and horizontal. Currently, I have a JavaScript function that adjusts the height of all images to fit the screen size. However, I would like to modify this function so that it also adap ...

javascriptjqueryhtmlcss

If there is data in MySQL, proceed to display the results on the page; if not, display a check

I am struggling to implement a small logic that I can't seem to figure out here. My goal is to retrieve MySQL data from the database and echo it on a .php file. Before doing so, I need to check if the data is available. If it is, then I want to proce ...

phphtmlmysqlif-statement

What impact does including lang=less in a Vue component's style have on its behavior?

Exploring ways to scope the CSS of my Vue component, I initially considered using less to encapsulate my styles. However, after discovering the scoped attribute as the recommended method, I realized that my approach needed adjustment. In my original setup ...

cssvue.jslessvue-component

What is the best way to update specific content with fresh URLs?

I am interested in keeping certain sections of my page static, such as the header and footer, while allowing the main content to change dynamically. Additionally, I would like the URL to update based on the new content being displayed. Although I am famil ...

htmlurlpartial

Interactive div with dynamically generated click event

I need to add an onclick event to a button that is being generated dynamically via ajax. How can I achieve this? This is the code responsible for generating the content. When we click on an item, I want a popup window to appear. function retrieveTableDat ...

jqueryhtmlajaxlive

Is there a way to center a particular flex item horizontally within its parent container?

Having a flex container with two items, I wish to align the first item to flex-start, and the second item to the center of the flex container. I am particularly concerned about maintaining align-items: center to ensure that all flex items are vertically ce ...

htmlcssflexbox

Web server experiencing issues with loading scripts and CSS files

After successfully building my project using CodeIgniter on localhost, I encountered an issue when trying to run it on a webhost. The site was functional but the design elements such as scripts and stylesheets were not loading properly. Before uploading t ...

javascriptphpcsscodeigniter

Modifying the value of an animated status bar using the same class but different section

I need the status bars to work individually for each one. It would be great if the buttons also worked accordingly. I have been trying to access the value of "data-bar" without success (the script is able to process the "data-max"). However, the script see ...

javascripthtmljquery

The formgroup label is currently displayed in uppercase, but I would prefer it to be in title case

In the angular template below, I have noticed that even though the labels are in titlecase, they appear in uppercase when the page is rendered. This wasn't the desired outcome so I attempted to use the titlecase pipe and enclose the label text within ...

htmlcssangularlabel

Angular 2 does not include Bootstrap CSS by default

Found this helpful tip at https://angular.io/docs/ts/latest/guide/forms.html Time to include the stylesheet you need. Go to your application's root folder in the terminal and run this command: npm install bootstrap --save In index.html, make sure ...

twitter-bootstrapangular

Mysterious obsidian container lurking in the background of the video on Chrome version 67.0.3396

Displayed on the page is an HTML Video tag, which streams a video from the speaker (WebRTC). <div id="remoteVideoContainer"> <video id="remotevideo" autoplay="autoplay" controls="" loop="loop" preload="true" height="500" width="100%"> ...

htmlcssgoogle-chromewebrtc

Split-button dropdowns within tabs implemented with Bootstrap

I'm looking to create a navigation menu that combines both split buttons and dropdown tabs. I've found examples of each individually, but can't figure out how to merge the two: "Tabs with dropdowns" Is it possible to have a tab with a drop ...

htmlcsstwitter-bootstrap

When a React Router link is activated, the React Bootstrap dropdown remains open instead of closing as expected

<NavDropdown className="userDropdownButton" title="dropdown" id="user-nav-dropdown" alignRight > <div className="userDropDown"> <Link to="/user" className="userDropDownheader"> user </Link> </div> < ...

javascriptreactjsbootstrap-4react-bootstrap

The CSS selector "not:nth-child" is failing to function properly within the template

Trying to apply a margin-top to all labels except the first one in a row using the :not() and :nth-child selectors. Having trouble with my selector, can anyone help? .form-group:not(:nth-child(1)) + .label { margin-top: 20px; } <div class="form- ...

htmlcsslabel

Ways to convert a PHP script to utilize PDO

Previously, a query was used to retrieve website settings stored in the database by an administrator, such as MyCompanyName or Copyright text. These settings were added in the site's backend by the admin. <?php error_reporting (E_ALL ^ E_NOTICE) ...

phpmysqlhtmlpdo

The hover effect does not work when clicking the mouse button in the Chrome browser

All: [UPDATE] Another method I discovered to achieve this is not a solution, but rather a workaround: Utilize the mousedown event as a trigger (since a drag action is needed, a mousedown event is required), within that, attach a mouseover event to that sp ...

cssgoogle-chromehovermouseovermousedown

Tips for arranging divs in the exact way you want

Can you assist me in creating a layout like the one shown in the image below? I have attempted to achieve it, but my understanding of CSS is lacking and the layout needs to be completed quickly... I experimented with CSS properties such as float, overflow ...

csshtml

Modifying the attribute from "content-disposition:attachment" to "content-disposition:inline"

I created an HTML email signature that worked perfectly until I tested it in the Outlook Mail Client 2010, which is currently not displaying images but instead offering them as download attachments. I am utilizing DataUri for images: <img width="56" ...

htmloutlookmimeoutlook-2010multipart

Positioning the div in the center

Having trouble centering a div inside a 100% wide container. Here is the HTML code: <div id="body-outside"> <div id="body-inside"> content </div> </div> And here is the CSS: #body-outside{ width:100%; flo ...

htmlcss