How to align text in Bootstrap/CSS to be centered on the left side

I require your assistance. I have a column with text that needs to be center-aligned, but laid out as demonstrated below. I attempted to use

display: inline-block; text-align: left

but it didn't produce the desired result.

The desired layout is as follows:

                              Other Lorem Stuff
                          > Lorem ipsum dolor sit amet
                          > Consectetur adipiscing elit
                          > Aenean laoreet lectus nec risus 
                            malesuada auctor.
                          > Vestibulum pellentesque, ante sit 
                            amet congue tempus

It's important that the text wraps underneath when it reaches the end of the line, and not beneath the > symbol

Here is the code snippet:

.footsmall{
    background-color: #FFF8DC;
    top:-50px;
    right: 100px;
    height: 300px;
    display: inline-block; 
    text-align: left
}
<div class="col-3 position-absolute footsmall text-center p-3">
                <p class="fs-4">Other Lorem Stuff</p>
                <p> > <u>Lorem ipsum dolor sit amet</u></p>
                <p> > <u>Consectetur adipiscing elit</u></p>
                <p> > <u>Aenean laoreet lectus nec risus malesuada auctor.</u></p>
                <p> > <u>Vestibulum pellentesque, ante sit amet congue tempus</u></p>
            </div>

Would appreciate any help. Thank you.

cssbootstrap-4bootstrap-5

Answer №1

For organizing each item, consider utilizing a flexbox container.

  <div class="d-flex">
    <span>&gt;</span>
    <p class="text-decoration-underline">Lorem ipsum dolor sit amet</p>
  </div>

Check out the functional code snippet below:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c2e2323383f383e2d3c0c79627d627f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">

  <div class="row">
    <div class="col-3 p-3 text-center">
      <p class="fs-4">Other Lorem Stuff</p>
      <div class="d-flex">
        <span>&gt;</span>
        <p class="text-decoration-underline">Lorem ipsum dolor sit amet</p>
      </div>
      <div class="d-flex">
        <span>&gt;</span>
        <p class="text-decoration-underline">Consectetur adipiscing elit</p>
      </div>
      <div class="d-flex">
        <span>&gt;</span>
        <p class="text-decoration-underline">Aenean laoreet lectus nec risus malesuada auctor.</p>
      </div>
      <div class="d-flex">
        <span>&gt;</span>
        <p class="text-decoration-underline">Vestibulum pellentesque, ante sit amet congue tempus.</p>
      </div>
    </div>
  </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44262b2b30373036253404716a756a77">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Answer №2

Just a quick tip: Instead of using display and text-align properties in your CSS, you can directly apply the classes to your HTML elements:

<div class="d-inline-block text-start"> </div>

Another suggestion is to utilize an unordered list with a custom marker style, such as a chevron, instead of using paragraphs.

.custom-li {
    list-style-type: '> ';
}
        <div class="col-3 footsmall text-center">
            <p class="fs-4 p-3">Other Lorem Stuff</p>
            <ul class="text-start custom-li">
                <li>
                    <u>Lorem ipsum dolor sit amet</u>
                </li>
                <li>
                    <u>Consectetur adipiscing elit</u>
                </li>
                <li>
                    <u>Aenean laoreet lectus nec risus malesuada auctor.
                </li>
                <li>
                    <u>Vestibulum pellentesque, ante sit amet congue tempus</u>
                </li>
            </ul>
        </div>

Does this align with what you were looking for? Ensuring the text stays in line with your markers?

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

`The value of an element within an array changes automatically`

In my current setup, I have a traditional array where each element represents an HTML element. The issue arises when I manipulate these elements within the array; any changes made to the HTML element also reflect in the array automatically. However, I pref ...

javascripthtmlcssarrays

What is the method for ensuring a p element is only as wide as necessary when it wraps within a parent div with a specified hardcoded width?

Is there a way to adjust the width of the p-element in my example below based on the text inside without affecting the normal line break behavior, using only CSS if possible? It appears to be ignoring wrapping and is too wide: https://i.stack.imgur.com ...

htmlcss

Using HTML and CSS to create interactive icons that change color when clicked, similar to how a link behaves

Have you ever wondered if there's a way to make an icon act like a link when clicked, just like regular text links turning purple? And not just the last one clicked, but every single icon that gets clicked. Trying to use the :visited pseudo was unsucc ...

javascripthtmljquerycssvisited

A comprehensive tool for testing JavaScript, CSS, HTML, and jQuery code

Currently, I am working on an extension for Google Chrome that consists of multiple .js, .css, and .html files. My coding process involves using Notepad++ as my primary tool. However, I find myself needing to conduct testing at various stages of developm ...

javascripthtmlcsstesting

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

