ddeschua53487
ddeschua53487

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

mjauvin
mjauvin

What does your layout markup look like? Did you add the bootstrap js/css files?

mjauvin
ddeschua53487
ddeschua53487

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>

mjauvin
mjauvin

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.

ddeschua53487
ddeschua53487

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.

mjauvin
mjauvin

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?

jriley
jriley

@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