Bootstrap 3 List group horizontal

This page http://goo.gl/262QmJ has a css to make a list-group floating horizontally and sticking together like it does for list-group to render vertically by default. In order to float list-group-items float horizontally one may add a “list-inline” style to UL tag but it wont take care of the left-right borders and radii. So adding the “list-group-horizontal” code would take care of it.

bootstrap-3-group-list-items-horizontal

Also one can keep or remove the “list-inline” class, it won’t matter to have it or not, when you have the “list-group-horizontal” added. One gets rid of the UL left-padding if one has “list-inline” in the style however.

/* List-group-horizontal*/

.list-group-horizontal .list-group-item {
	display: inline-block;
}
.list-group-horizontal .list-group-item {
	margin-bottom: 0;
	margin-left:-4px;
	margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
	border-top-right-radius:0;
	border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
	border-top-right-radius:4px;
	border-bottom-left-radius:0;
}

Just as another note following the updated code to reduce the thickness of the border between list items.

/* List-group-horizontal*/

.list-group-horizontal .list-group-item {
	display: inline-block;
}
.list-group-horizontal .list-group-item {
	margin-bottom: 0;
	margin-left:-4px;
	margin-right: 0;
	border-right:0;
}
.list-group-horizontal .list-group-item:first-child {
	border-top-right-radius:0;
	border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
	border-top-right-radius:4px;
	border-bottom-left-radius:0;
	border-right:1px solid #ddd;
}

Leave a Reply

Your email address will not be published. Required fields are marked *