I am having trouble getting a button to trigger an animation. Currently, the animation only plays once when the page is refreshed and doesn't repeat on subsequent clicks of the button. function initiateAnimation(el){ document.getElementById("anima ...

javascripthtmlcssanimation

Fluid imitation pillars with a decorative outer edge

Looking to create a modern, sleek 2-column HTML5 interface with a left sidebar and main content area on the right. Backwards compatibility is not an issue as all users will be using the latest versions of Chrome or FF. The goal is to give the sidebar a ba ...

htmlcss

Eliminate gaps between lines in a wrapped Flexbox layout

I am trying to eliminate the spaces between rows in a horizontal list flexbox. I am creating an alphabetical list and I want it to flow seamlessly without any gaps. This is what I have so far: #example { display: block; margin-left: auto; margin-r ...

htmlcssflexboxwhitespace

Adjusting the height of a DIV element to suit the window dimensions

I am facing an issue with the following HTML code: <div id="subpageHeaderImageSection"> <div id="subpageHeaderLeft"> <span id="holdImageP"></span> <!--[if lte IE 10]><img id="igm" src="theImages/sub ...

javascriptjqueryhtmlcss

Activate Bootstrap tab show event upon clicking the next button

Seeking assistance with my jQuery code: $('#nexttab').click(function () { var tabToShow = $(this).attr("data-target"); if ($(tabToShow).length) { $('a[href="' + tabToShow + '&q ...

jquerybootstrap-4

Developing HTML5 animation by utilizing sprite sheets

Struggling to create an engaging canvas animation with the image provided in the link below. Please take a look at https://i.stack.imgur.com/Pv2sI.jpg I'm attempting to run this sprite sheet image for a normal animation, but unfortunately, I seem to ...

javascripthtmlcsscanvas

What is the best way to vertically align two divs on the left and right?

Having trouble aligning my dropdown list vertically with my textarea on the left. It seems like they are clashing together for some reason. UPDATE: Thank you for the assistance, I was able to make the necessary adjustments. JSP: .ExeDropdown{ float: ...

htmlcssjsp

Is it achievable to selectively target a particular class without resorting to utilizing an ID within DOM manipulation?

Is there a way to apply a function to a specific class without requiring an id? For example, in CSS hover effects, where multiple elements share the same class but only the one being hovered over is affected. function toggleHeight(elementId, arrowId) { ...

javascriptcss

Ways to display one element while concealing it when another is clicked

I am utilizing a series of div elements that can be triggered with the following code snippet: $(".course_id").on("click", function(){ var id = $(this).data("id"); $("div#lessons_by_course_" + id).removeClass("hidden"); }); The ...

javascriptjqueryhtmlcss

For Flexbox front end design, the left side should be contained within a container while the right side should seamlessly stretch across the

https://i.sstatic.net/3RYY6.png I'm facing a challenge in designing a website with a unique layout that has left me puzzled. I've created a codepen example to showcase what I'm trying to achieve. Specifically, I need to implement a Hero Ba ...

htmlcssflexbox

Display or conceal the location where the click event occurs within a single div

progress $(".button-toggle").click(function(e){ $(this).parents.find('#second').toggle(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="first"> <a href="#" class= ...

javascriptjqueryhtmlcss

Is it possible to target an iframe and display text simultaneously?

Trying to create a unique menu that interacts with an iframe and displays text in a separate div upon clicking. Example: • Menu item 1 clicked. • "https://wikipedia.org" loads in the iframe. • Address of the wikipedia page displayed in a diffe ...

javascriptjqueryhtmlcssiframe

Is it possible to adjust the position of a h2 heading on a particular webpage using CSS?

There is a situation where multiple pages contain h elements nested inside a standard container div class. When trying to edit a specific h2 element in a specific page using CSS, simply editing the h2 or the container does not work. Other methods attempte ...

jqueryhtmlcsscontainers

PHP: Bootstrap CSS for Carousels

I'm experiencing some difficulties with the Bootstrap CSS Carousel on my website. The left and right arrows seem to be unresponsive, and the slides are not transitioning automatically. I have been unable to identify the root cause of this issue. Belo ...

phpjavascriptcsstwitter-bootstrapcarousel

Ways to adjust the visibility of a div element multiple times using javascript and css

I implemented a popup feature in my application: <div id="modal"></div> let modal = document.getElementById('modal') modal.innerHTML = ` <button class="close-button" onclick="close_modal()" ...

javascripthtmlcssdjango

Improving the style of Google Maps InfoWindows for right-to-left languages

I'm currently working on a Google Maps marker infowindow and trying to adjust the padding specifically for RTL languages. Here's what I've attempted so far: google.maps.event.addListener(marker, 'click', function () { i ...

javascriptjquerycssgoogle-maps