Hi i am new to bootstrap i am facing a problem here is my code
<!DOCTYPE html>
<head>
<title>Bootstrap Progress Bar</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body bgcolor="red">
<p>Progress Bar</p>
<div class="container">
<div class="progress bg-danger">
<div class="progress-bar bg-success text-center" style="width:77%;">11
</div>
</div>
</div>
</body>
</html>
i am trying to change background colour with
<body bgcolor="red">
but i don't know why this code is not working only working with inline css
style="background-color:red;"
is there any solution?
From https://getbootstrap.com/docs/4.3/getting-started/introduction/
Bootstrap requires the use of the HTML5 doctype
From https://www.w3schools.com/tags/att_body_bgcolor.asp
The bgcolor attribute is not supported in HTML5. Use CSS instead.
So basically if you are using bootstrap, you need to define the background color in css as you are bound to use html5 doctype (which does not support bgcolor attribute of the body tag).
Hope this helps you to understand your situation a bit better.
Related
I am learning web development and i need advice.
I have bootstrap card and i want to align the minus-square icon from font awesome to right but nothing work.
Do you have some ideas?
Thanks for everything! I am also sending picture to good imagine.
if you are using bs4, you could use the float-right class.
Demo working snippet:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card">
<div class="card-body">
Basic card
<i class="some-fa-icon float-right">♠</i>
</div>
</div>
</body>
</html>
Please note that instead of the icon I have used a html unicode character and mentioned some-fa-icon class which would be replaced by your actual font awesome classes.
I'm currently working on a project for which I use foundation 6.
I have this weird problem that my columns stack vertically (they're all 100% width of the screen)
the very simply code that I use is this:
<div class="row">
<div class="small-2 large-4 columns"><!-- ... --></div>
<div class="small-4 large-4 columns"><!-- ... --></div>
<div class="small-6 large-4 columns"><!-- ... --></div>
</div>
this is copied directly from the basic grid examples on the foundation website. I'm certain that i've linked to the stylesheet correctly, because even when I use the full path of the stylesheets this keeps happening.
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
Thanks for the help in advance!
This is because the newest version of Foundation comes with their XY Grid enabled and it wont call the CSS of the class "small-2 large-4 columns"!
If you're using SASS just set the arguments to false in the includes, but I assume you're just using CSS so if you just re-download a custom version and then just check 'float grid' it will get you back to the older grid system and your code should work!
If you want to learn more about the new XY Grid heres a link: http://foundation.zurb.com/sites/docs/xy-grid.html
And heres a link to download the custom foundation version:
https://foundation.zurb.com/sites/download/
Hope this helps!
I can't comment because my rep is under 50, but I wanted to say I am also having this issue. Downloaded Foundation 6 from the site, I have all the files, and I haven't touched the app.css file. Here is my code
Both columns at 100% width.
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class ="row " style= "background-color: aqua">
<div class = "small-6 large-6 columns" style= "background-color: lightblue">content</div>
<div class = "small-6 large-6 columns">more content</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I'm very new to Bootstraps, trying to use their grid system. However I can't change the body background-color now. My stylesheet is working, cause I can change the background color of the container class. I assume something with Bootstraps is overriding my body background-color, and font as well.
Thanks.
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="clearfix">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</body>
</html>
CSS
body{
font-family: Arial;
background-color: #455A64;
}
You should be including your stylesheet after Bootstrap's, like so:
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/style.css">
Because bootstrap is included last in your code, its CSS is overriding your styles defined in style.css. You should typically include your stylesheets after all frameworks/libraries you use so you can properly override styles if necessary.
It is not good practice but you can also do
<body style="font-family:Arial; background-color:#455A64">
--------
</body>
you can also use scoped style tags in the body, but it's good practice to keep your CSS separate as it allows for easy editing as well as using the same CSS for multiple elements. Hope this helps!
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</body>
</html>
Hey there!, first post here, can anybody tell me why this won't work? i've simplified my code to the maximum. The thing is that it will work if i make my browser window smaller than 1200px.
The problem with your page is that you did not put in place all the structure required by bootstrap's grid support: columns should be in rows, rows should be in containers, see the bootstrap documentation for details.
The following modification of your code works as intended:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/c\
ss/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey" class="container">
<div class="row">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</div>
</body>
</html>
(Technically the problem occurs because the "col-lg-12" class makes the div containing the "hello" a float, so it is no longer contained in the div with the grey background, and then the grey div has height 0, so isn't visible.)
Add the position or height attribute to the div
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey;position:absolute">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</body>
</html>
I am using animate.css but it don't seem to work in firefox. The code I am using is:
<html>
<head>
<link rel="stylesheet" href="animate.css"/>
</head>
<body>
<div class="rotateIn"> content</div>
</body>
</html>
I want this div to show rotate in effect when we load the page but it don't seem to work.
you have to use animated class if you want to show animations try this
<html>
<head>
<link rel="stylesheet" href="animate.css"/>
</head>
<body>
<div class="animated rotateIn"> content</div>
</body>
</html>
Long story short: http://jsfiddle.net/3ZLLm/
You MUST use the animated class provided.
So, to add further, it should be:
<div class="animated rotateIn"> content</div>