Cannot alter Bootstrap button - css

<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>

Related

Bootstrap button text is not responsive

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>

Modal Footer-Ajax message centering in the modal footer

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 to make <h4> element on the same line with buttons?

I have this HTML:
<h4><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
How can I make <h4> element on the same row with the buttons on the right side?
You have to add the following CSS for the heading <h4>:
h4 {
display:inline-block;
float:left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h4><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
The default value of the display property is block so the heading (<h4>) takes the full width of the parent container. With display: inline-block the heading takes only the space needed.
Bootstrap 3.3
You can set the class .pull-left to the <h4> element. So you don't need additional CSS rules:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h4 class="pull-left"><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
Bootstrap 4.0+
Since Bootstrap 4.0 you have to use .float-left instead of .pull-left:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<h4 class="float-left"><span class="label label-default">1546 - some text</span></h4>
<div class="float-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
You have to add some CSS for h4 and pull-left-class:
h4{
display: inline-block;
}
.pull-left{
display: inline-block;
}
example:
https://jsfiddle.net/y6f0ddLg/

Bootstrap button group inside vertical button group

I'd like to create a vertical button group, containing a horizontal button group, and a few buttons inside. My attempt looks like this:
<div class="btn-group-vertical">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="width : 60%">Row 1.1</button>
<button type="button" class="btn btn-primary" style="width : 40%">Row 1.2</button>
</div>
<button type="button" class="btn btn-primary">Row 2</button>
<button type="button" class="btn btn-primary">Row 3</button>
</div>
I want button Row 1.1 and Row 1.2 to be in one row.
Enclose your button group in a row class:
<div class="row">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="width : 60%">Row 1.1</button>
<button type="button" class="btn btn-primary" style="width : 40%">Row 1.2</button>
</div>
</div>
Check the Codepen. You might wanna change the width/border the way you want it.
EDIT
As for the buttons not being rounded, here's the class responsible for it, you can change it:
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
From bootstrap.css, the btn class has a border-radius: 4px :
.btn {
...
border: 1px solid transparent;
border-radius: 4px;
}
You can either remove all the radius or change the second button to have the same border-radius
New Codepen

fontawesome icon not rendering the same in Chrome and Firefox

In Chrome/Safari my icon within a bootstrap button looks fine:
But in Firefox, the icon drops down a line:
I have the fontawesome icon floated right within the <button>.
<!--html-->
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-small">Cached logs<i class="fa fa-money"></i></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-small">Logs on mount<i class="fa fa-database"></i></button>
</div>
</div>
<!--style-->
i.fa {
float: right;
top: 2px;
position: relative;
font-size: 12pt;
}
.glyphicon, i.fa {
color: rgb(90, 90, 90);
top: 1px;
}
How can I make the Firefox version one-line like the Chrome?
JSBIN
Move the icon to the left of the text. I'm not sure of the underlying cause of it not being consistent how you've got it - but this does make both browsers render it consistently.
<button type="button" class="btn btn-default btn-small"><i class="fa fa-database"></i>Logs on mount</button>
Instead of
<button type="button" class="btn btn-default btn-small">Logs on mount<i class="fa fa-database"></i></button>

Resources