Skip to content

Instantly share code, notes, and snippets.

@danielflippance
Created July 7, 2014 23:31
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save danielflippance/d6401c926b4fb2442e15 to your computer and use it in GitHub Desktop.
Save danielflippance/d6401c926b4fb2442e15 to your computer and use it in GitHub Desktop.
Bootstrap 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;
}
@mkczyk
Copy link

mkczyk commented Jan 29, 2017

I improve this style:

.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-width: 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-width: 1px;
}

Now, the border (left and right) isn't duplicate.
border

@brunoleles
Copy link

I need to use like this, on v4

.list-group.list-group-horizontal{
	display: flex;
	flex-direction: row;
}

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment