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.
Related
I am making a bootstrap site for my sister and everytime i want to change css it works or 90% of the time it don't work.
I made a new file "style.css" to overwrite bootstrap i placed it under all the other tags in my and it still doesn't work can someone explain please?
Thanks
EDIT:
<section class="bg-primary text-white mb-0" id="about">
<div class="container">
<h2 class="text-center text-uppercase text-white">About</h2>
<hr class=" mb-5">
<div class="row">
<p class="lead">some text...</p>
<p class="lead">some text...</p>
</div>
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light" href="#">
<i class="fas fa-download mr-2"></i>
Download Now!
</a>
</div>
</div>
</section>
than i have in the bootstrap css file this line:
section{
padding: 6rem 0;
}
I want to change that to 9 rem so in my custom css file:
section{
padding: 9rem 0;
}
i does nothing ): and that is just one example maybe i do something very very stupid but i don't think so. and its not the cache.
head:
<head>
<!--there is some more here but not nessecary-->
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- tab icon -->
<link rel="icon" href="img/logo_1.png">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
<!--icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom styles for this template -->
<link href="css/freelancer.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
Thanks
Maybe your webpage is still cached, try to hit ctrl + f5 to check if it is presesting.
Otherwise just use the !important keyword in your css styles. down below you will find an example of how to use an !important statement.
.row {
padding: 15px !important;
margin: 10px auto !important;
}
An important statement overwrites files even if they come after the execution stack of the dom.
Here is some more information of the usage : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Selector_Types
Edit:
Be aware that the import keyword is hard to work around with when you want to change this later, for your specific case it would be fine. But if it is for bigger clients and projects, watch your important keywords ;).
Using your same imports I don't see Bootstrap's CSS having any paddings on the section tag, the styles you defined are applying correctly, maybe it's a different stylesheet that's causing this?
Also note you are importing Bootstrap CSS twice, and maybe for different versions of it? Try deleting the import you are not using. In fact, try deleting one css import at a time to see when the problem goes away, that'll at least help you find which stylesheet is overriding your styles
section {
padding: 9rem 0;
}
<head>
<!--there is some more here but not nessecary-->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!--icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<section class="bg-primary text-white mb-0" id="about">
<div class="container">
<h2 class="text-center text-uppercase text-white">About</h2>
<hr class=" mb-5">
<div class="row">
<p class="lead">some text...</p>
<p class="lead">some text...</p>
</div>
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light" href="#">
<i class="fas fa-download mr-2"></i> Download Now!
</a>
</div>
</div>
</section>
How do I stop labels from pushing down inputs when the browser window is small? (Please see example)
I have tried using text-nowrap, but that just causes the labels to overlap.
What's a good Bootstrap way, or Bootstrap design approach to avoid this type of thing?
I need the inputs to remain in a horizontal row. I have to use a label, and I can't shorten the actual words (That would fix my problems, but I can't do that in this implementation). ALSO, there are more inputs on this row to the right not displayed in this example, so I cannot adjust col-
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<section class="mt-2">
<div class="form-row">
<div class="form-group col-3">
<label for="LastPayDate">Last Pay Date</label>
<input id="LastPayDate" name="LastPayDate" class="form-control" type="text">
</div>
<div class="form-group col-3">
<label for="BasePay">Base Pay</label>
<input id="BasePay" name="BasePay" class="form-control" type="text">
</div>
</div>
</section>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You See there is no proper way other then you given it a proper width in which the whole label can reside .
All you can do is increase the column width and it will work fine .
try add CSS to the label element so all labels will be equal
label{
background-color: green;
margin-top: 10px;
margin-left: 11%;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
width: 100px;
cursor: pointer;
}
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 Dompdf to export an HTML page to PDF. I am using some Font Awesome icons that are displayed in the HTML file itself, but in the resulting PDF, there are question marks instead of icons.
Here is part of the HTML code:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Some title</title>
<!-- Latest compiled and minified CSS - Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="http://domain.com/public/assets/css/font-awesome-4.6.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- -->
<div id="wrapper" > <div id="page-wrapper"> <div class="container-fluid">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div class="panel panel-default panel-table">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12">
<div class="bs-callout bs-callout-primary">
<h4>Contact name</h4>
<ul>
<li><span class="fa fa-envelope"></span> <strong>Email</strong>: some#mail.com</li>
<li><span class="fa fa-phone"></span> <strong>Telephone</strong>: 0000-0000</li>
<li><span class="fa fa-location-arrow"></span> <strong>Location</strong>: Address</li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel-body">
<!-- A table goes here -->
</div> </div>
</div>
</div>
</div>
</div>
</div><!-- .wrapper -->
</body>
</html>
Those icons are not displayed, only questions marks instead in the PDF:
<li><span class="fa fa-envelope"></span> <strong>Email</strong>: some#mail.com</li>
<li><span class="fa fa-phone"></span> <strong>Telephone</strong>: 0000-0000</li>
<li><span class="fa fa-location-arrow"></span> <strong>Location</strong>: Address</li>
How do I fix this?
Dompdf is not correctly parsing the FontAwesome stylesheet, causing it to read the font family incorrectly (why not post a bug report?).
You can work around the issue for now by redefining the fa class after you include the FontAwesome stylesheet.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<style type="text/css">
.fa {
display: inline;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 14px;
line-height: 1;
font-family: FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<p><span class="fa fa-envelope"></span> envelope</p>
</body>
</html>
If you compare this styling with the official one you'll notice that I changed the display type. Up to and including dompdf 0.7.0 auto-calculated widths are not supported and any block element (block, inline block) is given 100% width of its container. I've changed the display styling, but you could give it a fixed width instead, e.g. width: 1.25em;. I haven't done enough testing to know which one results in the fewest adverse affects.
I have figure out and came into conclusion. here is the one line statement that you can use to show font awesome icons in dompdf.
<span style="font-family: FontAwesome"></span>
I used puppeteer for the html to pdf conversion. I faced the same problem of the fontawesome icons not uploading to the pdf. So when I used slowMo : , it worked like a charm !
const browser = await htmltopdf.launch({headless: true, slowMo: 150});
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?