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!
Related
<html>
<head>
<title>My Travel App</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
<div class="header item"><i style="font-size: 20px;" class="edit icon"></i>Blog Site</div>
Home
New Post
</div>
</div>
<p class="sample"> I can style here with css in app.css</p>
Can anyone help with the css/semantic-ui problem, please?
When I use style tag in the file as above it is working but if try to style something in my app.css file it does not work. I can style something else that I did not use semantic-ui in but I cannot style anything that has something from semantic-ui.
For example: I can style the class "sample" in my app.css file but cannot style class "item".
Thanks!
Its because of your files precedence in header, it read line by line first come first serve.
Always add your custom file in the end of header so that your custom style's overwrite default styles.
Replace below code
<head>
<title>My Travel App</title>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
</head>
Move semantic.min.css in top of app.css...
<head>
<title>My Travel App</title>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
</head>
I'm trying to link a css file into this blade header.blade.php
It doesn't work, and nothing I've tried so far would work, except if i put the into the same file of the *.blade.php that I'm using.
:::layouts/header.blade.php:::
#section('header')
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<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>Help</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!-- Scripts -->
<script src="{{ asset('js/jquery.js') }}"></script>
</head>
<body>
#stop
////eof////
:::master.blade.php:::
#extends('layouts/header')
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
Register
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
Master
</div>
<div class="links">
About
Work
</div>
</div>
</div>
#yield('footer')
Make sure your css file is in your 'public' directory, ie: 'public/css/styles.css'
Then try:
<!-- Styles -->
<link href="{{ url('css/styles.css') }}" rel="stylesheet" type="text/css" />
Include this code in your header.blade.php
<link rel="stylesheet" href="{!! asset('css/styles.css') !!}" media="all" type="text/css">
The problem wasn't the asset or url link
it was #section('header') and #stop in the first file -- layouts/header.blade.php.
Because using extend doesn't yield the content, yet it extends the html page -- I must've removed those from the html (or php) file (that is).
Best regards.
One other question.. to append to the current answer:
I've noticed that using #extends appends the HTML instead of inserting at the point where the function is called.
How to prevent this and so the html from the calling file goes where it's supposed to go (at the function call)?
SOLUTION
use #include instead
In AngularJS you can dynamically add class formatting to elements using the ng-class attribute. I want to dynamically change whether some text is displayed as plain text or link a hyperlink.
I am also using bootstrap but <a> isn't defined as a class like h1 - h5 are.
For example, for <h1> I can just do this in AngularJS:
<div ng-class="'h1'">This will be displayed as a heading 1.</div>
But this didn't work to display as a url:
<div ng-class="'a'">This will be displayed as text, but I want it to be a URL.</div>
So after the answer from Asiel Leal Celdeiro I just had to add the working code here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS Example</title>
<!-- JQuery for Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 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">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- AngularJS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<p ng-class="{'btn btn-link': isURL}">This can be plain text or formated like a URL.</p>
<br>
<label>
<input type="checkbox" ng-model="isURL">
Make it look like a link
</label><br>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.isURL= false;
}]);
</script>
</body>
</html>
EDITED
If you really need it to be a div you can use:
<!--myController: angular controller on this partial view-->
<!--isURL: indicate whether this text is a URL or not-->
<div ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</div>
or if you can put an a or a button you can use:
<a ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</a>
or
<button ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</button>
All of them will be displayed as a URL if the myController.isURL expression is true when it's evaluated in by angular and as plain text if not. It basically, puts the classes btn and btn-link if the expression is true.
<!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 saw several questions on this topic in here but I can't get it work for me.
I use Polymer elements with Bootstrap and it seems like the polymer elements ignore Bootstrap's css. I tried to link the CSS inside the Polymer elements but it did not fix the problem. For example, This is my Polymer element "tal-button.html":
<link rel="import" href="../components/bower_components/polymer/polymer.html">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrapValidator.min.css" rel="stylesheet">
<polymer-element name="tal-button" attributes="">
<template>
<button class="btn btn-success">I'm a Bootstrap Button</button>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
My index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tal Buttons</title>
<script src="components/bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/tal-button.html">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- BootstrapValidator -->
<link href="css/bootstrapValidator.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
<section>
<button class="btn btn-primary">Cool</button>
<tal-button></tal-button>
</section><!-- /#intro -->
</body>
</html>
The "Cool" Button is displayed well, but the Tal-Button is displayed as a regular button and it didn't get the Bootstrap style.
Any help will be appreciated. Thanks!
You need to put the stlyesheet imports into the <template>...</template> tag.
Only then are these CSS definitions visible inside the shadow dom of your tal-button element.