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/
Related
I am very new to Flask and I have read related questions but I still don't understand how to fix this problem so any help would be greatly appreciated. Please don't duplicate this question.
I have the following file:
index.html
{% extends "bootstrap/base.html" %}
{% block styles %}
<!-- Bootstrap core CSS -->
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom styles for this template -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/agency.css">
<link rel="stylesheet" type="text/css" href="/static/css/agency.min.css">
{% endblock %}
{% block navbar %}
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">RFJI Protein Database</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="{{ url_for('upload')}}">Upload File</a>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#">Protein Database</a>
</li>
</li>
</li>
</li>
<div class="wrap">
<div class="search">
<div class="col-lg-11 text-center">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</ul>
{% endblock %}
{% block content %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
</div>
</div>
</nav>
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Welcome to the RFJI Protein Database!</div>
<div class="intro-heading text-uppercase">It's Nice To Meet You</div>
<style>
font-family: Arial;
</style>
{% endblock %}
{% block body %}
<!-- Services -->
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Features</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<img src="/static/img/kinase.png" alt="Girl in a onci" style="width:80px;height:90px;">
</span>
<h4 class="service-heading">Search Kinases</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<img src="/static/img/inhibitor.png" alt="Girl in a onci" style="width:80px;height:90px;">
</span>
<h4 class="service-heading">Search Kinase Inhibitors</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<img src="/static/img/upload.png" alt="Girl in a onci" style="width:80px;height:90px;">
</span>
<h4 class="service-heading">Import your own dataset</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
</div>
</div>
</section>
{% endblock %}
The problem is that the Jinja2 engine only displays the Services section but ignores everything else. How can I fix this please?. I have added a image on how I want the website to look like it.
How I want the website to look like
Many Thanks,
Moshi
At a glance, the whole template is a mess.
This should be deleted completely, as it doesn't belong in the middle of the template:
<style>
font-family: Arial;
</style>
There are multiple <body> tags. In the correct syntax there should be only 1 <body> tag, which should probably be part of the base.html template. Towards the end of this file, the corresponding </body> tag should also be present.
Some of the <div> tags are not closed properly.
You really need to go back and rearrange this tempate so that each Jinja2 {% block something %} {% endblock %} section contains a complete set of tags (for example a full bootstrap div container block which is closed properly before the endblock statement.
Template inheritance is described fully in the Jinja2 docs. I assume you've cut and pasted sections of this template from somewhere else which isn't a problem provided you make sure that important components of the source bootstrap template aren't split up in the wrong places.
<!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.
I am working on a Thymeleaf layout that should use the following default fragment:
fragments/default.html
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:include="fragments/common :: commonFragment" lang="en"></head>
<body>
<section id="header" th:replace="fragments/header :: headerFragment"></section>
<section th:id="defaultFragment" th:fragment="defaultFragment">
<div layout:fragment="content"></div>
</section>
</body>
</html>
The header fragment is defined by the following html file:
fragments/header.html
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="fragments/common :: commonFragment" lang="en">
<title >Title</title>
</head>
<body>
<div th:id="headerFragment" th:fragment="headerFragment" >
<div class="navbar navbar-fixed-top" >
<div class="row text-center top-buffer-small bg-white">
<img width="310" th:src="#{/images/company_logo.png}"/>
</div>
</div>
<div class="row text-center nav-box bg-dark-blue row-fluid">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<div class="row top-buffer-small bottom-buffer-small">
<div class="col-sm-3">
<a class="banner-link" href="#" th:href="#{/reports/dashboard}"
>DASHBOARD</a>
</div>
<div class="col-sm-3">
<a class="banner-link" href="#" th:href="#{/admin/home}"
>ADMIN</a>
</div>
<div class="col-sm-3">
<a class="banner-link" th:href="#{/help/about}"
>HELP</a>
</div>
<div class="col-sm-3">
<a class="banner-link" th:href="#{/logout}"
>LOGOUT</a>
</div>
</div>
</div>
<div class="col-xs-1"></div>
</div>
</div>
</body>
</html>
And the landing page, after login is:
index.html
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:th="http://www.w3.org/1999/xhtml"
layout:decorator="fragments/default">
<head lang="en">
<title>Home</title>
</head>
<body>
<div layout:fragment="content">
<div class="row bg-medium">
<h1 class="top-buffer-small"><<system-name>></h1>
<p class="top-buffer-tiny">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.</p>
<h3>Juridictions</h3>
<ul>
<li>Jurisdiction A</li>
<li>..</li>
</ul>
</div>
</div>
</body>
</html>
The problem I am having here is everything gets justified to the left while it should obey the classes defined on the divs. I have worked with Thymeleaf enough to know the layout is working, for the header is there, though with problematic rendering.
And I can access all the JavaScript and CSS files defined on the file I include at the head of the default and header fragments, fragments/common.html.
I also imagine this is something very simple to work out, but I am banging my head on the table for a while on this. What am I not seeing here?
I forgot to load the bootstrap CSS onto the common.html template...
All it took was:
<!--bootstrap -->
<link rel="stylesheet" th:href="#{/css/bootstrap-3.3.7.min.css}"/>
Really!
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.
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>