Optimizing Bootstrap 4 Flex-Row Dimensions

Issue:

I'm currently working on a relatively intricate ListGroup using bootstrap v4.

The .flex-row div is displaying some mysterious white space at the bottom, and I need assistance in eliminating it.

Attempts Made So Far:

I've experimented with explicitly setting widths (w-XX) and adjusting the align-items style, which seems to address the issue slightly. However, I sense that there might be a more appropriate solution that I am missing.

PS: Even if my current approach resolves the problem, I still desire an understanding of why that pesky whitespace exists in the first place.

PSS: I am fairly new to flexbox styling, so please do not omit any information, no matter how basic you think it may be.

Screenshots:

Code Snippet:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="row">
  <div class="list-group col-12">
  
    <!-- Insert list group items here -->
    
  </div>
</div>

htmlcsstwitter-bootstrapflexboxbootstrap-4

Answer №1

To eliminate this unnecessary gap, adjust the margin-top property of the hr element to 0.

hr {
  margin-top: 0 !important;
}
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="row">
  <div class="list-group col-12">
    <div class="list-group-item flex-column d-flex" style="align-items:unset;">
      <h4 class="m-2 list-group-item-heading"><span class="fa fa-fw fa-user"></span>Title Of Person</h4>
      <div class="d-flex flex-row">
        <div class="flex-column w-50">
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>Job Title:</strong>
              </div>
              <div class="w-50">
                Job Title
              </div>
            </div>
            <hr/>
          </div>
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>Company Name:</strong>
              </div>
              <div class="w-50">
                Comp Name
              </div>
            </div>
            <hr />
          </div>
          <div class="m-2">
            <div class="flex-row d-flex">
...

    }
  </div>

Answer №2

The reason for the mysterious white space at the bottom is due to the list-group-item having the property of flex-flow: row wrap. To resolve this issue, simply apply the class flex-nowrap.

<div class="list-group-item flex-column d-flex flex-nowrap align-items-stretch">
  ...
</div>

Furthermore, the use of flex-column in the inner columns will only take effect if you also include d-flex to make it display as a flexbox. It may not be necessary in this case.

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

Ensuring the container height remains consistent with fluctuating content dimensions

Imagine a container with content, where the container's width is fixed but its height adjusts based on its inner content. Initially, when the content causes the container to be a specific height, the challenge arises in shrinking the inner elements w ...

htmlcss

Tips for validating multiple forms on a single page without altering the JavaScript validation structure

My JSP page currently consists of two forms: <body> <form id="1"></form> <form id="2"></form> </body> Only one form is visible at a time when the page is viewed. A JavaScript validation file is used to check the ...

javascriptjqueryhtmlformsjsp

.click function failing to trigger on dynamically loaded form

I'm facing an issue with a form that displays images from my database. After retrieving the filepaths, they are loaded dynamically into the form along with a "Delete" <button> for users to delete the image via AJAX. Although I can successfully ...

javascriptphpjqueryhtmlajax

Integrating a fictitious style using jQuery

