I started an online udemy course today and it is using bootstrap templates for their tutorials. but i have a problem because when i reload the site no CSS has been applied (ps the course is very old and I doubt anyone will be able to help me as quick as you guys)
Any help would be greatly appreciated.
This is my folder setup:
This is what is in my CSS folder:
This is the code i have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="first-site/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© 2016 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
If your folder structure is like this:
folder-name >
1)css folder
2) js folder
3)images folder
......
5)index.html
then in your link tag , use like wise
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js"></script
<script src="js/bootstrap.js"></script>
All the <link> and <script> tags in your <head> refer to folders and elements that you don't seem to have in your project.
as of your file structure bootstrap css href is wrong.
correct: <link href="css/bootstrap.min.css" rel="stylesheet">
Use proper file location. try this............
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="image/favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/jumbotron.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© 2016 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
This link tag is giving an incorrect path
<!-- Bootstrap core CSS -->
<link href="first-site/css/bootstrap.min.css" rel="stylesheet">
You must specify paths relative to index.html.
Replace it by :
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
I can't really be sure how your structure looks, instead of trying to guess it i will suggest you to use a CDN version of Bootstrap
so could you replace this
<link href="first-site/css/bootstrap.min.css" rel="stylesheet">
by this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
and this
<script src="../../dist/js/bootstrap.min.js"></script>
by this
<script async="async" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Look!
Your index.html file is trying to access some CSS and JS files.
ok .. here is the basic structure of your directory:
Your index.html which lies in first-site needs to access bootstrap.min.css which is located in css folder.
so you need to change your this line:
<link href="first-site/css/bootstrap.min.css" rel="stylesheet">
with this one:
<link href="css/bootstrap.min.css" rel="stylesheet">
and similarly you need to change all of your <link> lines according to your directory structure just as in above example.
Hope it explained.
Related
I am trying to make two columns with bootstrap - text on the right, and a photo on the left. I want the photo to fill up the entire white screen of the left side, but at 100% width that is how much the image automatically fills. How do I change this?
I am relatively new to HTML+CSS, and this is an assignment so any tips would be helpful.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet">
<link rel="icon" type="image/png" sizes="16x16" href="img\favicon.ico">
<title>Headspace</title>
</head>
<body>
<div id="barAtTop"></div>
<div class="site_title">
<h1>HEADSPACE</h1>
</div>
<div class="motto" style="font-size:1vw;">
<i>"To empower young people to have the confidence and skills to gain meaningful employment."</i>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" onclick="openDropDown()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a>Home</a></li>
<li>About us</li>
<li>Contact us</li>
<li>Meet the Team</li>
<li>Join Now</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-6" id="main-page-image">
<img src="img\teenager.jpg" style="max-width:100%;height:auto;">
</div>
<div class="col-sm-6" id="about-headspace">
<h1>ABOUT HEADSPACE</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis vel tortor eu ultrices. Suspendisse id luctus lorem. Donec sed fringilla odio. Morbi tristique luctus euismod. Morbi et lectus sed tortor pulvinar pulvinar cursus id turpis. Vestibulum
eu elit erat.
</p>
</div>
</div>
</div>
</body>
</html>
Your image can't outgrow the parent element it is inside of. So, when you put your image inside of a "col-sm-6", that limits its size to the size of its parent container. The solution would be to put the image inside of a larger parent element.
If I understood the question correct the image is not filling in the col-sm-6 element?
Try changing max-width to width. Example:
<img src="img\teenager.jpg" style="width:100%;height:auto;">
Use a custom row class and style it flexed and stretched to get the column to fill. Then we can simply add object-fit for the image itself.
.card-container {
display: flex;
align-items: stretch;
justify-content: center;
}
#main-page-image {
overflow:hidden;
}
#main-page-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row card-container">
<div class="col-xs-6" id="main-page-image">
<img src="http://via.placeholder.com/640x360">
</div>
<div class="col-xs-6" id="about-headspace">
<h1>ABOUT HEADSPACE</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis vel tortor eu ultrices. Suspendisse id luctus lorem. Donec sed fringilla odio. Morbi tristique luctus euismod. Morbi et lectus sed tortor pulvinar pulvinar cursus id turpis. Vestibulum
eu elit erat.
</p>
</div>
</div>
</div>
I'm not sure how many people have experienced this issue as I can't really find questions about it but I noticed Bootstrap 4 display utilities don't work properly with .collapse class which used to work correctly with Bootstrap 3.
Basically I want to display #demo by default on sm, md, lg, and xl and hide it on mobile view, xs which does not exist in Bootstrap 4 according to this when using display property.
So when I click on the collapse button on mobile view, I want #demo to show.
Also, .collapsing isn't working properly either. Any help with this would be very much appreciated.
.container {
margin: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="d-none d-sm-block collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>
If you look at display-none, it's doing display:none !important;, that's why toggling the collapse on small devices won't work as it will be always hidden.
My solution looks dumb but it should work really well - you duplicate collapse and display one / hide the other one based on different breakpoints.
<div class="d-sm-none">
<button type="button" class="btn btn-primary" data-toggle="collapse"
data-target="#demo">
Simple collapsible
</button>
<!-- Collapse by default -->
<div id="demo" class="collapse">
...
</div>
</div>
<div class="d-none d-sm-block">
<button type="button" class="btn btn-primary" data-toggle="collapse"
data-target="#demo-sm">
Simple collapsible
</button>
<!-- Display by default -->
<div id="demo-sm" class="show collapse">
...
</div>
</div>
fiddle: http://jsfiddle.net/aq9Laaew/137247/
<!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">
<title>Hello, world!</title>
<style>
html,body{
position: relative;
}
.carousel-caption {
position: absolute;
top:113px;
left:150px;
}
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/ibm commerce background.png" alt="" width="" height="">
<div class="carousel-caption">
<h3 class="text-left">LOREM / IPSUM</h3>
<h2 class="text-left">UNIVERSAL
<br>
LOREM
</h2>
<h3 class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</h3>
</div>
</div>
<div class="carousel-item">
<img src="./images/ibm commerce.png" alt="" width="" height="">
<div class="carousel-caption">
<h3 class="text-left">THE ALL NEW</h3>
<h2 class="text-left">LOREM
<br>
IPSUM
<br>
DOLOR v9</h2>
<h3 class="text-left">IS HERE !</h3>
<h3 class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</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>
I'm new to bootstrap 4 and I'm facing one particular problem. The carousel-caption in my case is to be displayed on the left side. Well in desktop mode, I have tried absolute positioning and it is displaying well. But when I do responsive mode for mobile it is showing very odd. I have given a screenshot for these.
So my question is do I have to write media queries for both position and fonts or will bootstrap take care of it. Can anyone please guide me on this or at least show a snippet how it is to be done responsive for all screen sizes. It would be immense help.
When you use position: absolute
You need to make sure that your class has an parents class and it's have property position relative that's how position absolute work
Please use this.
.carousel-caption {
position: absolute;
top:113px;
left:0;
width:100%;
Text-align:left;
}
.carousel-item .img-fluid {
width:100%;
height:100%;
}
Adding the img-fluid class to your carousel might help.
Source: https://bootstrapcreative.com/create-full-width-bootstrap-4-responsive-carousel/
Add this, to make your text responsive:
.carousel-caption h3{
font-size: 6vw;
}
.carousel-caption h2{
font-size :2vw;
}
And add this to your <img class="w-100" src="..."> and it will make your image responsive.
So I'm doing a footer with bootstrap, it looks great but when I put in this resolution (image below), a blank space showed it up.
Boostrap Footer:
This is what I made:
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h6>Copyright © 2018</h6>
</div>
<div class="col-sm-6">
<h6>About us</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
</div>
</div>
</div>
</footer>
footer{
background: #333;
color: #eee;
font-size: 11px;
padding: 20px;
}
How can I fix that?
With nikhil's approach this is happening
attemp
I am not sure if that's what you want but you can just add style="min-height:100vh" to your page content container and place footer in another container.
This way your footer will always be at the bottom of your page.
Position fixed removes element from the normal flow of the content. Therefore, you need to use bottom: 0; to position the footer at the very bottom.
.postion-b-0 {
bottom: 0;
}
Most of your css code is unnecessary. You need to use only the property above.
.postion-b-0 {
bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<footer class="position-fixed container-fluid bg-dark text-white py-5 postion-b-0">
<div class="row">
<div class="col-6 ">
<h6>Copyright © 2018</h6>
</div>
<div class="col-6">
<h6>About us</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
</div>
</div>
</footer>
The columns takes half of the rows in the code above. But if you want full width column on mobile, use the code below.
.postion-b-0 {
bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<footer class="position-fixed container-fluid bg-dark text-white py-5 postion-b-0">
<div class="row">
<div class="col-12 col-sm-6 ">
<h6>Copyright © 2018</h6>
</div>
<div class="col-12 col-sm-6">
<h6>About us</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
</div>
</div>
</footer>
this will work:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
<h6>Copyright © 2018</h6>
</div>
<div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
<h6>About us</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue
ante, et sodales felis vulputate iaculis.</p>
</div>
</div>
</div>
</div>
</body>
</html>
fiddle:https://jsfiddle.net/rq3eab2v/2/
if you are using bootstrap 4 use col-* instead of col-xs-* ok
I'm making a blog with jekyll that uses an index.html page with links to blog posts, as you see below in the first code sample. The default layout referred to in the front matter is a typical layout file with css styling by Twitter bootstrap included. However, when I click a link to a blog post in index.html, the blogpost is displaying (i.e. the url changes, the blog post content is displayed), however, the front-matter from the blogpost is being ignored, or at least it's appearing that way since none of the css styling is working on the blog post. For example, the css for the Twitter bootstrap navigation bar only shows on the home page, not the blog post.
Can you explain why this might be happening?
index.html
---
layout: default
---
{% for post in paginator.posts %}
<div class="row-fluid">
<!-- <div class="span12"> -->
<h2>{{ post.title }}</h2>
<h4>{{ post.date | date_to_long_string }}</h4>
<p>
Read Post
</p>
<!-- </div> -->
</div>
{% endfor %}
2013-10-15-lorem-ipsum-blog-post
---
title: Lorem Ipsum Dolor Sit Amet
layout: default
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elemen\
tum leo non felis porttitor vulputate. Nulla ipsum quam, auctor ut hendreri\
t quis, tincidunt eu metus. Quisque ipsum tellus, semper a tempus quis, int\
erdum vel magna. Cras a nisl diam, in accumsan augue. Pellentesque varius n\
ibh eu diam tempor rhoncus.
_layouts/default.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ site.name }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{ site.description }}">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="js/respond.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".na\
v-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">{{ site.name }}</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="active">About</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row-fluid">
<div class="col-lg-9 col-sm-8">
{{ content }}
</div>
<div class="col-lg-3 col-sm-4">
{% include sidebar.html %}
</div>
</div>
</div> <!-- container -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Since your layout file is just a relative file, I would suggest you add the paths of your CSS and javascript from the root. For example
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="js/respond.min.js"></script>
should become
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/custom.css" rel="stylesheet">
<script src="/js/respond.min.js"></script>