I'm having a problem. I set up my css by setting the buttons side by side, only it's not working.
#btn1, #btn2, #btn3{
width: 200px;
height: 40px;
}
<a class="btn btn-success" id="btn1" href="{{route('wineshop.edit', compact('wineshop'))}}">EDIT</a>
<form action="{{route('wineshop.destroy', compact('wineshop'))}}" method="post">
#method('delete')
#csrf
<button type="submit" id="btn2" class="btn btn-danger">DELETE</button>
</form>
<a class="btn btn-primary" id="btn3" href="{{route('wineshop.index')}}">BACK</a>
Can anyone kindly help me?
Set with Outer div Flex Style
#btn1, #btn2, #btn3
{
width: 200px;
height: 40px;
}
.btn_outer {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
<div class="btn_outer">
<a class="btn btn-success" id="btn1" href="{{route('wineshop.edit', compact('wineshop'))}}">EDIT</a>
<form action="{{route('wineshop.destroy', compact('wineshop'))}}" method="post">
#method('delete')
#csrf
<button type="submit" id="btn2" class="btn btn-danger">DELETE</button>
</form>
<a class="btn btn-primary" id="btn3" href="{{route('wineshop.index')}}">BACK</a>
</div>
Related
I tried many things to get the button text responsive, but it is not working.
Here's my html code
<button style="margin-top : 5px;"
type="submit" class="btn btn-primary cd-admin-create-modal-btn" ng-disabled = "form.$invalid"
ng-click="submitRouterDtls(router);">Submit
</button>
<button style="margin-top : 5px;"
type="submit" class="btn btn-primary cd-admin-create-modal-btn"
ng-click="cancelOperation();">Cancel
</button>
Here's my css code
.cd-admin-create-modal-btn {
width: 5vw;
margin: 0 1vw;
font-size : 1.5vw;
}
Can someone help me?
try it
.cd-admin-create-modal-btn {
min-width: 10vw;
margin: 0 1vw;
font-size : 1.5vw;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<button style="margin-top : 5px;"
type="submit" class="btn btn-primary cd-admin-create-modal-btn" ng-disabled = "form.$invalid"
ng-click="submitRouterDtls(router);">Submit
</button>
<button style="margin-top : 5px;"
type="submit" class="btn btn-primary cd-admin-create-modal-btn"
ng-click="cancelOperation();">Cancel
</button>
I have this modal footer with a <label></label> which displays message on successful operation. But, the properties are inherited so the style for centering is not working. I am using Bootstrap 3.3.7
<div class="modal-footer">
<label type="text" id="resultmessage" style="color: white; vertical-align:middle;"></label>
<button type="button" id="updateWorksStatus" class="btn btn-success btn-sm">Update Status</button>
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>
Add a more specific CSS selector to override bootstrap styles (.modal-footer is set to text-align: right by default.).
div.modal-footer {
text-align: center;
}
Also, you can switch label order to last element inside of .modal-footer if you wish for it to be on the right side of buttons (changed color to gray just for visibility).
Snippet:
div.modal-footer {
text-align: center;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="modal-footer">
<button type="button" id="updateWorksStatus" class="btn btn-success btn-sm">Update Status</button>
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
<label type="text" id="resultmessage" style="color: gray; vertical-align:middle;">Database updated</label>
</div>
If you wish to only center the message, you can do (tweak values to your benefit):
.modal-footer button {
margin-top: -48px;
}
#resultmessage {
display: inline-block;
width: 100%;
text-align: center;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="modal-footer">
<label type="text" id="resultmessage" style="color: gray; vertical-align:middle;">Database updated</label>
<button type="button" id="updateWorksStatus" class="btn btn-success btn-sm">Update Status</button>
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>
In my opinion, using label as not label for nothing is not good pratice. I'm quessing that u want this information ('Database updated') aligne vertically (you have tried to use vertical-align - it only works for tables). Instead of using label, better is to use for example span.
I did it like below:
https://codepen.io/Czeran/pen/BdWbjg
HTML
<div class="modal-footer">
<span id="resultmessage">Database updated</span>
<div class="tools">
<button type="button" id="updateWorksStatus" class="btn btn-success btn-sm">Update Status</button>
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>
<span></span>
</div>
CSS (edited)
.modal-footer {
position: relative;
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: center;
}
#resultmessage {
font-weight: bold;
}
.tools {
position: absolute;
right: 15px;
}
How would you let bootstrap self-spread buttons to 100% width of their parent, without adjusting each of the button's width separately ?
for example if i have 8 buttons, 100% containers width / 8 buttons = 12% width for each button.
i would like to:
avoid specifying each button's width (today i got 8 tomorrow i'll
have 20).
adjusting the whole .btn-group's child buttons to the center (if you pay close attention you'll see the buttons inside the container are left-aligned for some reason).
.btn-group {
width: 100%;
}
.btn-group>input.btn {
width: 12%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container panel panel-default">
<div class="btn-group">
<input type="button" class="btn btn-primary btn-responsive" value="A" />
<input type="button" class="btn btn-primary btn-responsive" value="AB" />
<input type="button" class="btn btn-primary btn-responsive" value="ABC" />
<input type="button" class="btn btn-primary btn-responsive" value="ABCD" />
<input type="button" class="btn btn-primary btn-responsive" value="ABCDE" />
<input type="button" class="btn btn-primary btn-responsive" value="ABCD" />
<input type="button" class="btn btn-primary btn-responsive" value="ABC" />
<input type="button" class="btn btn-primary btn-responsive" value="AB" />
</div>
<br/>
<br/>
<br/>
<p>the buttons above don't take full width of the container</p>
</div>
Example CSS:
.btn-group {
width: 100%;
}
.btn-group>input.btn {
width: 12%;
}
Codepen
This effect is easiest achieved with flexbox.
.btn-group {
display: flex;
justify-content: center;
}
.btn-group > input.btn {
flex-grow: 1;
}
Depending on your what browers you target you might want to prefix
HTML added .row inside grid which will allow you to reach 100%.
no I have added .col-xs-12 inside .row which might not be necessary but i have tried to follow what bootstrap gives ie container > row > column.
additions .. make .btn-group to be .btn-block too, it spans it 100%.
<div class="container panel panel-default">
<div class="row">
<div class="col-xs-12 no-padding">
<div class="btn-group btn-block my-btn-group">
<input type="button" class="btn btn-primary btn-responsive" value="A"/>
<input type="button" class="btn btn-primary btn-responsive" value="AB"/>
<input type="button" class="btn btn-primary btn-responsive" value="ABC"/>
<input type="button" class="btn btn-primary btn-responsive" value="ABCD"/>
<input type="button" class="btn btn-primary btn-responsive" value="ABCDE"/>
<input type="button" class="btn btn-primary btn-responsive" value="ABCD"/>
<input type="button" class="btn btn-primary btn-responsive" value="ABC"/>
<input type="button" class="btn btn-primary btn-responsive" value="AB"/>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<p>the buttons above don't take full width of the container</p>
</div>
CSS : i have removed padding from 'column' and removed margin from buttons insided button group
.btn-group>input.btn {
width:12.5%;
}
.no-padding {
padding-left: 0 !important;
padding-right: 0 !important;
}
.my-btn-group .btn+.btn {
margin-left: 0px;
}
If using Flexbox isn't the best option for your use case then you can use a table layout. Another advantage is the control you have with regard to responsive behavior since the default btn-group doesn't offer much in this regard.
These elements behave like <table> HTML elements. It defines a
block-level box.
Basic Example: Run with FullPage
/*Basic Rules*/
.panel-btn {
width: 100%;
display: table;
}
.panel-btn div {
display: table-cell;
}
.panel-btn div .btn {
float: none;
width: 100%;
border-radius: 0;
}
/*Rounded Corner Rules*/
.panel-btn div:first-of-type .btn {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.panel-btn div:last-of-type .btn {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<h2>11 Buttons</h2>
<div class="panel panel-default panel-btn">
<div>
<input type="button" class="btn btn-primary" value="A" />
</div>
<div>
<input type="button" class="btn btn-primary" value="AB" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABC" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCD" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEF" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFG" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFGH" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFGHI" />
</div>
<div>
<input type="button" class="btn btn-primary" value="1" />
</div>
<div>
<input type="button" class="btn btn-primary" value="12" />
</div>
<div>
<input type="button" class="btn btn-primary" value="123" />
</div>
</div>
</div>
Responsive Example: Run with FullPage and reduce the browser window
/*Basic Rules*/
.panel-btn {
width: 100%;
display: table;
}
.panel-btn div {
display: table-cell;
}
.panel-btn div .btn {
float: none;
width: 100%;
border-radius: 0;
}
/*Rounded Corner Rules*/
.panel-btn div:first-of-type .btn {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.panel-btn div:last-of-type .btn {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
/*Responsive CSS*/
#media screen and (max-width: 850px) {
.panel-btn div {
width: 50%;
}
.panel-btn div:nth-child(even) {
float: right;
}
.panel-btn div:nth-child(odd) {
float: left;
}
.panel-btn div:last-child:not(:nth-child(even)) {
width: 100%;
display: block;
}
/*Rounded Corner Rules*/
.panel-btn div:first-of-type .btn {
border-bottom-left-radius: 0px;
border-top-left-radius: 4px;
}
.panel-btn div:nth-child(2) .btn {
border-top-right-radius: 4px;
}
.panel-btn div:last-of-type .btn {
border-bottom-right-radius: 4px;
border-top-right-radius: 0px;
}
.panel-btn div:last-child:not(:nth-child(even)) .btn {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.panel-btn div:nth-last-child(2):not(:nth-child(even)) .btn {
border-bottom-left-radius: 4px;
}
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<h2>11 Buttons</h2>
<div class="panel panel-default panel-btn">
<div>
<input type="button" class="btn btn-primary" value="A" />
</div>
<div>
<input type="button" class="btn btn-primary" value="AB" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABC" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCD" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEF" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFG" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFGH" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFGHI" />
</div>
<div>
<input type="button" class="btn btn-primary" value="1" />
</div>
<div>
<input type="button" class="btn btn-primary" value="12" />
</div>
<div>
<input type="button" class="btn btn-primary" value="123" />
</div>
</div>
<br/>
<h2>10 Buttons</h2>
<div class="panel panel-default panel-btn">
<div>
<input type="button" class="btn btn-danger" value="123456789" />
</div>
<div>
<input type="button" class="btn btn-danger" value="12345678" />
</div>
<div>
<input type="button" class="btn btn-danger" value="1234567" />
</div>
<div>
<input type="button" class="btn btn-danger" value="123456" />
</div>
<div>
<input type="button" class="btn btn-danger" value="12345" />
</div>
<div>
<input type="button" class="btn btn-danger" value="1234" />
</div>
<div>
<input type="button" class="btn btn-danger" value="123" />
</div>
<div>
<input type="button" class="btn btn-danger" value="12" />
</div>
<div>
<input type="button" class="btn btn-danger" value="1" />
</div>
<div>
<input type="button" class="btn btn-danger" value="A" />
</div>
</div>
<br/>
<h2>9 Buttons</h2>
<div class="panel panel-default panel-btn">
<div>
<input type="button" class="btn btn-success" value="A" />
</div>
<div>
<input type="button" class="btn btn-success" value="AB" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABC" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABCD" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABCDEF" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABCDEFG" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABCDEFGH" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABCDEFGHI" />
</div>
<div>
<input type="button" class="btn btn-success" value="1" />
</div>
</div>
<br/>
<h2>20 Buttons</h2>
<div class="panel panel-default panel-btn">
<div>
<input type="button" class="btn btn-warning" value="1" />
</div>
<div>
<input type="button" class="btn btn-warning" value="2" />
</div>
<div>
<input type="button" class="btn btn-warning" value="3" />
</div>
<div>
<input type="button" class="btn btn-warning" value="4" />
</div>
<div>
<input type="button" class="btn btn-warning" value="5" />
</div>
<div>
<input type="button" class="btn btn-warning" value="6" />
</div>
<div>
<input type="button" class="btn btn-warning" value="7" />
</div>
<div>
<input type="button" class="btn btn-warning" value="8" />
</div>
<div>
<input type="button" class="btn btn-warning" value="9" />
</div>
<div>
<input type="button" class="btn btn-warning" value="10" />
</div>
<div>
<input type="button" class="btn btn-warning" value="11" />
</div>
<div>
<input type="button" class="btn btn-warning" value="12" />
</div>
<div>
<input type="button" class="btn btn-warning" value="13" />
</div>
<div>
<input type="button" class="btn btn-warning" value="14" />
</div>
<div>
<input type="button" class="btn btn-warning" value="15" />
</div>
<div>
<input type="button" class="btn btn-warning" value="16" />
</div>
<div>
<input type="button" class="btn btn-warning" value="17" />
</div>
<div>
<input type="button" class="btn btn-warning" value="18" />
</div>
<div>
<input type="button" class="btn btn-warning" value="19" />
</div>
<div>
<input type="button" class="btn btn-warning" value="20" />
</div>
</div>
</div>
I have multiple "POST" buttons (empty forms with a single submit button) to handle some actions which have side-effects. I need to make these buttons appear as a Bootstrap button group (.btn-group) as if they were a tags with a .btn class applied.
My first idea was to reproduce all the css styles Bootstrap uses for .btn-groups but with a form child element instead of .btn. Well it turns out there are a lot of styles involved! I'm hoping there's another solution. I included the very first basic style needed to have buttons in a single line in the snippet. Many more styles are needed to manage the borders, rounded corners, etc.
.btn-group.try1 > form {
position: relative;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h1>Doesn't work</h1>
<div class="btn-group">
<form method="post" action"./action1">
<button type="submit" class="btn btn-danger">Action with side-effect 1</button>
</form>
<form method="post" action"./action2">
<button type="submit" class="btn btn-default">Action with side-effect 2</button>
</form>
<form method="post" action"./action3">
<button type="submit" class="btn btn-warning">Action with side-effect 3</button>
</form>
</div>
<h1>Desired appearance</h1>
<div class="btn-group">
Action with side-effect 1
Action with side-effect 2
Action with side-effect 3
</div>
<h1>Attempt 1</h1>
<div class="btn-group try1">
<form method="post" action"./action1">
<button type="submit" class="btn btn-danger">Action with side-effect 1</button>
</form>
<form method="post" action"./action2">
<button type="submit" class="btn btn-default">Action with side-effect 2</button>
</form>
<form method="post" action"./action3">
<button type="submit" class="btn btn-warning">Action with side-effect 3</button>
</form>
</div>
Why do I use forms?
actions with side-effects should use POST.
I'd rather not use javascript to POST where vanilla HTML works just fine.
You can create a class modifier and use it with bootstrap's .form-group class.
.form-group--flex {
display: flex;
flex-wrap: wrap;
}
.form-group--flex button {
border-radius: 0;
}
Then for the border-radius you can use pseudo-selectors.
.form-group--flex form:first-of-type button {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-group--flex form:last-of-type button {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
Code Snippet:
.form-group--flex {
display: flex;
flex-wrap: wrap;
}
.form-group--flex button {
border-radius: 0;
}
.form-group--flex form:first-of-type button {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-group--flex form:last-of-type button {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group form-group--flex">
<form method="post" action "./action1">
<button type="submit" class="btn btn-danger">Action with side-effect 1</button>
</form>
<form method="post" action "./action2">
<button type="submit" class="btn btn-default">Action with side-effect 2</button>
</form>
<form method="post" action "./action3">
<button type="submit" class="btn btn-warning">Action with side-effect 3</button>
</form>
</div>
Notes:
The only thing that bootstrap's class .form-group does is add a margin bottom.
.form-group {
margin-bottom: 15px;
}
I've used a normal bootstrap 3 button group in a size one column, e.g.
<div class="col-sm-1">
<div class="btn-group">
<button class="btn btn-default"><span class="glyphicon glyphicon-home"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-off"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
</div>
</div>
This is vertical when there is space, but when it drops to a new row it becomes horizontal. My only problem is that when vertical it looks a bit odd. I've tried playing with the CSS to no avail, does anyone have advice? I don't mind making it fully square so horizontal/vertical are similar, but my efforts to do this have not worked
If fully square buttons are ok to you, something like this should work:
CSS:
#group button:first-child, #group button:last-child {
border-radius: 0;
}
#group button:first-child {
margin-left: -1px;
}
HTML:
<div class="col-sm-1">
<div id="group" class="btn-group">
<button class="btn btn-default"><span class="glyphicon glyphicon-home"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-off"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
</div>
</div>
I had created something like this before.
DEMO: http://jsbin.com/vahaq/1/
Assumes vertical on 768px and up, which is what it is, so I've just modified the styles below that min-width.
HTML (same as yours but with btn-group-vertical and btn-group-custom)
<div class="col-sm-1">
<div class="btn-group-vertical btn-group-custom">
<button class="btn btn-default"><span class="glyphicon glyphicon-home"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-off"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
</div>
</div>
This is more elaborate as it kicks in and kicks off for really good responsiveness:
#media (max-width:299px) {
.btn-group-vertical.btn-group-custom > .btn {
float: left;
width: auto;
width: 25%;
min-height: 50px;
min-width: 50px;
margin-top: -1px!important;
}
.btn-group-vertical.btn-group-custom .btn + .btn {
margin-left: -1px;
margin-top: 0;
}
.btn-group-vertical.btn-group-custom > .btn:first-child {
margin-top: 0;
margin-left: -1px;
border-radius: 0;
}
.btn-group-vertical.btn-group-custom > .btn:last-child {
border-radius: 0
}
}
#media (min-width:300px) and (max-width:767px) {
.btn-group-vertical.btn-group-custom > .btn {
float: left;
width: auto;
border-top: 1px solid #ccc;
}
.btn-group-vertical.btn-group-custom .btn + .btn {
margin-left: -1px;
margin-top: 0;
}
.btn-group-vertical.btn-group-custom > .btn:first-child {
border-radius: 4px 0 0 4px
}
.btn-group-vertical.btn-group-custom > .btn:last-child {
border-radius: 0 4px 4px 0
}
}