I'm trying to use this and create a different landing page utilizing it.
Here is the HTML. The rest is on codepen.
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,800,700,900,300,100' rel='stylesheet' type='text/css'>
<div class="overlay">
<div class="wrap">
<h1>Scrolling Form</h1>
<input type="text" placeholder="Username">
<input type="email"placeholder="Password">
<input type="submit" value="Sign In">
<i class="fa fa-question"></i>Forgotten Password
<i class="fa fa-user"></i>Create an Account
</div>
</div>
I'm fairly new to coding and using Codepen but when I copy the code into Sublime Text 2, it doesn't work.
Why is that and what can I do to fix this problem?
This may seem obvious, but if you're copying and pasting that code exactly as it appears in the pen, then it isn't working becasue;
1) It's not a full HTML document. It's just a snippet of the body. It need's a doctype, head, body and html tags. Without a complete HTML structure, the browser doesn't treat it as an HTML document.
2) Even if you were creating a full HTML document out of the example, it won't work as-is from Codepen, because Codepen attaches the CSS to the HTML automatically. You would have to link the CSS file in the head of the HTML document for it to work locally.
<head>
<title>Copied from Codepen</title>
<link href="/style-from-codepen.css" rel="stylesheet">
</head>
Related
Is it possible to have a different style source for each div.
Example
<div src="abc.css"> A
</div>
<div src="xyz.css">B
</div>
You can have multiple stylesheets in your HTML, and then use the CSS code inside them for your divs. Here; 'div1' class is inside div1-styles.css and 'div2' class is inside div2-styles.css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="div1-styles.css">
<link rel="stylesheet" href="div2-styles.css">
</head>
<body>
<div class='div1'>
Div-1 text
</div>
<div class='div2'>
Div-2 text
</div>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
First its not a good practice but even is a horrible practice.. you can just use different classes in your style file and will done the work.. but if you're insisting in that even if its not right.. you can do it using this JQuery plugin that used scoped attribute to achieve that
The plugin: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin
I am using bootstrap 4. When i write header with header tags (h1,h2,h3...), the header should display in a single line. what happens is the next content is getting displayed with the header tag without line break. what could be the reason?
I have make sure that the header tag close properly
<div class="row"> <h2>Expertise</h2> <p>Php, html5, css3, wordpress, </p> </div>
the expected output should be like above
but it display like below. everything comes in 1 line with different font size. expertise is bigger than rest content.
Expertise Php, html5, css3, wordpress,
Add columns to add content with in row as follows
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<h2>Expertise</h2>
<p>Php, html5, css3, wordpress, </p>
</div>
</div>
</div>
Bootstrap 4 Grid System Rules
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Ref: https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp
This is because of the class "row" which contains display:flex. If you want to use row, then apply css "flex-direction" : column.
It will bring h2 to next line.
<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">
<body>
<div class="">
<h2>Expertise</h2>
<p>Php, html5, css3, wordpress, </p>
</div>
</body>
I'm trying to use bootstrap4 with create-react-app. I realized bootstrap.min.css was missing so I put the following line in index.html in the public folder
<head>
<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">
I tried using a card and the colors were missing.
<div className="card card-inverse card-primary mb-3 text-center">
<div className="card-block">
<blockquote className="card-blockquote">
React.js
</blockquote>
</div>
</div>
If I then typed a letter in the like
<head>s
<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">
The the card color would show. If I then remove the letter and hit save the color disappeared. What is going on here?
Actually i don't know what should i see on page, but i can help you with live editor which uses create-react-app. I did same thing for you and get some nice view on screen sandbox link
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!
I used typical way to create tabs using jQuery UI, by wrapping up asp.net usercontrols as below -
<div id="tabs">
<ul>
<li>Schools</li>
<li>Colleges</li>
</ul>
<div id="tab1">
<uc:schools id="ucSchools" runat="server" />
</div>
<div id="tab2">
<uc:colleges id="ucColleges" runat="server" />
</div>
</div>
Tabs work awesome, but including jQueyui.css. Made all the contents of the my user control larger, than usual.
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
I do not see any name collision in jqueryui.css with our stylesheet.
If you've encountered this issue, please suggest how to tweak the css to keep containing div size intact.
Which ever class you want to have first priority or override then you should use !important
Example:
div {
color: #ff0000 !important;
}
UPDATE:
Apart from !important, the other way is "Render your link tag after jquery-ui stylesheet link on the page. So your file takes priority and applies to the page".
Example:
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="custom.css" rel="stylesheet" type="text/css" />