Hello, I am currently using Bootstrap 4 and have a question regarding the "justify-content-around" property. When there are more than three li elements, it works perfectly, but if there are less than three, it does not work. Any tips on how to fix this issue?
The content is located inside this section.
<ul class="row center justify-content-around">
</ul>
Here is a live example:
Here is an example using the classes d-flex and justify-content-around.
ul {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
li {
width: 100px;
background: blue;
color: white;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<ul class="d-flex justify-content-around">
<li>Flex</li>
<li>Flex</li>
</ul>To make the necessary changes, simply include style="flex-grow: 1;" within the ul element.
Alternatively,
Modify your code according to the following instructions (check in full page mode):
Remove the width: 20rem; property and add col-4 to the li element.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row text-center">
<ul class="row center justify-content-around">
<li class="col-lg-4">
<div class="card card-edited" style="">
<span class="badge badge-dark card-lang">SK</span>
<img class="card-img-top img-responsive" src="http://snowfox.sk/nnm/public/img/anime/12675B.jpg" alt="Obŕazok neexistuje" height="350">
<div class="card-body">
<h4 class="card-title" style="overflow-y: hidden;">Natsume Yuujinchou</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-outline-success"><span class="fa fa-play"> Pozrieť preklad</span></a>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<a href=""><span class="fa fa-download"></span> Google</a> |
<a href=""><span class="fa fa-download"></span> Mega.co.nz</a> |
<a href=""><span class="fa fa-download"></span> Ulož.to</a>
</li>
<li class="list-group-item">
<a href=""><span class="fa fa-download"></span> Google</a> |
<a href=""><span class="fa fa-download"></span> Mega.co.nz</a> |
<a href=""><span class="fa fa-download"></span> Ulož.to</a>
</li>
</ul>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</li>
<li class="col-lg-4">
<div class="card card-edited" style="">
<span class="badge badge-dark card-lang">SK</span>
<img class="card-img-top img-responsive" src="http://snowfox.sk/nnm/public/img/anime/12675B.jpg" alt="Obŕazok neexistuje" height="350">
<div class="card-body">
<h4 class="card-title" style="overflow-y: hidden;">Natsume Yuujinchou</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-outline-success"><span class="fa fa-play"> Pozrieť preklad</span></a>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<a href=""><span class="fa fa-download"></span> Google</a> |
<a href=""><span class="fa fa-download"></span> Mega.co.nz</a> |
<a href=""><span class="fa fa-download"></span> Ulož.to</a>
</li>
<li class="list-group-item">
<a href=""><span class="fa fa-download"></span> Google</a> |
<a href=""><span class="fa fa-download"></span> Mega.co.nz</a> |
<a href=""><span class="fa fa-download"></span> Ulož.to</a>
</li>
</ul>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</li>
<li class="col-lg-4">
<div class="card card-edited" style="">
<span class="badge badge-dark card-lang">SK</span>
<img class="card-img-top img-responsive" src="http://snowfox.sk/nnm/public/img/anime/12675B.jpg" alt="Obŕazok neexistuje" height="350">
<div class="card-body">
<h4 class="card-title" style="overflow-y: hidden;">Natsume Yuujinchou</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-outline-success"><span class="fa fa-play"> Pozrieť preklad</span></a>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<a href=""><span class="fa fa-download"></span> Google</a> |
<a href=""><span class="fa fa-download"></span> Mega.co.nz</a> |
<a href=""><span class="fa fa-download"></span> Ulož.to</a>
</li>
<li class="list-group-item">
<a href=""><span class="fa fa-download"></span> Google</a> |
<a href=""><span class="fa fa-download"></span> Mega.co.nz</a> |
<a href=""><span class="fa fa-download"></span> Ulož.to</a>
</li>
</ul>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</li>
</ul>
</div>
</div>To achieve the desired outcome, ensure to enclose your list within a column:
<div class="column">
<ul class="row center justify-content-around">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
Recently, I started using Material UI and Tailwind CSS for my project. However, I encountered an issue with the Autocomplete component where the input overlaps with the following DatePicker when there is multiple data in the Autocomplete. I have attached a ...
If I were to write a stylesheet in an HTML document, it's worth noting that since the introduction of HTML5, the type attribute is no longer necessary as text/css has become the default and only possible value: <style type='text/css'> ...
If you have a Material-UI FAB with the following code: <Fab size="medium" color="primary" aria-label="add"> <AddIcon /> </Fab> And you want to toggle to this other state: <Fab var ...
i have been trying to create a tree structure in JavaScript. However, when I use the add_child function to add a child to an item in the elements array, it adds the child to all items in the elements array and their children, creating an infinite loop. I ...
I've been tirelessly experimenting with countless online methods, but I can't seem to make anything work. There's a div that needs to be flexible in width and height, positioned on a tile-able background image with a 1px border. The challe ...
Currently, I am developing a theme changer using AngularJS and I'm facing difficulty in figuring out how to swap one SASS file with another (both containing variables) when the user changes their theme. I understand that once SASS is compiled to CSS, ...
Struggling to center bootstrap 4's progress bar vertically in a column. Can't seem to get it right despite trying various alignment classes and combinations. Clearly, vertical alignment is not my strong suit. What could be causing the issue? . ...
Seeking advice on customizing the look of a MenuItem in PrimeNG. Here's what I have attempted so far: <p-menu [style]="{'width': '400px'}" #menuOpcoesLista popup="popup" [model]="opcoesListaCS" appendTo="body"></p-menu> ...
If you're interested, I have some code available on JS Fiddle that showcases my skills. var getJSON = function (url) { "use strict"; return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open('get' ...
I'm working on a project that involves creating a dialog box that can be resized and dragged. While I found steps in the Material-UI Dialog documentation on how to make it draggable, I'm still looking for information on how to make it resizable. ...
Struggling with Bootstrap, I can't figure out how to display the following HTML inputs in a single line: <div class="row"> <div class="col-sm-8"> <div class="form-group"> <input class="form-control" ...
Is there a way to automatically highlight the current table row when any input text or image is changed within that specific row using jQuery? In the given code snippet below, with two rows provided, how can one of the rows be highlighted upon modifying ...
Having trouble with the data table when adding a collapse tr. Removing the collapse tr fixes the data table issue. Any help on how to resolve this would be appreciated. $('.tableToggleUl').parent('td').css('padding','0 ...
Looking for a solution where I have 2 images - one inactive and the other active. I want the inactive part of the image to change to active when someone hovers over it. Here are the pictures: I was able to achieve this using mapster, but it's not res ...
Currently, I have this neat feature on my website where there's a button that toggles the image/background color - kind of like a dark mode switch. The background change is working fine, but I'm encountering some challenges with organizing the im ...
I have been diligently working on a project using a fiddle, and everything appears to be running smoothly in desktop view. The functionality is such that upon clicking any two product items (with one remaining selected by default), a detailed description ...
Looking for assistance in creating a dynamic menu with sub-menus that can expand upon clicking. The goal is to have an expandable menu structure where the user can click to expand or collapse certain sections. However, my current code is not functioning co ...
Encountering a curious issue with how IE is interpreting my css. The defined style includes "background-image: url(/images/leftArrow.png); DISPLAY: block; cursor: pointer;" However, IE 7 & 8 seem to be merging background and display as one property (r ...
Can CSS 2.1 be used to achieve horizontal overflow only? overflow: auto; If this code will result in both vertical and horizontal scrollbars for a block element, is there a way to display only horizontal scrollbars (for example, within a <div>)? Ho ...
I am attempting to set a background image that fills the entire window regardless of its size. I have implemented html, css and script as shown below: // Function adaptImage() // Parameters: targetimg function adaptImage(targetimg) { var wheight = $ ...