I have read the other post and made sure that my index.html is in the same folder as my css,fonts and js folders but it still will not render properly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Clear your browser cache. And mostly read get started at Getbootstrap.com as you are on the correct path.
So Bootstrap doesn't tell you on their page but the shading of each cell is not a default feature. If you inspect the element using chrome you will see an additional css rule. So this is how you do it:
1) change the classes from "row" to "row show-grid" in your index html.
2) create the following rule in your css style sheet:
.show-grid [class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
3) run your code
Install bootstrap properly using Bootstrap CDN Get Bootstrap
Related
Google Fonts not working with bootstrap. I'm using Google Font and Bootstrap for my website, but google fonts don't seem to work. As soon as I comment out the bootstrap CSS, Google font appears again.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
<!-- Bootstrap CSS -->
<!-- Try commenting this and font will start working -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Hello World</h1>
</header>
<!-- Bootstrap Script -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
And CSS:
/* Google Font Link */
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
margin: 0;
background: -webkit-gradient(linear, left top, left bottom, from(rgb(168, 168, 168)), to(#464645)) fixed;
/* Font Family Not Working */
font-family: 'Poppins', sans-serif;
}
header{
background-color: antiquewhite;
text-align: center;
padding: 10px;
}
JSFiddle Here
Tried Solution:
Google font not working with bootstrap This didn't work for me
Tried Googling around ...no solutions.
You can override the Bootstrap theme either by changing the source SASS files or by overriding the CSS variables used by the framework.
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
#import url('https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css');
:root {
--bs-font-sans-serif: Poppins;
}
<main role="main" class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main>
This how it worked for me.
*{
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
outline: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/index-html.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;300&display=swap" rel="stylesheet">
<title>Stackoverflow Answer</title>
</head>
<body>
<h1>Google Fonts Imported </h1>
<script rel="preconnect" src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Test Links.
Using Bootstrap classes, modify the div element with the id "links" so that on extra small
resolutions (<576px), each link and ad takes one whole row. It should look like this:
On small resolutions and higher (≥576px), both links should take one half of the row and the ads
should be invisible. It should look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tests</title>
<link
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
a,
div {
outline: 1px solid black;
}
</style>
</head>
<body>
<div id="links">
Aptitude tests
<div>Ads!</div>
Programming tests
<div>More ads!</div>
</div>
<article>Here you can find various tests...</article>
</body>
</html>
You are getting close with your answer. To get it to work, these are the changes you need to make to the original code in your question:
add the class row to the container that has your cols (i.e. the links div) - cols must be in a row
Add col-12 col-sm-6 to the a elements (you just had the wrong breakpoint when you said col-12 col-md-6) Ref: Bootstrap breakpoints, Bootstrap Grid Mix & Match Col classes
For the divs, add d-sm-none to hide it on small screens (Ref: Bootstrap Display property) and col-12 to show it full width on all other screens.
You can see it working here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
a, div {
outline: 1px solid black;
}
</style>
</head>
<body>
<div id="links" class="row">
Aptitude tests
<div class="d-sm-none col-12">Ads!</div>
Programming tests
<div class="d-sm-none col-12">More ads!</div>
</div>
<article>Here you can find various tests...</article>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tests</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
a, div {
outline: 1px solid black;
}
#media (min-width: 576px ) {
#links {
display: flex;
flex-direction: column;
padding-right: none;
padding-left: none;
}
}
#media (max-width: 576px ) {
#links {
flex-direction: row;
}
}
</style>
</head>
<body>
<div id="links">
Aptitude tests
<div class="d-none d-md-block">Ads!</div>
Programming tests
<div class="d-none d-md-block">More ads!</div>
</div>
<article>Here you can find various tests...</article>
</body>
</html>
This is the code I got with it.
The background-color CSS property in Chrome is not working when I implement it into the body. However, when I test it in CodePen, the body's background color changes accordingly. Here is the link to the CodePen code: https://codepen.io/Ag_Yog/pen/rzezYw.
Here is the code that does not work in notepad:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container quoteCard">
<p id="quote" class= "text">Txt</p>
<button class = "btn getQuote ">Get new Quote</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src = "main.js"></script>
</body>
CSS:
html, body {
width: 100%;
height: 100%;
background-color: #00e676 ;
}
.quoteCard{
background-color: #fff176;
}
.text{
position: relative;
vertical-align:middle;
font-family: 'Acme', sans-serif;
font-size: 30px;
padding: 20px 20px 20px 20px;
}
When inspecting the code on Google Chrome, it shows that there is no background-color, even though I specified it in the CSS:
Bootstrap's background color is overwriting your main.css so the background-color property is taken from the bootstrap css file. Change the order of your css files.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container quoteCard">
<p id="quote" class= "text">Txt</p>
<button class = "btn getQuote ">Get new Quote</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src = "main.js"></script>
</body>
</html>
This will work
On codepen the body is already responsive, whereas your Chrome's page needs to be made responsive to react to the % of your CSS Properties.
Add these meta tags-
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta name="viewport"content="height=device-height, initial-scale=1.0">
</head>
Now your webpage can detect the devices width and height and set the style attributes according to them.
However, if this still doesn't work. Change your height properties value from 100% to something specific with px or use em if you want it to be responsive with different devices DPR.
I found I was having the same issue when using all of the CSS code for the body tag. I removed the background-color tag from that grouping and put it into a separate grouping for the same tag and everything worked as intended. It's an organizational problem, but it is functional.
Here's the example from my code (This is in my main.css file):
<style>
body {
font-family: Trebuchet MS;
margin-left: autopx;
margin-right: autopx;
margin-bottom: autopx;
margin-top: autopx;
}
body {background-color: #242424;}
</style>
while using containers in bootstrap, i found that both the sides of a container is left with spaces. So how to remove those spaces, or how to expand the width of container
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
**<div class="container" style="background-color: black; height: 500px;"></div>**
<div style="background-color: skyblue; height: 500px;"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
-->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In Bootstrap CSS container has "max-width: 1170px;"
Override the CSS (But this will cause a lot of other design problems):
.container {
max-width: 100%;
}
Or Use container-fluid class.
Try using
<div class="container-fluid"></div>
If that doesn't work try resetting the CSS before attaching the bootstrap stylesheet.
*{padding: 0; margin: 0;}
you can put it in a CSS file and attach it before attaching the bootstrap.min.css file.
I am having trouble using the first- and last-child pseudo classes in my Bootstrap/Sass code. Basically, I am looking to create a whole bunch of blank space above/below the first and last header only. Compass is running, and it's not giving me an error, but when I hard refresh my page in the browser nothing changes. Here is my code, CSS first:
$headings-small-color: black;
#import "bootstrap-compass";
#import "bootstrap-variables";
#import "bootstrap";
h1 {
font-family: 'Almendra SC', serif;
}
h1:first-child, h1:last-child {
margin-top: 200 px;
}
small {
font-family: 'Fanwood text', serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cat Graveyard</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="stylesheets/styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Fanwood+Text|Almendra+SC' rel='stylesheet' type='text/css'>
</head>
<body>
<img src="Cat_graveyard_cover2.jpg" class="img-responsive" alt="Cover image">
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 col-md-offset-2">
<h1>Here Lieth <small>the poor victims of two notorious whiskered criminals.</small></h1>
<h1>Warning: <small>Graphic images of mangled inanimate objects below.</small></h1>
<h1>Viewer Discretion <small> is advised for sensitive stuffed animals.</small></h1>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I do realize that the more appropriate "Sassy" way would be to use a variable for these pseudo classes (and if you would like to give me an example, that'd be okay with me!), but right now my goal is just to get it to work.
I'm assuming my issue has to do with specificity re: Bootstrap. I'm at a loss of how to fix this, however. In the CSS generated by Compass, the CSS I wrote for the pseudo classes appear last. But, when I "inspect element" in the browser it shows the bootstrap CSS overriding the CSS I wrote.
IDK what to do at this point, any insight would be greatly appreciated!
Just a little typo
h1:first-child, h1:last-child {
margin-top: 200 px;
}
should be
h1:first-child, h1:last-child {
margin-top: 200px;
}