I'm trying to use Bootstrap's btn-outline-primary class to make a nice looking button like this
However, when I try and do that in my HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
</body>
</html>
The buttons come out solid
and I don't know why. Any help would be greatly appreciated.
btn-outline-primary is only available in Bootstrap v4 and you have 3.3.7 loaded. Try giving v4 a whirl to see if it works.
See this bootply and switch between 3.3.7 and alpha v4 to demo.
Are you using the right bootstrap version? btn-outline-primary is available only in Bootstrap v4. If you are using older versions, it will not work.
Related
I am new in bootstrap
I made a new page and this is my page (there is not content on it!)
<!DOCTYPE html>
<html lang = "fa">
<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>TEST</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style/index.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container">
<a class="fa fa-ban">Test ban</a>
</div>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
As you see I have an <a> element and it has a font-awesome class, I mean fa fa-ban, but it is not working!
What is the problem?
This works for me: https://jsfiddle.net/smit_patel/teg7kfc4/
Work fine in by this Tag.
<a><i class="fa fa-2x fa-ban"></i>Test ban</a>
try use <i> tag inside <a>
<i class="fa fa-ban"></i>Test ban
You cannot directly use the classes inside <a> tag i suspect.
So this
<a class="fa fa-ban">Test ban</a>
must be replaced with
<i class="fa fa-ban"></i>Test ban
This works for me: https://jsfiddle.net/fka3gp1b/
I would perhaps reformat your code slightly so that the font awesome icon is a child of the anchor element as follows:
<i class="fa fa-ban"></i>Test ban
Similarly, using a span tag works just as well:
<span class="fa fa-ban"></span>Test ban
Now I found the answer myself.
As you see there is a link to index.css, I had a little bad code in my index.css that is:
*, *:after, *:before{
box-sizing: inherit;
}
*, * *,{
/* Set your content font stack here: */
font-family: 'arad', Times, "Times New Roman", serif !important;
}
When I removed that, it is working correctly now!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<p>akdsjfhalsdhjflashdfklasjhdfkljashdfakdsjfhalsdhjflashdfklasjhdfkljashdfakdsjfhalsdhjflashdfklasjhdfkljashdf
akdsjfhalsdhjflashdfklasjhdfkljashdfakdsjfhalsdhjflashdfklasjhdfkljashdfakdsjfhalsdhjflashdfklasjhdfkljashdf
akdsjfhalsdhjflashdfklasjhdfkljashdfakdsjfhalsdhjflashdfklasjhdfkljashdfakdsjfhalsdhjflashdfklasjhdfkljashdf
akdsjfhalsdhjflashdfklasjhdfkljashdfakdsjfhalsdhjflashdfklasjhdfkljashdfakdsjfhalsdhjflashdfklasjhdfkljashdf
akdsjfhalsdhjflashdfklasjhdfkljashdf</p>
<p>akdsjfhalsdhjflashdfklasjhdfkljashdfakdsjfhalsdhjflashdfklasjhdfkljashdfakdsjfhalsdhjflashdfklasjhdfkljashdf
akdsjfhalsdhjflashdfklasjhdfkljashdfakdsjfhalsdhjflashdfklasjhdfkljashdfakdsjfhalsdhjflashdfklasjhdfkljashdf
akdsjfhalsdhjflashdfklasjhdfkljashdfakdsjfhalsdhjflashdfklasjhdfkljashdfakdsjfhalsdhjflashdfklasjhdfkljashdf
akdsjfhalsdhjflashdfklasjhdfkljashdfakdsjfhalsdhjflashdfklasjhdfkljashdfakdsjfhalsdhjflashdfklasjhdfkljashdf
akdsjfhalsdhjflashdfklasjhdfkljashdf</p>
</div>
<button class"btn btn-success" onclick="$(this).hide();"> Click Me! </button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/myscript.js"></script>
</body>
</html>
This is the code thats not working. Could you guys please help me out. when i resize the screen nothing happens. Any help is appreciated
Your code is working.
You could see the button styled in the bootstrap fashion if you fix the HTML. Instead of:
<button class"btn btn-success" onclick="$(this).hide();"> Click Me! </button>
You should write:
<button class="btn btn-success" onclick="$(this).hide();">Click Me!</button>
You are missing the "=" symbol after the class keyword.
Regarding the content-fluid class, the only thing it does is to add the CSS to the element:
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
So you will hardly notice any change when you resize the window.
If you are writing the code in your local environment, could you please make sure that your internet is working and the URL is not blocked,
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
because you are taking the css from a hosted location, so if that URL is inaccessible, the code would not work.
If in doubt, try to refer the bootstrap css from your local disk.
I have this code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="visible-xs-block">visible-xs-block</div>
<div class="visible-sm-block">visible-sm-block</div>
<div class="visible-md-block">visible-md-block</div>
<div class="visible-lg-block">visible-lg-block</div>
</div>
</div>
</div>
</body>
</html>
When I run this on mobile, my phone recognise this as SM, but should as XS.
In this case, I can't see mobile menu with hamburger (code not include) and when I have div with xs-12 and sm-6 it displays wrong.
On PC works everything.
How can I recognise phone (XS size) correctly ?
Put the meta tag in head section.
<meta name="viewport" content="width=device-width, initial-scale=1">
If the problem persist after adding:
<meta name="viewport" content="width=device-width, initial-scale=1">
Try with
<div class="hidden-lg hidden-md hidden-sm col-xs-12">visible-xs-block</div>
instead of
<div class="visible-xs-block">visible-xs-block</div>
Anyways, your code was working fine for me.
You have already tried with google chrome inspect? In the latests version you can select various device type and brand. In this way you can test at different resolution.
The solution it's not always correct, but is a good approximation.
https://developer.chrome.com/devtools/docs/device-mode
I am trying to use the font awesome plugin. But I cannot see the characters. Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<h1>THIS IS IT</h1>
<span class="fa fa-twitter"></span>
</body>
</html
Is this just me or has anyone else had the same problem?
Try with http:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
I solved it. Turns out all it needed was an http at the beginning. Thank you.
I tried to fix this error in my view for IE8.
Sorry if this question has been asked many times before ,but I still can't solve it.
This is my plunker:
example
When I run this plunker in IE8 the menu is hidden by default.
If you want to see in IE
Plunk full view
This is the design of the real system running in IE8, there is extra space that shouldn't be there between the menu and the content.
As you can see the picture:
A I have extra space that shouldn't be there
B My add-ons look correctly aligned only in firefox
C I was able to fix the select using a directive found here kkurni.blogspot.com.au posted by kkurni
To fix Angular.js problem I tried this code:
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="yeomanTutAngApp">
<head>
<!--[if lte IE 8]>
<script>
document.createElement('ng-view');
</script>
<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="">
</head>
</html>
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<input class="form-control input-sm" type="text" ng-model="selected" id= "mySearch"
typeahead="word for word in getAutocomplete($viewValue)"
typeahead- `loading`="loadingClientsPreview">
<i ng-show="loadingClientsPreview" class="glyphicon glyphicon-refresh"></i>
<span class="glyphicon glyphicon-remove input-group-addon" ng-click="selected = ''"></span></div>
</div>
</div>
C. My select shows data, but this looks too small. (Fixed)
<div class="form-group">
<p class="col-xs-3 ">{{'Language'|translate}}</p>
<select ng-model="people.language"
ng-options="value.code as value.name | translate for value in languages">
</select>
</div>
Are you using a normalize.css ? If not, add the following CSS inside your
http://necolas.github.io/normalize.css/