Bootstrap in Slim

In a Slim 3 application, we can use Twig template engine, to easily create a standard page template, or layout. We will create a few site pages (home, about, contact).

In this articles we will learn how to add bootstrap front end framework in slim and create a base layout app.twig that can be use by any/all of your application’s views to give all of your pages a consistent design and structure.

Step 1: Install twig template engine through composer
$ composer require slim/twig-view

Step 2: Add bootstrap css, javascript and jquery cdn in our base template
Create new folder template in resources/views/templates/app.twig and add new file called app.twig. This file is act as base layout. Here we have to include bootstrap css, bootstrap js and jquery in our base template view twig.

<html>
 <head>
 <meta charset="utf-8"/>
 <title>Slim 3</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css
          /bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFc
          JlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <link rel="stylesheet" href="{{ base_url }}/css/app.css" >
 </head>
 <body>

    {% include 'templates/include/navigation.twig' %}
 
 <div class="container">
 
        {% block content %} {% endblock %}
 </div>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>

In app.twig we have to include navigation.twig for navigation. In above code we have
{% block content %} {% endblock %}

Where we define our content inside the block statement above. If any file or view want to use the above layout template have to define content for app.twig.

Step 3: Define include folder to create frequently used layout
Create new folder called include in templates add new file called navigation.twig and add code below for navigation.


<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

Step 4: We have to extend app.twig template and have to define block of content for our app.twig layout inside our resources/views/home.twig 

{% extends 'templates/app.twig' %}
{% block content %}
      Home
{% endblock %}

Step 5: Add style sheet to our application, inside the public folder add new folder called css and add app.css file 

body{
    padding-top:80px;
    padding-bottom: 40px;
}