bootstrap 4 internal css modification - html

I'm new to bootstrap. Can anyone lend some insight on how to modify bootstrap. I created a example site but having trouble modifying after basic bootstrap. I have "container" and have the font blue but when I created another container "container new-place" and try to modify with interal css it doesn't work. Can I create my own "custom" bootstrap classes? How do I change the text of lets say I have ten "container new-place" and five "container" how can i modify each group?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" http-equiv="X-UA-Compatible" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
h1 {
color:yellow;
}
.container{
color:blue;
}
.container new-place {
color:red;
}
</style>
<title>Practice Title</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Fluid jumbo heading</h1>
<p class="lead">Jumbo helper text</p>
<hr class="my-2">
<p>More info</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="Jumbo action link" role="button">Jumbo action name</a>
</p>
</div>
</div>
<div class="container new-place" date-time="00:00">
<h1>hello</h1>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

You have the right idea, but the implementation is slightly wrong.
For example
<div class="container new-place" date-time="00:00">
<h1>hello</h1>
</div>
You have created a style which combines two classes. This is correct as it will have a greater specificity and allow you to override the Bootstrap style. The css is incorrect. You have
.container new-place {
color:red;
}
The css should be
.container.new-place {
color:red;
}
Now the style will apply correctly.

You can. Use !important. For example:
.container{
color:blue !important;
}
.new-place {
color:red !important;
}

Related

Bootstrap grid aligning inaccurately and won't respond to .css file

I am following along with the exercises in the Jump Start Bootstrap (DOWNLOAD LINK https://learn.vccs.edu/courses/406438/files/108188236/preview )
In chapter 02, we are creating a grid system. I have entered the code for the index.html and style.css files to format the grid as shown in the book.
The columns in the grid need to align vertically and horizontally, however, they simply align vertically only. The column divs also do not respond to the style.css file that is supposed to format them in size and color.
Bootstrap grid example screenshot
Bootstrap grid that my code outputs screenshot
I have checked my code several times and compared it to the code in the book (which I added a download link above [Chapter 02 index.html file]) and I cannot find anything wrong with it.
This here is the code that I am using for the html and css files:
https://pastebin.com/MQWnJXvT
If anyone can take a look and give any suggestions or just managed to spot and point out a mistake that I missed, I would greatly appreciate it. I am scratching my head with this one and will probably continue to do the rest of the night.
The only issues I can think of is that I am assigning the wrong classes in the column divs or am placing the <link href="css/style.css" rel="stylesheet"> line in the wrong section.
I thank everyone in advance who has any advice or suggestions!
Your code seems to be working fine. The problem should be the link tag, set the path correctly.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.col1 {
background: #5C7080;
}
.col2 {
background: #6BC0FF;
}
.col3 {
background: #E8AA4C;
}
.col4 {
background: #FF384E;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col1">
<h4>Column 1</h4>
</div>
<div class="col-xs-12 col-sm-6 col2">
<h4>Column 2</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col3">
<h4>Column 3</h4>
</div>
<div class="col-xs-12 col-sm-6 col4">
<h4>Column 4</h4>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

How do you do padding for bootstrap img-fluid

Not much of a front end developer, I tried all kinds of trix, margin, p-0, style="padding:20px" but nothing seems to be moving my fluid image to position it where I want during page load, assistance much appreciated.
**HTML**
<img class="img-fluid" src="~/Content/MyImage.jpg"/>
**CSS**
.img-fluid {
padding-left:20px;
}
I don't know what you exactly want.
So I have guesswork you want use "Bootstrap" because you did written "img-fluid" class.
I think the code below will help you.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Bootstrap JS CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<title>Demo</title>
</head>
<body>
<div id="root" class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<img class="img-fluid" src="https://placehold.it/1920x1080.png" alt="image"/>
</div>
</div>
</div>
</body>
</html>
CSS Code
html, body {
width: 100%;
height: 100%;
}
.row > div {
padding-left: 0px;
padding-right: 0px;
}
.img-fluid {
padding-left: 20px;
padding-right: 20px;
}

Background image won't show up in header

I am trying to follow along on Colt Steele's course and for some reason my background image will not show up. I've checked everything and I'm stuck. I tried writing in the style tag and inserting the background in html instead of creating a separate css file like he did and it did not work. So instead I tried to just make a separate css file which I'm more comfortable with so far. Please let me know what I can do. Thank you!
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="app3.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
#header {
background-image: url("imgs/header.jpeg");
}
</style>
<title>Pattern</title>
</head>
<body>
<nav class="navbar bg-dark navbar-dark">
<div class="container">
Quarantine Pal
</div>
</nav>
<section id="header" class="jumbotron text-center">
<h1 class="display-3">Blog</h1>
<p class="lead">Lorem ipsum</p>
Do Something
Another Thing
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
CSS
#header {
background-image: url(https://images.unsplash.com/photo-1564667005686-cce951e72bd0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3150&q=80) !important;
}
Your URL needs to be a string i.e you need to add an apostrophe ( ' ) on each side of it ('https://images.unsplash...'):
#header {
background-image: url('https://images.unsplash.com/photo-1564667005686-cce951e72bd0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3150&q=80') !important;
}

Bootstrap columns work in IE and edge (columns appear side by side), but not in chrome (columns stack vertically)

i've just started learning web dev with bootstrap.
I'm running into a problem i don't understand. When i view my project in IE or edge everything looks as expected (columns side by side):
Internet explorer vs chrome:
https://i.stack.imgur.com/CWe8Y.png
I've checked whether this is due to screen size, but the columns remain stacked vertically no matter how big I make the screen in chrome.
index.html code:
.customDiv{
margin:3px;
min-height:300px;
background-color:silver;
text-align:center;
font-size:large;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="CustomStyles.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<!--Columns must always be the children of a row class-->
<div class="col-2">
<!--Content must always be inside a col class-->
<div class="customDiv">Column 1</div>
</div>
<div class="col-md-8">
<div class="customDiv">Column 2</div>
</div>
<div class="col-md-2">
<div class="customDiv">Column 3</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="bootstrap/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Would really appreciate any help. Been stuck on this for a while and I can't find anyone else who has had this exact problem.

Why is the entire html body stuck at the top of the viewport?

I am writing a commandline tool for myself to generate a quick html bootstrap starter and I have an index page, which is supposed to include a basic navbar at the top and a footer that sticks to the bottom of the page. I have used this same template before for other projects and it worked perfectly. But for some reason it won't work now. all the content is stuck at the top of the page. If I inspect the page, the entire html tag contents are at the top of the page and most of the page is blank document. Here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="static/css/custom.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
<title>Bootstrap Starter</title>
</head>
<body class="d-flex flex-column">
<!-- Navbar-->
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-text">
Bootstrap Starter
</span>
</nav>
<!-- Content -->
<div class="container content"></div>
<!-- Footer-->
<div class="footer">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script><!-- Footer bar-->
<div class="p-4 mt-5 bg-light text-center"><small>© Your Name, </small></div>
</div>
</body>
</html>
And here is the css:
* custom styles */
/* Sticky footer */
html, body {
height: 100% !important;
}
.content {
flex: 1 0 auto !important;
}
Can anyone tell me why this isn't producing the desired result? Thanks.
Your css was moved into the document and now it works. What this indicates to me is an issue with the external stylesheet. I notice that you have 2 custom stylesheets, 1 before 3rd party stylesheets and 1 after. The browser respects the order, so if your code was in the first stylesheet the 3rd party stylesheets may have overwritten your custom rules.