I need help figuring out how to center a list of items on the page, but have them aligned left. I am using bootstrap.
I want the text to be in the center of the page but aligned left.
<ul class='text-center'>
<li class='text-left'> Short Item #1 </li>
<li class='text-left'> Much Longer Item #2 </li>
<li class='text-left'> Short Item #3 </li>
<li class='text-left'> Much Much Longer Item #3 </li>
</ul>The content has been modified to match the original poster's image:
body {
height: 100%;
width: 100%;
margin: 0;
}
.container {
position: relative;
height: 200px;
}
.flex-container {
height: 100%;
width: 100%;
position: absolute;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.text-center {
background: pink;
}<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, harum maiores. Ullam illo consequuntur eum ipsum fugiat, quidem pariatur quibusdam facilis dolores omnis voluptas similique quos commodi incidunt nesciunt error!</p>
<div class="container">
<div class="flex-container">
<ul class='text-center'>
<li class='text-left'> Short Item #1 </li>
<li class='text-left'> Much Longer Item #2 </li>
<li class='text-left'> Short Item #3 </li>
<li class='text-left'> Much Much Longer Item #3 </li>
</ul>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea minus sequi placeat eaque at nobis numquam reiciendis explicabo veniam illum consectetur, quis illo consequatur consequuntur! Excepturi nulla molestiae temporibus.</p>If you are looking to center an element in Bootstrap 4 based on the width of its content, this solution is specifically tailored for that:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container-fluid">
<div class="row bg-light">
<div class="col-auto mx-auto">
<ul class="bg-secondary text-light">
<li>Short Item #1</li>
<li>Much Longer Item #2 </li>
<li>Short Item #3</li>
<li>Much Much Longer Item #3</li>
</ul>
</div>
</div>
</div>The .col-auto class can be used with breakpoints for enhanced responsiveness, allowing different column behaviors at various screen sizes. The mx-auto class ensures even left and right margins, resulting in the centering of the column on the screen.
I encountered an issue with my code recently. It seems to only work properly when tested on jsfiddle, and I can't figure out why it's not functioning correctly on codepen or when run from local files. Why is this code specific to jsfiddle? When ...
Query: In search of a Jquery or JavaScript solution for generating dynamic table rows with colspan using the JSON structure provided below. I am encountering difficulties in creating the necessary rows and have attempted several approaches without success ...
HTML includes two main tags, div and span. I am curious about the specific functions and roles of each tag. I have experimented with both but haven't been able to identify any significant differences. Can someone provide a detailed explanation on the ...
I need help figuring out how to send a warning message when a "delete" button is clicked on my webpage. I want the message to appear in a modal and display the selected value from a dropdown menu. Here is the code I have so far: <form action="elim ...
I am currently working on a web development project that aims to allow users to edit webpages without needing any coding knowledge. Users with authorization will be able to modify not only the text but also various HTML tags on the page, similar to platfor ...
I am looking to dynamically change the color of a row in my Datatable when a specific button is clicked. Here is the HTML code snippet for the rows: <tr role="row" class="odd"></tr> <tr role="row" class="even selected"></tr> & ...
Currently, I am utilizing the fantastic jQuery color picker provided by Although it functions as expected in "normal" scenarios, I have encountered an issue where the picker fails to display when the input parent element is nested within a Bootstrap 3 mod ...
Hey everyone, I'm facing a compatibility issue with CSS and Firefox today. When I go to my website www.fashoop.com, you'll notice some header lines on the sides. Here's an example in Google Chrome: (GOOGLE CHROME EXAMPLE) COLOR BLUE AN ...
I am looking for a way to ensure that when the tooltip width exceeds the browser's viewable area, it will automatically reposition itself so that the content can be fully viewed. It is important that the tooltip does not overlap on the referenced div ...
I need help with embedding the LinkedIn plugin into a website that has stacked images using z-index for layout. I have tried assigning the plugin to a CSS class with a z-index and position properties, but it hasn't worked as expected. Can anyone sugge ...
I currently have two datepickers aligned vertically and I'm looking to display them in a horizontal layout with some spacing between them. What changes do I need to make in order to present these two calendar pickers side by side on the same row? Cou ...
After successfully resolving the issue, I am still curious as to why the initial and second attempts did not work: The problem lay with an HTML element connected to an event (myFunction()): echo '<button class="btn remove-btn" onclick="myFunction( ...
Currently, I have implemented a function that dynamically adds the appropriate number of cells to the bottom of my table when a button is clicked. This is the JavaScript code for adding a row: <a href="javascript:myFunction();" title="addRow" class= ...
I'm trying to modify the .day class of tempus-dominus (), but even using !important doesn't seem to work when inspecting it (avoid clicking around as the inspection can be strange, and even forcing :hover makes the dropdown disappear). For examp ...
Applying this particular css: .addProblemClass{ width:300px; height:300px; /*width:25%; height:40%;*/ border:solid 1px #000000; margin: 5px; background-color:#FFFFFF; padding:5px; opacity:0.9;/*For chrome and mozilla*/ ...
I'm considering using fs, but I'm not entirely sure how to go about it. Here's the setup: ejs: <form action="/products" method="POST"> <input type="file" name="image" id="image"> <button class="submit">Submit</but ...
As I work on setting up a signup form for a MikroTik hotspot, I've encountered limitations with the device not supporting PHP. In order to pass the necessary variables from the device to an external PHP page where customer data will be saved and trial ...
Is there a way to create a table with fixed row headers so that column headings stay in place while scrolling? I've managed to achieve this, but now the table headers are not aligned properly with the rows below. I've also created a helpful jsfid ...
Currently, I'm in the process of setting up a default template for my bootstrap 4 projects. My plan is to utilize Browserify to include Bootstrap 4 along with its dependencies (jQuery & Popper.js) in my script file. However, I'm facing some confu ...
I currently have four forms labeled as form-1, form-2, form-3, and form-4, along with three buttons named Button-1, Button-2, and Button-3. Upon loading the first JSP page, it displays form elements on the screen. My query pertains to clicking on button- ...