Having some trouble with this code snippet. The issue arises when trying to apply the following style using jQuery. CSS .arrow_box { position: absolute; width: 24px; border-radius: 30px 30px 3px 3px; height: 17px; float:left; } .arrow_box:after { bord ...

javascriptjquerycss

I possess a primary menu with several submenus, yet I am encountering difficulty accessing the submenus. My goal is to efficiently navigate and access the appropriate submenu within the main menu

I am facing an issue with my CSS where the sub menu is currently showing from the left side, but I would like it to slide up and down instead. .outer { width: 100%; text-align: center; background-color: Gray; padding-top: 20px; bord ...

javascriptjquerycss

Looking to extract a Twitter handle using Python's BeautifulSoup module?

I'm struggling to extract the Twitter profile name from a given profile URL using Beautiful Soup in Python. No matter what HTML tags I try, I can't seem to retrieve the name. What specific HTML tags should I be using to successfully grab the prof ...

pythonhtmlbeautifulsouphtml-parser

How to Reference a Local File in PHP using Zend Framework for jQuery's .Load Function

I'm currently working on a PHP Zend framework website and I'm trying to link to a local file. The file structure is as follows: public_html/application/views/index/filename1.phtml Within filename1.phtml, I want to make a jQuery call to load a ...

phpjqueryhtmlzend-framework

Ways to compel links to open in Internet Explorer

In one of my chatbot messages, I have included a link to a web app that is only compatible with Internet Explorer. My chatbot runs on Google Chrome, so when the user clicks on the link, it opens in a new Chrome tab instead of in IE, where it should open f ...

htmlinternet-explorer

The content is unclipped with a border-radius and hidden overflow

As I work on incorporating stylistic text inside rounded divs, I encounter a challenge where the text touches the top of the container. While I have successfully managed to customize various content elements such as nested divs and background images, this ...

firefoxgoogle-chromeclippingcss

Save the Selenium HTML source code into an HTMLDocument element

Is there a way to save the HTML code fetched using Selenium (via Excel VBA) into an HTMLDocument element? The following example demonstrates utilizing Microsoft Internet Controls and Microsoft HTML Object Library for automating Internet Explorer. Dim IE ...

htmlvbaexcelseleniumxhtml

Utilize Python and Selenium to post a comment on Instagram

Having some trouble with submitting comments on Instagram using Python and Selenium. The comment box on the Instagram web page has the following structure: <textarea aria-label="Añade un comentario..." placeholder="Añade un comentario..." class="Ypff ...

pythonhtmlseleniuminstagram

Easy fix for 3 circles (images) placed in a row with equal distance between them and perfectly aligned

I've been spending the last 3 days trying to accomplish this specific task: 3 circular images arranged horizontally with equal spacing Occupying 70% of the central screen area Height and width based on percentages for browser resizing adjustment It ...

htmlcssflexbox

I have noticed that the brand section of the navigation bar changes to black when I hover over it, but I have been unable to locate any

I'm currently working on a Rails application that has a navbar-top with a brand element. However, I've encountered an issue where the background of the brand element turns black when I hover over it. Despite inspecting the browser console, I coul ...

cssruby-on-railstwitter-bootstrap-rails

Close the ionicPopup by tapping anywhere

Currently, I have implemented an ionicPopup that automatically closes after a certain time limit. However, I am wondering if there is a way to configure it to close with a single or double tap anywhere on the screen instead. While I am aware that setting a ...

cssangularjsionic-framework

Update the DIV element's class to reflect whether the quiz answer provided is correct or incorrect

I am facing a challenge while attempting to assign a CSS class to a dynamically created element in JavaScript. The error I'm encountering pertains to the reference issue with the trackerMarker element within the event listener functionality. Although ...

javascripthtml

Using Flexbox to center items is leading to content overlapping

After attempting to utilize flexbox for centering items, I am encountering issues with content overlapping and misalignment. https://i.sstatic.net/48PMj.jpg Link to the code snippet .footer_3 { position: relative; display: flex; align-items: top; ...

cssflexbox

Can a partially see-through front color be placed on top of an image?

My goal is to add a foreground color with opacity over some images within a div, allowing the image to still be visible. I've come across solutions on S.O., like this one, but they don't quite achieve what I'm looking for. Below is my HTML ...

htmlcss

Having trouble with the carousel previous and next buttons being blocked by boxes in Bootstrap 5, causing them to not work properly

I am currently working on a tutorial project for my class that involves implementing bootstrap5 carousel with previous and next sliding buttons. However, when I try to run the code, I am facing an issue where there are boxes appearing over the buttons an ...

htmlbootstrap-5

Struggling with implementing the use of XMLHttpRequest to transfer a blob data from MySQL to JavaScript

I have a blob stored in my local WAMP64/MySQL server that I need to retrieve and pass to an HTML file using XMLHttpRequest. I know I should set responseType="blob", but I'm not sure how to transfer the blob from PHP to JavaScript in my HTML file. Any ...

javascriptphphtmlmysqlajax

A technique for horizontally centering an image while simultaneously ensuring that the bottom is pushed down, even at an unknown resolution, and maintaining center alignment if

Imagine a scenario where I have an image with unknown resolution. My goal is to horizontally center it, even if the window's width is smaller than the picture, while also adjusting the bottom of the window to match the height of this picture. Is ther ...

htmlimagecssbackground-position