I'm having trouble with centering Bootstrap button in panel. Margin right and left auto doesn't work.
Is there a way to properly center the button? The Button needs to be centered because of the mobile scale.
Code:
<div class="n_monitor">
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-group">
<button type="button" class="btn btn-default">Server 1</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
.n_monitor .panel {
width: 628px;
border: solid 1px #ebebeb;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
height: 94px;
box-shadow: none;
margin: 0;
background-color: #f4f4f4;
margin-left: auto;
margin-right: auto;
}
.n_monitor .btn {
width: 126px;
height: 54px;
background-color: #3baed8;
border: none;
color: #fff;
font-size: 14px;
border-radius: 3px;
}
Add Bootstrap's Alignment Class text-center to .panel-body.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.n_monitor .panel {
width: 100%;
border: solid 1px #ebebeb;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
height: 94px;
box-shadow: none;
margin: 0;
background-color: #f4f4f4;
margin-left: auto;
margin-right: auto;
}
.n_monitor .btn {
width: 126px;
height: 54px;
background-color: #3baed8;
border: none;
color: #fff;
font-size: 14px;
border-radius: 3px;
}
<div class="n_monitor">
<div class="panel panel-default">
<div class="panel-body text-center">
<div class="btn-group">
<button type="button" class="btn btn-default">Server 1</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</div>
</div>
</div>
</div>
You can simply add "center-block" class to the button.
e.g.
<button class = "center-block">Test</button>
This always works the best for me. Particularity when using Bootstrap it works perfectly.
#button{
display: table; margin: 0 auto;
}
Center the text on the button's parent (.n_monitor .panel-body)
.n_monitor .panel-body
{
text-align: center;
}
Related
I would like to create a simple two drop down buttons horizontal in bootstrap,
so far here is what I have done:
label{
font-size: 0.875rem;
color: #666666;
text-transform: uppercase;
line-height: 1;
margin-bottom: .5rem;
display: block;
display: flex;
position: absolute;
}
.dropdown-select{
width: 500px;
border-bottom-color: deepskyblue;
background-color: white;
border-top: 0px;
border-left: 0px;
border-right: 0px;
margin-right: 30px;
}
.dropdown-list{
margin-top: 50px;
}
.btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:not(:first-child)
{
border: none;
color: green;
background-color: white;
margin-left: -22px;
position: absolute;
left: 532px
}
<div class="container>
<div class="row">
<div class="btn-group dropdown-list">
<label class="label-status">Test1</label>
<button class="dropdown-select" type="button"
aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
<input type="hidden" > demo
</button>
<button [disabled]="disabled" type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
</div>
<label class="label-serv">Test1</label>
<button class="dropdown-select" type="button"
aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
<input type="hidden" > demo
</button>
<button [disabled]="disabled" type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
</div>
</div>
</div>
the code above gives me something like this:
wrong view
I tried different way I could not figure it out,
The actual result should look like this one below or similar:
actual view
any similar example , tutorials or help will be appreciated .
Thanks
Here is my example, maybe you can use some parts of that.
I prepared design as in your "actual view"
.content{
margin: 0;
width: 100%;
}
span{
font-size: 14px;
color: #ccc;
}
.dropbtn {
color: #333;
padding: 5px 5px 5px 0px;
font-size: 16px;
cursor: pointer;
}
.dropbtn span{
color: #62c2ea;
float: right;
transform: rotate(-90deg);
}
.dropdown {
position: relative;
display: inline-block;
border-bottom: 2px solid #62c2ea;
width: 40%;
margin-right: 30px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 100%;
margin-top: 2px;
}
.dropdown-content a {
color: black;
padding: 16px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="content">
<div class="dropdown">
<span>Specjalista</span>
<div class="dropbtn">Dropdown 1 <span>❮</span></div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<span>Status</span>
<div class="dropbtn">Dropdown 2 <span>❮</span></div>
<div class="dropdown-content">
Link 4
Link 5
Link 6
</div>
</div>
</div>
I'm trying to create a responsive webpage with bootstrap, but the problem is that the grid system of bootstrap doesn't work right in class="col-x" i have given 2 elements. col-md-xx , col-lg-xx and col-sm-xx are working fine as i want. This is how it look like right now :
And this is what I want it to be :
**Summary :
I want those blue and green buttons come in front of the image.
image is in left side and buttons should be in the right side.
**
my source :
* {
text-decoration: none !important;
}
.header {
padding: 16px 58px 21px 58px;
}
.logoDiv {
float: left;
}
.logoDiv img {
float: left;
}
.TopBtns {
float: right;
}
.buybtn {
margin-bottom: 5px;
margin-top: 10px;
width: 300px;
}
.usersbtn {
width: 300px;
}
.TopBtns {
float: right;
}
/* Start Search Bar */
.searchForm {
margin-top: 20px;
direction: ltr !important;
text-align: center;
}
.dropdown-menu {
direction: ltr !important;
}
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
/* End Search Bar */
.navbar {
background-color: #fdfdfd;
-moz-box-shadow: 0 2px 8px rgb(189, 189, 189);
-webkit-box-shadow: 0 2px 8px rgb(189, 189, 189);
box-shadow: 0 2px 8px rgb(189, 189, 189);
border-radius: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
}
#media screen and (max-width: 1172px){
#adv-search {
width: 400px;
}
}
#media screen and (max-width: 992px){
#adv-search {
width: 300px;
}
.header {
padding: 16px 32px 21px 32px;
}
}
#media screen and (max-width: 768px){
#adv-search {
width: 100%;
}
.searchForm {
width: 100%;
float: none;
}
.TopBtns {
float: none;
}
.header {
padding: 16px 16px 21px 16px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="logoDiv col-lg-3 col-md-3 col-sm-3 col-6">
<img src="https://image.ibb.co/mp0505/logo.png"/>
</div>
<div class="TopBtns col-lg-3 col-md-3 col-sm-3 col-2">
<div class="btn-group-justified btn-group-success">
<div class="dropdown buybtn">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-shopping-bag"></i>
سلام سلام
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropdown header 1</li>
<li>HTML</li>
</ul>
</div>
<div class="dropdown usersbtn">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-user"></i>
سلام سلام
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropdown header 1</li>
<li>HTML</li>
</ul>
</div>
</div>
</div>
<div class="searchForm col-lg-6 col-md-6 col-sm-6 col-12">
<div class="input-group" id="adv-search">
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"
aria-hidden="true"></span></button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author</label>
<input class="form-control" type="text"/>
</div>
<div class="form-group">
<label for="contain">Contains the words</label>
<input class="form-control" type="text"/>
</div>
</form>
</div>
</div>
</div>
</div>
<input type="text" class="form-control" placeholder="Search for snippets"/>
</div>
</div>
</div>
</div>
</div>
Try to change your col-6 and col-2 classes to col-xs-6. You could also read more how bootstrap grid works. And also to our buttons, avoid using fix width. Just remove it.
Update: Add btn-block to your buttons if you want it to occupy the
whole column. Also please separate your search bar to another row.
* {
text-decoration: none !important;
}
.header {
padding: 16px 58px 21px 58px;
}
.logoDiv {
float: left;
}
.logoDiv img {
float: left;
}
.TopBtns {
float: right;
}
.buybtn {
margin-bottom: 5px;
margin-top: 10px;
}
.TopBtns {
float: right;
}
/* Start Search Bar */
.searchForm {
margin-top: 20px;
direction: ltr !important;
text-align: center;
}
.dropdown-menu {
direction: ltr !important;
}
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
/* End Search Bar */
.navbar {
background-color: #fdfdfd;
-moz-box-shadow: 0 2px 8px rgb(189, 189, 189);
-webkit-box-shadow: 0 2px 8px rgb(189, 189, 189);
box-shadow: 0 2px 8px rgb(189, 189, 189);
border-radius: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
}
#media screen and (max-width: 1172px){
#adv-search {
width: 400px;
}
}
#media screen and (max-width: 992px){
#adv-search {
width: 300px;
}
.header {
padding: 16px 32px 21px 32px;
}
}
#media screen and (max-width: 768px){
#adv-search {
width: 100%;
}
.searchForm {
width: 100%;
float: none;
}
.TopBtns {
float: none;
}
.header {
padding: 16px 16px 21px 16px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="logoDiv col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="https://image.ibb.co/mp0505/logo.png"/>
</div>
<div class="TopBtns col-lg-3 col-md-3 col-sm-3 col-xs-6 text-right">
<div class="btn-group-justified btn-group-success">
<div class="dropdown buybtn">
<button class="btn btn-success btn-block dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-shopping-bag"></i>
سلام سلام
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropdown header 1</li>
<li>HTML</li>
</ul>
</div>
<div class="dropdown usersbtn">
<button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-user"></i>
سلام سلام
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropdown header 1</li>
<li>HTML</li>
</ul>
</div>
</div>
</div>
<div class="searchForm col-lg-6 col-md-6 col-sm-6 col-12">
<div class="input-group" id="adv-search">
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"
aria-hidden="true"></span></button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author</label>
<input class="form-control" type="text"/>
</div>
<div class="form-group">
<label for="contain">Contains the words</label>
<input class="form-control" type="text"/>
</div>
</form>
</div>
</div>
</div>
</div>
<input type="text" class="form-control" placeholder="Search for snippets"/>
</div>
</div>
</div>
</div>
</div>
Put your image and the group of buttons on a div and use flexbox.
After set up your image to float:left and the group of buttons to float: right.
It should work ;)
use this
<div class="logoDiv col-sm-3 col-xs-6"></div>
<div class="TopBtns col-sm-3 col-xs-2"></div>
instead of
<div class="logoDiv col-lg-3 col-md-3 col-sm-3 col-6"></div>
<div class="TopBtns col-lg-3 col-md-3 col-sm-3 col-2"></div>
I'd like to align a caret with a dotted bottom border.
I managed to achieve it using this code but it works only in Chromium.
HTML:
<h2 id="a11y-291">
More <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle h2Title" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="dashedUnderline">albums</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
artists
</li>
<li class="active">
albums
</li>
</ul>
</div>
</h2>
and css:
.noMarginTop {
margin-top: 0;
}
.h2Title {
border: none;
font-size: 30px;
padding: 0;
line-height: 1em;
}
.h2Title:active,
.h2Title:hover,
.h2Title:focus {
background-color: transparent;
}
.caret {
display: inline-block;
margin-top: 1em; // Not aligned in FF
}
.h2Title .caret {
margin-left: 3px;
}
.dashedUnderline {
border-bottom: 1px dotted black;
}
.dropdown-menu {
left: 0;
right: 0;
min-width: 0;
}
It works as expected in Chromium:
But there is a slight offset in Firefox:
Has anyone a more reliable way to achieve this? I cannot figure out what differs between Firefox and Chromium resulting in an offset.
Thanks
.noMarginTop {
margin-top: 0;
}
.h2Title {
border: none;
font-size: 30px;
padding: 0;
line-height: 1em;
}
.h2Title:active,
.h2Title:hover,
.h2Title:focus {
background-color: transparent;
}
.h2Title .caret {
margin-left: 3px;
}
/* you must add display:inline-block to.dashedUnderline and .caret */
.dashedUnderline, .caret {
display:inline-block;
float:left;
}
.caret {
margin-top: 29px;
}
.dashedUnderline {
border-bottom: 1px dotted black;
}
.dropdown-menu {
left: 0;
right: 0;
min-width: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group">
<h2 id="a11y-291">
More
<button type="button" class="btn btn-default dropdown-toggle h2Title" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="dashedUnderline">albums</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
artists
</li>
<li class="active">
albums
</li>
</ul>
</h2>
</div>
I have a simple input that I am having trouble with trying to remove the hover/active styling on.
In the image below, I am trying to remove the grey background/slight border that it is adding when it is clicked. I just want it to be white, nothing should change when it is click or hovered over.
Here is a fiddle: https://jsfiddle.net/carlhussey/tfrpncu7/6/
<div class="input-group-btn">
<button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-lg dropdown-toggle filterOptions" type="button"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
</button>
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
background-color: transparent; /* Fix for dropdown-menu item hover background-color */
}
.filterOptions:hover,
.filterOptions:active{
background-color: white;
border-color: #ccc;
}
If you open DevTools and execute the dropdown button you'll see an event fire as far as .open being added to the input-group-btn class that you can the over ride as needed.
Working Example:
.div-cntr {
margin-top: 100px;
text-align: center;
max-width: 700px;
/*for example only*/
background: red;
min-height: 300px;
/*for example only*/
}
.form .open>.dropdown-toggle.filterOptions.focus,
.form .open>.dropdown-toggle.filterOptions:focus,
.form .open>.dropdown-toggle.filterOptions:hover .input-group-lg>.form-control,
.form .input-group.input-group-lg>.input-group-btn>.filterOptions {
border: 1px solid #ccc;
border-left: 0;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-radius: 0;
background: #fff;
}
.form .dropdown-menu.dropdown-menu-search {
top: 60px;
right: 110px;
border-radius: 0;
border: 0;
background: #fff;
}
.form .dropdown-menu.dropdown-menu-search:after {
top: -15px;
right: 10px;
position: absolute;
content: '';
border-width: 0px 15px 15px 15px;
border-style: solid;
border-color: #fff transparent;
height: 0;
width: 0;
}
.form .form-control.toolSearch,
.form .form-control.toolSearch:focus {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-radius: 0;
border: 1px solid #ccc;
border-right: 0;
}
.form .input-group-btn .btn.btn-search,
.form .input-group-btn .btn.btn-search.active {
border-radius: 0;
border: 1px solid #ccc;
border-left: 0;
}
.form .input-group-btn .btn.btn-search:hover,
.form .input-group-btn .btn-search:focus {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 1px solid #ccc;
border-left: 0;
border-radius: 0;
background: #fff;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container div-cntr">
<div class="form-group form">
<div class="input-group input-group-lg">
<input type="text" class="form-control toolSearch" id="toolSearch" name="toolSearch" placeholder="What are you looking for?">
<div class="input-group-btn">
<button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-lg dropdown-toggle filterOptions" type="button"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right dropdown-menu-search">
<li>
<a href="#" class="small" data-value="option1" tabIndex="-1">
<input type="checkbox" /> Option 1</a>
</li>
<li>
<a href="#" class="small" data-value="option2" tabIndex="-1">
<input type="checkbox" /> Option 2</a>
</li>
<li>
<a href="#" class="small" data-value="option3" tabIndex="-1">
<input type="checkbox" /> Option 3</a>
</li>
<li>
<a href="#" class="small" data-value="option4" tabIndex="-1">
<input type="checkbox" /> Option 4</a>
</li>
<li>
<a href="#" class="small" data-value="option5" tabIndex="-1">
<input type="checkbox" /> Option 5</a>
</li>
<li>
<a href="#" class="small" data-value="option6" tabIndex="-1">
<input type="checkbox" /> Option 6</a>
</li>
</ul>
<button role="button" class="btn btn-lg btn-default btn-search"><span class="glyphicon glyphicon-search"></span> Search</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Try:
.input-group .dropdown-toggle.filterOptions {
background: #fff!important;
}
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .open>.dropdown-toggle.btn-default:hover{
background-color: transparent;
}
Try above code
here is the fiddle
https://jsfiddle.net/6qbteca6/
.dropdown-menu {
right: 0;
left: auto;
}
.input-group .dropdown-toggle.filterOptions {
border-left: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
z-index: 5; /* Fix for 2 input-group-btns and this one not being the last-child */
}
.input-group .dropdown-toggle.filterOptions{
background:none !important;
border-color:#ccc !important;
}
.filterOptions:hover,
.filterOptions:active{
background-color: white;
border-color: #ccc;
}
Try by adding this css
.filterOptions:active, .open > .dropdown-toggle.btn-default {
background-color: transparent !important;
border-color: #ccc !important;
}
In the example image you can see the heavy dark lines before and after "Date" and "Name". I am trying to achieve that with CSS. Searched but can't think of what to call it when searching.
.sort-btn-holder{
display: inline-block;
}
.sort-title{
display: block;
text-align: center;
}
<div class="sort-btns pull-right">
<div class="sort-btn-holder">
<span class="sort-title">Date</span>
<button id="desc" class="btn btn-primary" type="button">
<img src="http://williamcunningham.me/abc/img/sortza.jpg" width="24px" height="24px">
</button>
<button id="asc" class="btn btn-primary" type="button">
<img src="http://williamcunningham.me/abc/img/sortaz.jpg" width="24px" height="24px">
</button>
</div>
<div class="sort-btn-holder">
<span class="sort-title">Name</span>
<button id="older" class="btn btn-primary" type="button">
<img src="http://williamcunningham.me/abc/img/sort90.jpg" width="24px" height="24px">
</button>
<button id="newer" class="btn btn-primary" type="button">
<img src="http://williamcunningham.me/abc/img/sort09.jpg" width="24px" height="24px">
</button>
</div>
</div>
I was thinking I should use :before or :after.
Here is a link to the HTML and CSS in a Fiddle: https://jsfiddle.net/dntbqykk/
Here is one way of doing it using absolute positioning and the :after pseudo-element to hold the label ("Date" for example).
The snippet demonstrates a proof-of-concept, but there are still some details to work out to get the exact styling that you may want to blend into your website.
.sort-btn-holder {
border: 1px dotted blue;
display: inline-block;
position: relative;
padding-top: 25px;
}
.btn.btn-primary {
border: 1px dotted red;
width: 50px;
height: 50px;
}
.sort-title {
position: absolute;
z-index: -1;
top: 10px;
left: 25px;
right: 25px;
height: 15px;
border: 4px solid blue;
border-width: 4px 4px 0 4px;
}
.sort-title:after {
content: 'Date';
margin: 0 5px;
position: absolute;
left: 0;
right: 0;
top: -13px;
background-color: white;
text-align: center;
}
<div class="sort-btn-holder">
<span class="sort-title"></span>
<button id="desc" class="btn btn-primary" type="button">
<img src="http://placehold.it/24x24" width="24px" height="24px">
</button>
<button id="asc" class="btn btn-primary" type="button">
<img src="http://placehold.it/24x24" width="24px" height="24px">
</button>
</div>
Not a CSS solution, but did you try using fieldset tag?
I know it's not perfect solution, but it would give you similar effect, and you can adjust border style. After that, you can align those inside boxes. That's probably the easiest way, even though I believe CSS would be able to accomplish this, but using more code.
Here is option with :before and :after pseudo elements and box-shadow
.sort-btn-holder{
display: inline-block;
}
.sort-title{
display: block;
text-align: center;
position: relative;
}
.sort-title:after {
content: '';
position: absolute;
right: 15%;
width: 30px;
top: 60%;
height: 13px;
box-shadow: 5px -5px 0px 0px #000000;
}
.sort-title:before {
content: '';
position: absolute;
left: 15%;
width: 30px;
top: 60%;
height: 13px;
box-shadow: -5px -5px 0px 0px #000000;
}
button {
height: 40px;
width: 65px;
border: none;
background: #29477F;
}
<div class="sort-btns pull-right">
<div class="sort-btn-holder">
<span class="sort-title">Date</span>
<button id="desc" class="btn btn-primary" type="button">
<img src="http://williamcunningham.me/abc/img/sortza.jpg" width="24px" height="24px">
</button>
<button id="asc" class="btn btn-primary" type="button">
<img src="http://williamcunningham.me/abc/img/sortaz.jpg" width="24px" height="24px">
</button>
</div>
<div class="sort-btn-holder">
<span class="sort-title">Name</span>
<button id="older" class="btn btn-primary" type="button">
<img src="http://williamcunningham.me/abc/img/sort90.jpg" width="24px" height="24px">
</button>
<button id="newer" class="btn btn-primary" type="button">
<img src="http://williamcunningham.me/abc/img/sort09.jpg" width="24px" height="24px">
</button>
</div>
</div>