Center nested rows vertically within an alert box using Bootstrap

Can anyone provide some insight into why the inner row is not vertically centered within its alert-box? I feel like it might have something to do with the nested row structure. Here is a link to the code: https://jsfiddle.net/d2pg4xta/

<div class="container-fluid">
  <div class="row"> 
    <div class="col-md-6 d-flex">
      <div class="alert alert-dark">
        <div class="row"> <!-- here is my nested row -->
          <div class="col-md-6"><p class="mb-0">1:</p></div>
          <div class="col-md-6"><p class="mb-0">A</p></div>
          <div class="col-md-6"><p class="mb-0">2:</p></div>
          <div class="col-md-6"><p class="mb-0">B</p></div>
          <div class="col-md-6"><p class="mb-0">3:</p></div>
          <div class="col-md-6"><p class="mb-0">C</p></div>
          <div class="col-md-6"><p class="mb-0">4:</p></div>
          <div class="col-md-6"><p class="mb-0">D</p></div>
        </div>
      </div>
    </div>
    <div class="col-md-6 d-flex">
      <div class="alert alert-dark text-center">
        <p>Lorem ipsum ...Lorem ipsum ...</p>
        <p>Lorem ipsum ...Lorem ipsum ...</p>
        <p>Lorem ipsum ...Lorem ipsum ...</p>
        <p>Lorem ipsum ...Lorem ipsum ...</p>
      </div>
    </div>
  </div>
</div>

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

Update: The issue seems to be with aligning the content (abcd1234) inside the left alert-box, rather than aligning both alert-boxes. I'm looking for a solution where the content inside the left alert-box is more centered, similar to this: https://ibb.co/myntK5j

htmlcssbootstrap-4

Answer №1

Follow these steps:

.alert-dark {
    apply display: flex;      /*add*/
    apply flex-direction: column;     /*add*/
    apply align-items: center;     /*add*/

    set color to #1b1e21;
    set background-color to #d6d8d9;
    set border-color to #c6c8ca;
}

Answer №2

To implement the desired layout, utilize the flex property on the element with class .alert-box, and eliminate the margin from the one with class .row

View the complete code on Js Fiddle: https://jsfiddle.net/zbywdacp/

Live Example:

.row {
  background: #f8f9fa;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.alert-dark {
  display: flex;
  align-items: center;
  justify-content: center;
}
<!-- The following comprises of Bootstrap's CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- Incorporating jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS inclusion -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Bootstrap JavaScript extension -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 d-flex">
      <div class="alert alert-dark">
        <div class="row m-0">
          <div class="col-md-6">
            <p class="mb-0">1:</p>
          </div>
          <div class="col-md-6">
            <p class="mb-0">A</p>
          </div>
          <div class="col-md-6">
            <p class="mb-0">2:</p>
          </div>
          <div class="col-md-6">
            <p class="mb-0">B</p>
          </div>
          <div class="col-md-6">
            <p class="mb-0">3:</p>
          </div>
          <div class="col-md-6">
            <p class="mb-0">C</p>
          </div>
          <div class="col-md-6">
            <p class="mb-0">4:</p>
          </div>
          <div class="col-md-6">
            <p class="mb-0">D</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 d-flex">
      <div class="alert alert-dark text-center">
        <p>Lorem ipsum ...Lorem ipsum ...</p>
        <p>Lorem ipsum ...Lorem ipsum ...</p>
        <p>Lorem ipsum ...Lorem ipsum ...</p>
      </div>
    </div>
  </div>
</div>

Answer №3

To enhance the appearance, consider incorporating display: flex; within .alert.alert-dark.

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

Use PHP code to echo a clear division after every third result in MySQL

I am currently displaying results in descending order from a MySQL table using a while loop. I have already set up a pagination system that displays 9 records per page. However, I am facing an issue when trying to implement a CSS break every 3 records in ...

phpmysqlcss

Unable to use saved images with jQuery Slider

I'm currently facing an issue with adding a jQuery slider to my website. It seems that the slider is not displaying images that are saved on my computer, only images from external websites. Below is the code snippet where I have included an image fil ...

jqueryhtmlcss

Unable to transfer a value from a CGI script back to an HTML form

When working with an HTML form that has a date field named cdt, I encountered the need to retain the date value when submitting data to an Oracle table through a CGI script. To achieve this, instead of using Javascript code like history.go(-1), I aimed to ...

javascripthtml

Tips for sending a selected option value to jQuery via AJAX using the name attribute

Is there a way to send the section option value using ajax, but only for selection and checkboxes? The issue I'm facing is that when posting, the section and checkbox appear as undefined. Thanks in advance. PHP Code <?php $parameters = new P ...

phpjqueryhtmlajax

Ensure that the element is positioned above other elements, yet below the clickable area

Currently, I am working on developing a notification system that will display a small box in the top right corner of the screen. However, I am facing an issue where the area underneath the notification is not clickable. Is there a way to make this part o ...

htmlcss

Welcome to the launch of OpenWeatherMap!

I just signed up for an account on the OpenWeatherMap website. My goal is to retrieve the current weather information for a specific location using the City ID API Call: http://api.openweathermap.org/data/2.5/weather?id=2172797&appid=myAPIKey How ca ...

javascripthtmlopenweathermap

How can I use PHP to update and select on the same page simultaneously?

Having always been able to do something similar in other languages, I'm facing a few difficulties with PHP. My goal is to load a page that displays all the values from a form (created with a SELECT) and then update them all when clicking a "CHANGE" bu ...

phphtmlmysqldatabaseweb

Insert a new row into the table with a value that is taken from the input fields on the form

view image details I am working on a form that consists of 4 fields: Name, Last name, email, and role. There is also a button. When the button is clicked, the input from the above form should be added as a new row in a table below. ...

htmlangularforms

Execute a function on elements that are added dynamically

I'm in the early stages of learning javascript and jquery, so this issue might be very basic. Please bear with me. Currently, I am dynamically adding new link (a) elements to a division with the id "whatever" using the following code: $("#whatever") ...

javascriptjqueryhtml

Ensuring Proper Tabulator Width Adjustment Across All Browser Zoom Levels

<div id="wormGearTabulatorTable" style="max-height: 100%; max-width: 100%; position: relative;" class="tabulator" role="grid" tabulator-layout="fitDataTable"><div class="tabulator-header" role="rowgroup"><div class="tabulator-header-co ...

javascriptcssangulartypescripttabulator

Ways to automatically refresh a page in Javascript after a short period of user inactivity

Similar Question: How Can I Modify This Code To Redirect Only When There Is No Mouse Movement I am looking to update a web page automatically if the user is inactive, specifically through key presses or mouse clicks using Javascript. ...

javascriptjqueryhtml

Display or conceal a YouTube video with a click

Q1) Is it possible to use JQuery on page load to detect the file name of an image and then dynamically position it on the page with CSS? Q2) What is the most efficient way to achieve this without embedding iframe code inside a specific div.icon element? ...

javascriptjquerycssxhtml

Icons on the top banner that adjust to different screen sizes

I am still getting acquainted with Wordpress, so please bear with me if I use incorrect terminology or ask silly questions. I am eager to learn and improve. My website is focused on jewelry (using Kallyas premium), and I have a row of banner icons between ...

phphtmlcsswordpressresponsive

What is the best way to eliminate the appearance of the blue square that shows up when the button is clicked on smaller screens?

When testing my project on different screen sizes in Chrome dev tools or on my phone, I noticed a blue square briefly appearing around the button when it is clicked. I attempted to remove this by setting outline: none or outline: 0 on various pseudo-classe ...

htmlcssbuttonclickoutline

Tips for eliminating the default arrow on the HTML select tag?

I am currently utilizing vuejs along with tailwindcss and I am trying to figure out how to get rid of the default arrow from an HTML select element. Despite my attempts to remove it by using CSS properties like -moz-appearance, -webkit-appearance, -ms-appe ...

htmlcssvue.jsdrop-down-menutailwind-css

When the fullscreen modal is opened, the initial image displayed is not the same as the one that was clicked on

Seeking assistance: I've been struggling with a problem for quite some time now and could really use some help from you guys. My issue involves an 'AngularJS' webapp that retrieves posts from an 'FB page' via 'OpenGraph' ...

javascriptcssangularjshtmlionic-framework

What is causing my column's content to be lacking padding on the left side and having excessive padding on the right side?

Edit: Here's the link to the codepen https://codepen.io/maptik/pen/bGKMgpJ In my React project, I'm utilizing Bootstrap to display cards for each "Product". Here is a snippet of how I am rendering it: <div className="container bg-color- ...

htmlcssreactjsfrontend

What is the best way to present a unique page overlay specifically for iPhone users?

When browsing WebMD on a computer, you'll see one page. However, if you access it from an iPhone, not only will you be directed to their mobile page (which is easy enough), but they also display a special overlay with a "click to close" button prompti ...

phpjavascriptiphonehtml

"Troubleshooting issue in Django 1.6.2 where CSS styles are not being applied to

I am encountering an issue with this code and would greatly appreciate some assistance. The base.html file contains a {% block content %}{% endblock %}. I have created a Signup.html file structured like this: {%extends 'base.html'%} {% block co ...

pythonhtmlcssdjangohttp-redirect

What is the best method to display and conceal a table row in Angular 6?

In the midst of developing a table with multiple rows, I am seeking a way to invisibilize a particular row and then reveal it again using a reset button. Any tips on how to accomplish this task?emphasis added ...

htmlangularbootstrap-4