CODEWITHSUNDEEP
phpsymfonysymfony4
sf_2018
sf_2018

Reputation: 115

bootstrap 4 in symfony4

I try add bootstrap4 in project symfony4 but bootstrap is not add in project

code twig.yaml:

twig:
paths: ['%kernel.project_dir%/templates']
debug: '%kernel.debug%'
strict_variables: '%kernel.debug%'
form_themes: ['bootstrap_4_layout.html.twig']

and I remove : 

paths: ['%kernel.project_dir%/templates']
debug: '%kernel.debug%'
strict_variables: '%kernel.debug%'

but also error bootstrap is not add .

code index.html.yml:

{% extends 'base.html.twig' %}

    {% block title %}Hello {% endblock %}

    {% block body %}
    <div class="container">
    {{ form_start(form) }}
    {{ form_widget(form, { 'attr': {'class': 'form-control'} } )}}
            <input type="submit" value="Send" class="btn btn-success" />

    {{ form_end(form) }}
    </div>
    {% endblock %}

and this result .. so bootstrap4 is not add:

enter image description here

Upvotes: 0

Views: 5392

Answers (3)

kasor
kasor

Reputation: 188

  • keep your initial twig configuration :

    twig:
paths: ['%kernel.project_dir%/templates']
debug: '%kernel.debug%'
strict_variables: '%kernel.debug%'
form_themes: ['bootstrap_4_layout.html.twig']

  • Make sure the SF4 bootstrap file is installed on your platform :

    [prjDir]/vendor/symfony/twig-bridge/Resources/views/Form/bootstrap_4_layout.html.twig

  • check that Bootstrap 4 assets (css, js) files are installed in your public directory, and correctly referenced by your index.html.twig via base.html.twig and not 'index.html.yml'

  • example of base.html.twig (extract ...)

    ...
<!-- Icons -->
{% block head_icons %}
<link href="{{ asset('vendors/css/flag-icon.min.css') }}" rel="stylesheet">
<link href="{{ asset('vendors/css/font-awesome.min.css') }}" rel="stylesheet">
<link href="{{ asset('vendors/css/simple-line-icons.min.css') }}" rel="stylesheet">
<link href="{{ asset('vendors/css/bootstrap-4-navbar.css') }}" rel="stylesheet">
{% endblock %}

<!-- Main styles for this application -->
{% block main_styles %}
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
{% endblock %}
...

Also check for JS includes in the file : base.html.twig Hope this help you.

Upvotes: 1

Amine Blel
Amine Blel

Reputation: 1

If someone still got this issue, the solution that I found is:

create a folder named css under public folder in your project, and put bootstrap.min.css file inside it.

then, in base.html.twig put <link href="{{ asset('css/bootstrap.min.css') }}" type="text/css" rel="stylesheet"> just before {% block stylesheets %}{% endblock %}

And that's it, Hope it helps :)

Upvotes: 0

Alex
Alex

Reputation: 86

The Bootstrap 4 form theme from Symfony only adds Bootstrap classes to your form inputs, it does not load or include Bootstrap in any way; that is up to you.

Please refer to [1] for documentation on how to include Bootstrap 4 into your templates.

Upvotes: 4

Related Questions