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>
Related
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>
I am working on this demo. I am not sure why I not able to set the width of #input-box to 0. I am trying to hide this container and animate the width of that to required size as it is requested but I can not properly set the width to 0
body {
padding: 30px;
}
#input-box{
width:0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary" id="input-box">
<div class="input-group m-0">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">Zip Zode</span>
</div>
</div>
</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
You also need to set the following CSS properties:
body {
padding: 30px;
}
#input-box {
width: 0px;
padding: 0;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary" id="input-box">
<div class="input-group m-0">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">Zip Zode</span>
</div>
</div>
</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
Padding of button
#input-box{
width:0px;
padding:0;
}
Is this what you would like it to look like?screenshot
If so, you need to specify some other css properties:
#input-box{
width:0px;
padding: 0;
margin: 0;
border: 0;
}
<button class="btn btn-default">Click me</button>
I want to alter this button by reducing it's padding to 0px, so I added an extra class no-padding in style.css
.no-padding {
padding-left: 0;
padding-right: 0;
}
and called it like
<button class="btn btn-default no-padding">Click me</button>
But still I'm getting the same class
and If I use inline style statement, it works perfectly, but I don't want to do it in that way
Thanks!!
for that you need to know specificity concept of CSS
you can do like this
button.no-padding {
padding-left: 0;
padding-rigt: 0;
}
and your CSS works fine. You see difference in below snippet
button.no-padding {
padding-left: 0;
padding-right: 0;
}
.no-padding1 {
padding-left: 0;
padding-right: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button class="btn btn-default no-padding">Click me</button>
<button class="btn btn-default no-padding1">Click me</button>
You can use Bootstrap padding classes.
1 > px : padding at left and right. 2 > py : padding at top and
botton.
See more examples given below
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
Your Button as it is :
<button class="btn btn-default ">Click me</button>
<br/>
<br/>
Button with px class :
<button class="btn btn-primary px-0">Click me</button>
<br/>
<br/>
Button with py class
<button class="btn btn-warning py-0">Click me</button>
<br/>
<br/>
Button with px and py class :
<button class="btn btn-success px-0 py-0">Click me</button>
<br/>
<br/>
Button with pl class
<button class="btn btn-danger pl-0">Click me</button>
<br/>
<br/>
Button with pr class :
<button class="btn btn-success pr-0">Click me</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;
}
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
}
}