I'm trying to figure out how to seperate buttons which shown below using some spaces like margin with Bootstrap 4.1. I tried btn-toolbar on the wrapper div also wrapped each button with btn-group but no way to get a result.
Is there an easy way to handle this with Bootstrap 4.1 or Should i use some css?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button _ngcontent-c5="" class="btn btn-success" type="submit">Add</button><button _ngcontent-c5="" class="btn btn-danger" type="button">Delete</button><button _ngcontent-c5="" class="btn btn-primary" type="button">Clear</button>
</div>
</body>
</html>
Use the spacing utils. For example mr-1 means margin right 1 spacer unit...
<div class="container">
<button _class="btn btn-success mr-1" type="submit">Add</button><button class="btn btn-danger mr-1" type="button">Delete</button><button class="btn btn-primary" type="button">Clear</button>
</div>
Related: How do I use the Spacing Utility Classes on Bootstrap 4
Related
I'm using reactstrap in my React component. I want to float-right a button but this doesn't seem to work:
<td class="col-md-4 clearfix">
<Button className="float-right" color="warning" size="sm"><FontAwesomeIcon icon={faTrashAlt} /> Delete</Button>
</td>
I also tested as told here with clearfix in parent, but didn't work:
<td class="col-md-4 clearfix">
<button className="btn btn-danger float-right">Delete</button>
</td>
Is it reactstrap or is there anything I can't see?
UPDATE
I found out that text-right works for texts, but not for button.
table{
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<table>
<tr>
<td class="col-md-4">
<button class="float-right" >Delete</button>
</td>
</tr>
</table>
</body>
</html>
I use the following code to make checkbox buttons: JSBin:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-default active">INPUT</button>
</div>
</body>
</html>
I don't like the 3D effect of the background of the button:
I would prefer the SAME gray colour as the background. Does anyone know how to realise this?
PS: I would like to stick to using <button> rather than <input> and <a>.
The problem I have with Bootstrap is you constantly need to override their default styling and you have to be very specific about how you target the element, otherwise Bootstrap will override your css. (Or you can put !important beside everything -> not advised)
Anyways, rant over, the 3d effect you are seeing is a box shadow. Simply set the box shadow to none.
button.btn.btn-default {
background: #e0e0e0;
box-shadow: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-default active">INPUT</button>
</div>
</body>
</html>
I am using the Bootstrap framework with SB Admin 2 theme for an application, having some buttons, eg:
<button class="btn btn-primary btn-circle btn-outline btn-xl">UV</button>
<button class="btn btn-primary btn-circle btn-xl">Kl S</button>
<button class="btn btn-primary btn-circle btn-outline btn-xl">Kl 15</button>
This is, how they should be displayed (and actually are in Firefox) with correct text alignment (sorry, I cannot post images yet):
http://i123.photobucket.com/albums/o308/spinfun/firefox2.jpg
This is, what Chrome displays:
http://i123.photobucket.com/albums/o308/spinfun/chrome2.jpg
So my question is: How can I make Chrome display those buttons with horizontally centered text?
EDIT: I have setup a real basic page with just those 3 buttons.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- custom CSS SB Admin-->
<link rel="stylesheet" href="http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css">
</head>
<body>
<button class="btn btn-primary btn-circle btn-outline btn-xl">UV</button>
<button class="btn btn-primary btn-circle btn-xl">Kl S</button>
<button class="btn btn-primary btn-circle btn-outline btn-xl">Kl 15</button>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- SB Admin Theme -->
<script src="http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js"></script>
</body>
</html>
The button texts are simply not displayed horizonztally centered in Chrome on each of the computers I use.
Without the SB Admin css the alignment is correct, but the buttons of course are not circular. So the problem has to be somewhere within the SB Admin stuff.
You will need to overwrite this class into your custom CSS file.
CSS
.btn-circle.btn-xl {
padding: 10px 0;
}
SB Admin v2.0 theme has some predefined CSS which is causing the problem.
following class is having padding: 10px 16px; into its sb-admin-2.css file
.btn-circle.btn-xl {
padding: 10px 16px;
}
I'm using Twitter bootstrap's bootstrap.min.css for styling my phonegap app. But I do not see the desired UI of DOM elements affected by bootstrap. For example, in Base CSS it is shown that btn btn-primary classed button is colored blue and has some gradient on it. Looks nice. But this thing looks so ugly gray colored if I run this on emulator. Why is that so? Isn't bootstrap good for phonegap?
ADDING CODE AND SCREENSHOT
<!DOCTYPE HTML>
<html>
<head>
<title>Call the cab</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/custom.css" type="text/css">
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/heartcode.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.0.0.js"></script>
</head>
<body onload="onLoad();initialize()">
<div id="wrapper" class="container row-fluid ">
<div id="headerdiv" class="span12">
<header style="vertical-align:middle;">
<h1>App Name</h1>
</header>
</div><!--End of header-->
<div id="inputs" class="row-fluid">
<form action="file:///android_asset/www/pickup.html" onsubmit="return saveInputs()" class="form-inline form-actions">
<input type="text" id="pickup" onblur="unlockDestiny();codeAddress(this.value)" class="input-block-level"/>
<input type="text" id="destiny" onblur="codeAddress(this.value)" class="input-block-level"/>
<label class="checkbox">
<input type="checkbox" value="">
Remember this
</label>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div><!--End of inputs-->
</div><!--End of wrapper-->
</body>
</html>
Have you double checked that the path to the CSS files is correct, and that there's nothing in css/custom.css that is overriding the Bootstrap button styling?
Is it possible to have a textbox and a button horizontally using JQuery Mobile?
using data-inline="true" works for buttons but not when mixed with button and textbox.
data inline example
data-type="horizontal" also didn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>
<script type="text/javascript">
$(document).ready(function(){
$("#clearMeClearMe").click(function(){
//$(this).hide();
$("#clearMe22").val("");
});
});
</script>
<body>
<div data-role="page">
<div data-role="header">
<h1>Textbox Clear Demo</h1>
</div><!-- /header -->
<div id="content">
<input type="text" id="clearMe22" data-inline="true" name="clearMe22"/>
<a href="#" data-role="button" data-icon="delete"
data-iconpos="notext" id="clearMeClearMe">Clear</a>
</div>
</div><!-- /page -->
</body>
</html>
Seems to work best for me when I float the button right and restrict the width of the text input:
<span>
<input style="width:90%;display:inline-block" type="text" id="clearMe22" data-inline="true" name="clearMe22" />
<a style="float:right" href="#" class="ui-input-clear" data-role="button" data-icon="delete"
data-iconpos="notext" id="clearMeClearMe">Clear</a>
</span>
http://jsfiddle.net/xeyyr/1/
But someone else might be able to provide a more elegant CSS solution.
I'm trying to find a similar solution for a custom button, but in your case I believe you can use the built-in methods for data clear ('data-clear-btn'). You can find this documented here:
http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/textinputs/
and would look like:
<input data-clear-btn="true" name="text-3" id="text-3" value="" type="text">