Bootstrap 4 - How to Properly Align Text within Lists

Recently, I started experimenting with Bootstrap 4 and encountered an issue with centering text in a list-group.

In Bootstrap 3, the following CSS rule worked like a charm:

.list-con {
  text-align:center;
}

However, in Bootstrap 4, the text-align property only seems to center multi-line text.

li {
  text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-con">
  <ul class="list-group test">
    <li class="list-group-item test-item">
      Title
    </li>
    <li class="list-group-item test-item">
      Title2
    </li>
    <li class="list-group-item test-item">
      Morbi id neque a eros mattis tristique at a dolor. Quisque sapien tortor, suscipit ut varius id, dictum eget tortor. Sed elit diam, tincidunt sed fringilla a, dignissim in augue. Curabitur elementum ante eget erat eleifend, a blandit odio accumsan. Nullam
      mattis urna nec elit dapibus, vel suscipit nulla dictum. Etiam erat magna, dictum eget pharetra et
    </li>
  </ul>
</div>

htmltwitter-bootstrapcssbootstrap-4

Answer №1

To center text in list groups, utilize the CSS property justify-content: center;,

... which determines how space is allocated between and around content items on the main axis of their container

Visit MDN for further details.

li {
  justify-content: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-con">
  <ul class="list-group test">
    <li class="list-group-item test-item">
      Title
    </li>
    <li class="list-group-item test-item">
      Title2
    </li>
    <li class="list-group-item test-item">
      Morbi id neque a eros mattis tristique at a dolor. Quisque sapien tortor, suscipit ut varius id, dictum eget tortor. Sed elit diam, tincidunt sed fringilla a, dignissim in augue. Curabitur elementum ante eget erat eleifend, a blandit odio accumsan. Nullam
      mattis urna nec elit dapibus, vel suscipit nulla dictum. Etiam erat magna, dictum eget pharetra et
    </li>
  </ul>
</div>

Answer №2

You might want to consider using a specific class for this purpose. Check out the resources at

Flexbox

Easily handle the layout, alignment, and sizing of grid columns, navigation, components, and more using a comprehensive selection of responsive flexbox utilities. In more intricate scenarios, custom CSS may be required.

Justify content

Apply justify-content utilities to flexbox containers to adjust the alignment of flex items on the main axis (the x-axis initially, or y-axis with flex-direction: column). Options include start (default), end, center, between, or around.

li {
  text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-con">
  <ul class="list-group test d-flex"><!-- specify as flex-box -->
    <li class="list-group-item test-item d-flex justify-content-center"><!-- apply flex class -->
      Apply flex class here
    </li>
    <li class="list-group-item test-item">
      Title2
    </li>
    <li class="list-group-item test-item">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum, dolor a vestibulum consectetur, nibh augue auctor tortor, a ullamcorper felis arcu sit amet lorem. Nam eget odio eget nunc suscipit vehicula. Vestibulum sed felis vel ante sagittis aliquet vitae
      non risus. Donec rutrum odio sit amet sapien porta, eget aliquam odio egestas. Sed dictum, eros non feugiat auctor, sapien magna varius odio, vel maximus elit ipsum nec tortor
    </li>
  </ul>
</div>

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

Can you use CSS to target a parent div based on the elements it contains?

If I have the following HTML: <div class='row'> <div class='cell'> <span class='image'> </span> Image Cell </div> <div class='cell'> Regular Cell </div&g ...

htmlcss

I'm having trouble getting my paragraph to center with both Bootstrap 4's margin:auto and text

I've been trying to center a paragraph in my project but it's not working out. I attempted using margin:0px auto; and the text-center features, but they didn't have the desired effect. <div class="row text-center"> <p> You c ...

htmlcssbootstrap-4

Special CSS rule for targeting an active state of a specific child element

My issue involves a div with the :active selector effect. Within this div, there is a smaller child div that contains some buttons. Currently, when either the parent div or one of the buttons within the child div is clicked, the :active effect is triggere ...

htmlcsscss-selectors

Attempting to get a webGL game downloaded from Unity to automatically enter fullscreen mode

Can someone help me with my Unity webGL game issue? I downloaded it from the internet, but I'm not sure what version of Unity was used to create it. When the game starts playing, it displays in a small canvas along with other elements like the Unity ...

javascripthtmlunity-game-enginewebgl

Styling with CSS in Zend Framework

In the process of creating a website using Zend Framework, I have successfully implemented the header, footer, and all the necessary pages. However, I am facing an issue with integrating the CSS file located at public/css/styles.css. When running the webs ...

phphtmlcsszend-framework

Make sure the bootstrap row extends to the full height of the page

I am currently working on a Django project and I am in the process of integrating Bootstrap into my HTML files. One issue I am facing is that the row in my HTML template is only as big as its content, but I want it to take up the entire height of the page ...

csstwitter-bootstrapbootstrap-4

Challenge with the continuity of my Html/CSS coding

I am currently expanding my knowledge in web development with a focus on CSS. While I am familiar with JS and HTML, CSS is proving to be more challenging for me. I have been attempting to create a webpage using Bootstrap, but I have hit a roadblock with th ...

jqueryhtmlcsstwitter-bootstrap

allowing absolutely positioned region to expand

For further information, please visit this page: test page In the process of designing a website, I have implemented a sidebar featuring an accordion style vertical navigation bar. The sidebar is set to be absolutely positioned in relation to its containi ...

jquerycsspositioningcss-position

How to Extract Text Content Excluding the Wrapping Tag from an Element Using JSoup

How can I take the text 'Some random text' and enclose it within a span tag? For example, if I have the following element: <div> Some random text 1 <a href="some_url">Go to Link</a> </div> <div> <spa ...

javahtmljsoup

Implement a unique feature for specific days using jQuery UI Datepicker with a customized class

Looking to highlight a range of days horizontally in jQuery UI Datepicker with the multiselect plugin. To achieve this, I am utilizing the :before and :after pseudoelements of the a tags. .ui-state-highlight a:before, .ui-state-highlight a:after { con ...

javascriptjquerycssjquery-uidatepicker

Is there a way to retrieve the href attribute from an <a> tag using PHP?

Similar Question: Retrieving the href attribute of an Anchor Element Provided hyperlink $link="<a href='test.php'>test</a>"; Is there a way to extract href and anchor text using PHP? ...

phphtml

Spin the text inside an <li> element generated by JavaScript

I am currently working on a unique script designed to create a custom number of slices for a circle. The items in the circle are being displayed as shown in this generated circle image. This is the Javascript code I have been using: for () { men ...

javascripthtmlcss

Is your URL getting cut off in jQuery?

How can I properly display a URL in an HTML table without it getting truncated? I'm attempting to show it within a table using jQuery, but it seems to be cutting off the URL. Here's a snippet of my code. Any suggestions on how to fix this? <! ...

javascriptjqueryhtml

What are the key benefits of opting for flexbox over solely relying on display: inline?

While it may be more convenient to use flexbox over older concepts like display: inline; float: right When comparing simply adding a container and using display: flex; versus changing each element inside the container to display: inline;, what are the be ...

htmlcssflexboxcss-floatinline

Is there a method to verify the sequential loading of JavaScript files?

It has come to my understanding that in the case of having two JS files (x.js and y.js), where y.js uses functions from x.js, it is important to load x.js before y.js when loading the files. For larger projects, I am curious if there are tools available s ...

javascripthtmldomfrontendbackend

Having trouble getting the .toggle() function with classList to work on one element, despite working fine on others

I've been struggling to apply a class to an HTML element when I click on another element of the page. Despite numerous attempts, it just doesn't seem to work for me. Let's take a look at my code: HTML Code: <div class="container&qu ...

javascripthtmljqueryonclicktoggle

Creating a PDF document using HTML code

I am interested in creating a PDF file from an HTML code that includes the stylesheet rules using PHP. Currently, I am attempting to achieve this with the MPDF library. However, the generated PDF does not resemble the original HTML page. Many elements app ...

phphtmlcsspdfdocument

It displays empty squares instead of icons

Currently, I am working on a form using Bootstrap and HTML. I have incorporated glyphicons into the design but unfortunately they do not seem to be functioning properly. <label>International Collaboration &nbsp;<span class="glyphicon glyphico ...

htmltwitter-bootstrap-3

How can I keep the cursor from automatically moving to the beginning of an input field when the type changes?

Currently in the process of creating a Password field that allows users to hide or display their password in React/Ionic. I am aiming to maintain focus on the password field when switching the input type, similar to how it is done on the PayPal Login page ...

javascripthtmlcssreactjsforms

Personalizing Bootstrap Styles Using Sass

As a newcomer to Bootstrap 5 and Sass, I have been thoroughly enjoying the learning process. However, I have a couple of questions that have come up along the way... When it comes to customizing Bootstrap Sass, I understand the concept of variable overrid ...

htmlcsssassbootstrap-5