How do I justify a horizontal list?
Modern Approach - CSS3 Flexboxes
Now that we have CSS3 flexboxes, you no longer need to resort to tricks and workarounds in order to make this work. Fortunately, browser support has come a long way, and most of us can start using flexboxes.
Just set the parent element's display to flex and then change the justify-content property to either space-between or space-around in order to add space between/around the children flexbox items. Then add additional vendor prefixes for more browser support.
Using justify-content: space-between - (example here):
ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu {
display: flex;
justify-content: space-between;
}<ul class="menu">
<li>About</li>
<li>Contact</li>
<li>Contact Longer Link</li>
<li>Contact</li>
</ul>How do I *really* justify a horizontal menu in HTML+CSS?
Modern Approach - Flexboxes!
Now that CSS3 flexboxes have better browser support, some of us can finally start using them. Just add additional vendor prefixes for more browser coverage.
In this instance, you would just set the parent element's display to flex and then change the justify-content property to either space-between or space-around in order to add space between or around the children flexbox items.
Using justify-content: space-between - (example here):
ul { list-style: none; padding: 0; margin: 0;}.menu { display: flex; justify-content: space-between;}<ul class="menu"> <li>Item One</li> <li>Item Two</li> <li>Item Three Longer</li> <li>Item Four</li></ul>Left align elements of horizontal list
I would strongly suggest you learn how to use your Browser's developer console. A quick inspection of this revealed that the #timeline element has 40px of padding-left.
I removed that padding, and altered your margin-left on the timeline items so that it only puts margin between elements. I did this by using the adjacent sibling selector:
#timeline li + li {
margin-left: 2%;
}
And - as a side-note, 0px is redundant / not necessary, as 0 is unitless, you can simply use 0 in values (such as margin-bottom: 0;)
Here's your snippet, modified to work properly:
.navbar { margin-bottom: 0;}
.jumbotron { margin-bottom: 0;}
#timeline { list-style: none; white-space: nowrap; overflow: auto; padding-left: 0;}
#timeline li { display: inline-block; padding: 1.5%; border: 1px solid #d1d2d3; margin-bottom: 2%; margin-top: 2%; text-align: center;}
#timeline li + li { margin-left: 2%; }
#timeline li h3, #timeline li em { display: block;}<!DOCTYPE html><html>
<head> <title>My Website</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="styles.css" rel = "stylesheet" type = "text/css"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li><a href="#">LinkedIn</a></li> </ul> </div> </nav> <div class="jumbotron text-center"> <h1>My Name</h1> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>What I've Been Up To</h1> </div> </div> <!--Timeline--> <div class="row" style="overflow:auto"> <ul id="timeline"> <li> <h3>Graduated from College</h3> <em>May 24, 2012</em> </li> <li> <h3>Started my first job</h3> <em>June 30, 2012</em> </li> <li> <h3>Started my second job</h3> <em>April 3, 2014</em> </li> <li> <h3>Bought a house!</h3> <em>August 12, 2015</em> </li> <li> <h3>Got married</h3> <em>June 3, 2016</em> </li> <li> <h3>First child born</h3> <em>May 1, 2017</em> </li> </ul> </div> </div> <footer> <p> Copyright © <!--Script displays the current year--> <script type="text/javascript"> var d = new Date() document.write(d.getFullYear()) </script> </p> </footer> </body>
</html>How to align bootstrap 4, horizontal list group in center
For posterity:
Apply d-flex justify-content-center if your element is not a flex element.
Original Answer:
Apply justify-content-center to the list-group
Codepen: https://codepen.io/anon/pen/gZRzOR
Here it is in the documentation: https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
<div class="list-group list-group-horizontal justify-content-center">
....
....
</div>
Horizontal list with evenly spaced and centered text
You can use justify-content: space-around with the CSS3 flexible box layout. This exactly does what you need, evenly spaces out the list items with margins on either extreme ends.
#promolist { display: flex; justify-content: space-around; list-style: none;}<ul id="promolist"> <li>NEW! GO IN STORE</li> <li>0% FINANCE APPLY ONLINE</li> <li>FREE DELIVERY ON ORDERS OVER £50</li></ul>how to align horizontal list inside div?
is a block level element, and so takes up the entire width of container... also text-align is for aligning text. You could do something like:
.container ul{
width:400px;
margin:0px auto
}
Horizontal menu justified positioning of items
The text-align:justify positioning trick requires to have white space (blank space) between the child items in the markup.
In the following example, it works, because there are white spaces between the <li> tags.
ul { text-align: justify; padding: 0;}li { display: inline-block;}ul:after { content: ''; display: inline-block; width: 100%;}<ul> <li>1</li> <li>2</li> <li>3</li></ul>How to align list elements horizontally
.tags_list > .tags
display: inline-block;
}
(and erase that absolute position rule)
Align items horizontally in a list of buttons
According to your example image, just add flex-direction:column to .forum-list button.
Then add display:flex; flex-direction:row; to forum-list-info-content class.
Related Topics
How to Escape HTML in Node.Js Ejs View
Bootstrap Print CSS Removes Background Color
How to Set Height for the Drop Down of Select Box
File Url Cross Domain Issue in Chrome- Unexpected
How to Decode HTML Entities in C
Why Is Nth-Child Selector Not Working
Min-Width and Max-Height for Table Attributes
Webgl: Prevent Color Buffer from Being Cleared
CSS - How to Have Children in Different Parents the Same Height
Selecting the Last Element Among Various Nested Containers
Bootstrap Navbar. When I Press the Button Nothing Happens
Equalize the Height of Left and Right Div, Prevent Right Div from Going Below Left Div
What Is the Standard Naming Convention for HTML/CSS Ids and Classes