This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.
Hi
I am new to OctoberCMS and I am trying a simple project on localhost. I tried a basic bootstrap footer code and the class color is not showing. I attach the code here for reference. Please let me know if this has got to do with the default.htm? Thanks.
<footer class="page-footer font-small indigo">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Very long link 1</a>
</li>
<li>
<a href="#!">Very long link 2</a>
</li>
<li>
<a href="#!">Very long link 3</a>
</li>
<li>
<a href="#!">Very long link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>Last updated
You need the minimal setup as shown here:
https://getbootstrap.com/docs/4.3/getting-started/introduction/
This is the default.htm file that shows the rel link to the mark-up. I did not change anything.
I checked the assets folder. The css, fonts, images, javascript and vendor folders are resided there as well. Nothing was changed too.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>October CMS - {{ this.page.title }}</title>
<meta name="description" content="{{ this.page.meta_description }}">
<meta name="title" content="{{ this.page.meta_title }}">
<meta name="author" content="OctoberCMS">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="OctoberCMS">
<link rel="icon" type="image/png" href="{{ 'assets/images/october.png'|theme }}">
<link href="{{ 'assets/css/vendor.css'|theme }}" rel="stylesheet">
<link href="{{ 'assets/css/theme.css'|theme }}" rel="stylesheet">
{% styles %}
</head>
<body>
<!-- Header -->
<header id="layout-header">
{% partial 'site/header' %}
</header>
<!-- Content -->
<section id="layout-content">
{% page %}
</section>
<!-- Footer -->
<footer id="layout-footer">
{% partial 'site/footer' %}
</footer>
<!-- Scripts -->
<script src="{{ 'assets/vendor/jquery.js'|theme }}"></script>
<script src="{{ 'assets/vendor/bootstrap.js'|theme }}"></script>
<script src="{{ 'assets/javascript/app.js'|theme }}"></script>
{% framework extras %}
{% scripts %}
</body></html>
What theme is that? Bootstrap is not installed by default. You can either install it and reference it yourself, or use a theme that includes it.
I created a blank theme all over again and copied the bootstrap css and js files in the asset folder. In the default.htm, I call the js and css
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>October CMS - {{ this.page.title }}</title> <meta name="description" content="{{ this.page.meta_description }}"> <meta name="title" content="{{ this.page.meta_title }}"> <meta name="author" content="OctoberCMS"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="generator" content="OctoberCMS">
<!-- Scripts -->
<script src="{{ 'assets/js/bootstrap.bundle.js'|theme }}"></script>
<script src="{{ 'assets/js/bootstrap.bundle.min.js'|theme }}"></script>
<script src="{{ 'assets/js/bootstrap.js'|theme }}"></script>
<script src="{{ 'assets/js/bootstrap.min.js'|theme }}"></script>
<script src="{{ 'assets/js/bootstrap.bundle.js.map'|theme }}"></script>
<script src="{{ 'assets/js/bootstrap.bundle.min.js.map'|theme }}"></script>
<script src="{{ 'assets/js/bootstrap.js.map'|theme }}"></script>
<script src="{{ 'assets/js/bootstrap.min.js.map'|theme }}"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
{% framework extras %}
{% scripts %}
<!-- css -->
<link rel="icon" type="image/png" href="{{ 'assets/images/october.png'|theme }}">
<link href="{{ 'assets/css/bootstrap.css'|theme }}" rel="stylesheet">
<link href="{{ 'assets/css/bootstrap.min.css'|theme }}" rel="stylesheet">
<link href="{{ 'assets/css/bootstrap-grid.css'|theme }}" rel="stylesheet">
<link href="{{ 'assets/css/bootstrap-grid.min.css'|theme }}" rel="stylesheet">
<link href="{{ 'assets/css/bootstrap-reboot.css'|theme }}" rel="stylesheet">
<link href="{{ 'assets/css/bootstrap-reboot.min.css'|theme }}" rel="stylesheet">
<link href="{{ 'assets/css/bootstrap.css.map'|theme }}" rel="stylesheet">
<link href="{{ 'assets/css/bootstrap.min.css.map'|theme }}" rel="stylesheet">
<link href="{{ 'assets/css/bootstrap-grid.css.map'|theme }}" rel="stylesheet">
<link href="{{ 'assets/css/bootstrap-grid.min.css.map'|theme }}" rel="stylesheet">
<link href="{{ 'assets/css/bootstrap-reboot.css.map'|theme }}" rel="stylesheet">
<link href="{{ 'assets/css/bootstrap-reboot.min.css.map'|theme }}" rel="stylesheet">
{% styles %}
</head>
<body>
<!-- Content -->
<section id="layout-content">
{% page %}
</section>
<!-- Footer -->
<section id="footer-content">
{% partial "/footer" %}
</section>
</body></html>
But the footer class still won't display any color. I suspect that I am not calling 1 critical js.
I don't know, you're layout looks pretty confusing. Why don't you try something simpler? Start with what bootstrap suggests as a quick start and build from there?
@ddeschua53487 - You might want to try the Bootstrap starter kit theme for October. It has a pretty simple setup and would get you started right away - you can install the theme by visiting the URL below or by searching for the theme name in your Backend. There is a footer partial included with a simple example too.
Backend Themes Page: http://oc-plugintesting.test/backend/system/updates/install/themes
Bootstrap Starter Kit: https://octobercms.com/theme/prismify-bootstrap-starter-kit
1-8 of 8