Expanding the width of a list-group with Bootstrap to fill the entire div

I am working with a div that has a height of 200px. How can I make sure the ul items are divided into equal rows within the div, instead of always aligning to the top? To illustrate this, I have colored the div green. As I will be using ngFor in my ul, the number of rows may vary.

<div style="height:200px">
   <ul class="list-group list-group-flush">
     <li class="list-group-item border-0 bg-transparent ">
        test
     </li>
     <li class="list-group-item border-0 bg-transparent">
        test1
     </li>
   </ul>
</div>

https://i.sstatic.net/5Nmoi.png

htmlcssbootstrap-4

Answer №1

If you're looking to split the content within your div, one option is to utilize a table structure.

<table style="height: 200px;">
  <tbody>
    <tr *ngFor="let hero of heroes">
      <td class="align-baseline">
           <td>{{hero.name}}</td>
      </td>
    </tr>
  </tbody>
</table>

Another method to set height for li elements is as follows:

<ul class="list-group list-group-flush" style="line-height:180%">
    <li class="list-group-item border-0 bg-transparent">
        test
     </li>
     <li class="list-group-item border-0 bg-transparent">
        test1
     </li>
</ul>

Answer №2

Are you considering using a flexbox solution? Check out this example on CodePen

HTML

<div class="wrap">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

CSS

.wrap ul {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 200px;
}  
.wrap {
  background-color: green;
}

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

Is it possible to alter the HTML structure using JavaScript?

Looking to shift the positions of 2 divs using JavaScript DOM manipulation, all without altering the HTML. <div class="div1"> this should move downwards</div> <div class="div2"> while this should move upwards</div&g ...

javascripthtmldom

Is it possible for me to scrape an HTML code snippet directly from a browser?

How can I extract specific content from an HTML code block using only JS or jQuery on a browser? Below is the code I am working with: <ul> <li>New York</li> <li>London</li> <li>Madrid</li> <li&g ...

javascripthtmljqueryweb-scrapingclient-side

Can you hover over the closing tag in HTML to preview the corresponding opening tag?

Is it possible to display a preview of the opening tag when hovering over a closing tag? For instance, if I hover over </div>, I would like to see <div class="card"> ... ... </div> The reason for requesting this feature i ...

htmlvisual-studio-code

What are the dimensions for maximum picture width and height in the Bootstrap 4 grid class col-4? Additionally, can you provide some tips on minimizing image bl

Hey there! I am trying to arrange 3 screenshots in 3 separate columns in one row, resembling steps 1, 2, and 3. I want them all to have the same size. Can you advise on the maximum width and height I should use before they start getting stretched or comp ...

htmlcssbootstrap-4

Is it possible to establish a connection between an HTML5 web socket and a Java Socket?

Recently, I created a system where a Java program was running on a server and a Java applet was embedded in a client's browser page. These two components were communicating via Java sockets. However, I am now contemplating the idea of transitioning fr ...

javahtmlnetwork-programmingwebsocket

inline checkbox is positioned on top of the text rather than next to it

I am attempting to enhance my form by adding checkboxes, but I have encountered an issue with the bootstrap class "checkbox-inline" not working as expected. Below is the code snippet: <strong>Styles:</strong> <%= f.collection_check_boxes : ...

cssruby-on-railsrubycheckboxbootstrap-4

Error encountered when trying to load Ajax script

As a beginner in the learning process, my code may appear messy. I am currently wrapping up my second project, which is a photo viewer. On the main page, there is a navigation system that loads different sections of the website using ajax. Since this proje ...

javascriptjqueryhtmlajaxcallback

Adding an additional border when combining two divs with rounded borders

I attempted to create a design similar to the Instagram "ask me a question" box, but I am encountering an issue where there is some extra border around the title when the two divs merge. What am I doing incorrectly? .info { overflow: hidden; ...

htmlcssborderborder-radius

What is the most efficient way to arrange a table using one-time binding in angularJS while ensuring optimal modal performance?

My ng-repeat loop has clickable headers for sorting, but once it reaches around 150 elements and 8000+ watchers, extreme latency occurs. Speed can be increased using one-time binding, but this causes the loss of sorting functionality. <table class="tab ...

javascripthtmlangularjs

What is the proper way to incorporate html entities in my specific situation?

In my application, I am attempting to incorporate double macron characters. My current method involves using the &#862; entity, like this: t&#862;t, which results in t͞t. However, I have encountered issues with reliability, as sometimes the ...

htmlcss

CSS: Struggling to Keep Footer at the Bottom of the Page

I've been struggling to get my footer to stick to the bottom of the page, but I just can't seem to make it work. I've searched online for solutions with no success, so I thought I would ask for help here. http://jsfiddle.net/f54eq3w8/ Here ...

css

Execute function prior to redirection of iframe

I have a specific challenge with an iframe on my webpage. I am looking to trigger a function right before the iframe reloads a new page, rather than after it has finished loading. I need this function to be triggered before the iframe redirects to the new ...

javascripthtmliframexhtml

Using React to Dynamically Render a Form Select with Two Pre-Defined Options (and mapping the remaining options)

Being relatively new to front-end development, especially React, I'm typically more of a back-end developer. Recently, the other developers on my team have left the company, leaving me alone to figure out the entire stack of our platform written in Re ...

htmlreactjs

Exploring the world of mathematics using JavaScript, adjusting the range input, and applying CSS transform with scale()

In my project, I have a container div set to a width of 794px and a range input with a maximum value of 250 and a minimum of 0. I am using CSS transform property like this: scale(1), where the scale is equivalent to 794px. The challenge arises when the br ...

javascripthtmlcssrange

Minimizing the font size of a single page

I have a section on my Drupal website that appears on both the homepage and the testimonials page. After increasing the font size of this section, I noticed it looks good on the homepage but not on the testimonials page! Homepage: Testimonials page: Th ...

htmlcssdrupaldrupal-7

Obtaining the unique identifier of a div element using AngularJS

Recently, I've assigned the id of ng-repeat as objectId, like this: <div class="mainListLabel " ng-if="profile==1" id={{obj.boeId}} ng-repeat="obj in mainList" ng-click="getEmployeeInformation(obj.boeId)">{{obj.boedisplayName}}</ ...

javascripthtmlangularjs

Tips for extracting both the div and entire inner content using JavaScript

I need to retrieve the inner content of a div using JavaScript For example: <div id="content" style="height: 20px; overflow: hidden"> content<br>content<br>content<br> </div> This is my HTML code. I only know the div&apos ...

javascripthtml

After the animation has finished, the ".animated" class should be removed. If the element is reloaded, the class should be added back using plain

Within my CSS, there is a ".animated" class that is automatically applied to all elements with the "drawer-wrapper" class. The HTML structure looks like this: <div class="drawer-wrapper animated"> foo </div> I created a function that ...

javascriptcssanimationevent-listener

When using the `display: table-cell` property on a div element, it does not automatically respect

How can I restrict the width of columns by defining a width attribute on the div.dcolumn DOM element to preserve the layout with overflowing cells? I want the content of any overflowing cell (like the 9px column) to be hidden while maintaining the specifie ...

javascripthtmlcss

Leveraging the power of map in an Angular typescript file

I've been attempting to populate a Map in Angular by setting values dynamically. When certain buttons are clicked, the onClick function is invoked. typeArray: Map<number,string>; Rent(movieId: number){ this.typeArray.set(movieId,"Rental ...

javascripthtmlangulartypescript