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;
}
Related
So the code below didn't work because the class="btn btn-action hide" is not recognized by the system because it is a custom built class by Firestore rather than a default built-in class in CSS. If that is the case, what should I install to make it work because I've already tried installing everything from Firebase and it still does not work?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Firebase Web Quickstart</title>
<script
src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js">
</script>
</head>
<body>
<div class="container">
<input id="txtEmail" type="email" placeholder="Email">
<input id="txtPassword" type="password" placeholder="Password">
<button id="btnLogin" class="btn btn-action">
Log in
</button>
<button id="btnSignUp" class="btn btn-secondary">
Sign Up
</button>
<button id="btnLogout" class="btn btn-action hide">
Log out
</button>
</div>
<script src="app.js"></script>
</body>
</html>
In the youtube example you've shown, it does not show you the css file. But I think it's using bootstrap from identifying the class name, here is what you can try:
Copy-paste the stylesheet link into your head before all other stylesheets to load our CSS.
<head>
<meta charset="utf-8">
<title>Firebase Web Quickstart</title>
<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">
<script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"></script>
</head>
Please do note this is CDN, you can also download bootstrap yourself and add the file from your local path.
Update, the youtube video is using custom css that looks like bootstrap but it's not...to use bootstrap classes for button, see below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Firebase Web Quickstart</title>
<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">
<script
src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js">
</script>
</head>
<body>
<div class="container">
<input id="txtEmail" type="email" placeholder="Email">
<input id="txtPassword" type="password" placeholder="Password">
<button id="btnLogin" class="btn btn-primary">
Log in
</button>
<button id="btnSignUp" class="btn btn-secondary">
Sign Up
</button>
<button id="btnLogout" class="btn btn-danger" hidden>
Log out
</button>
</div>
<script src="app.js"></script>
</body>
</html>
These are the classes you can use:
https://getbootstrap.com/docs/4.0/components/buttons/
just use the firebase.auth().onAuthStateChanged will get similar purpose with out using bootstrapcdn but at first have to get document element id like below:
const txtEmail = document.getElementById('txtEmail');
const txtPassword = document.getElementById('txtPassword');
const btnLogin = document.getElementById('btnLogin');
const btnSignUp = document.getElementById('btnSignUp');
const btnLogout = document.getElementById('btnLogout');
firebase.auth().onAuthStateChanged(firebaseUser => {
if (firebaseUser) {
console.log(firebaseUser);
btnSignUp.style.display = "none";
} else {
console.log('not logged in');
btnLogout.style.display = "none";
}
})
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
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>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I use bootstrap v.3 and I wanted to make a diferrent button, so I copy all the css classes for btn-primary, renamed to myBigButton and apply my changes. Here works perfect. However in my page the new class 'myBigButton' doesnt exist (when I inspect element from the broswer..)
I have the same code in my page
<div class="container">
<div class="row ">
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block ">aaaaaa</button>
</div>
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block">bbbbbb</button>
</div>
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block">cccccc</button>
</div>
</div>
</div>
any ideas why?
The strangest is that if double write the css class
.myBigBtn {
color: #ffffff;
background-color: #5A6E9E;
border-color:#5A6E9E;
line-height: 100px;
font-size: 23px;
}
.myBigBtn {
color: #ffffff;
background-color: #5A6E9E;
border-color:#5A6E9E;
line-height: 100px;
font-size: 23px;
}
works..
UPDATE
I add all the css file here where it doesn't work either..
Your problem is the comment:
//here is my class
Comments in css are done like this
/* here is my class */
Change the comment to this and it should work
Everything works fine!
Include your CSS file in the <head> after the Bootstrap CSS:
...
<head>
Bootstrap CSS
Custom CSS
</head>
...
HTML should look like this:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BOOTSTRAP TEMPLATE</title>
<!-- Bootstrap CSS -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="body">
<div class="container">
<div class="row ">
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block ">aaaaaa</button>
</div>
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block">bbbbbb</button>
</div>
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block">cccccc</button>
</div>
</div>
</div>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
The custom CSS:
<link rel="stylesheet" href="css/custom.css">
It's good practice to link to an external CSS file.
.myBigBtn and .btn have same prioprity, so styles are applied in order css files are included to page. And so .btn override your styles. That's the most probable cause.
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?