Twitter Bootstrap Question posted in

Twitter bootstrap – How to add TwitterBootstrap to Symfony2

I want to use TwitterBootstrap in my Symfony2 bundle. Please give me a advise how to do that right way.
I use composer to install TwitterBootstrap into my vendor derectory (composer require twitter/bootstrap).
How to link css & js in to my twig template?

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you for the help.

    For now I don`t want to use additional bundles or other thinks. I just want to connect css and js files to my template.

    Solution I use for now is:

    1. Install fia composer jquery and twitterbootstrap in vendor/components/jquery and vendor/twbs/bootstrap directories

    2. In config.yml I create a named assets:

      # Assetic Configuration
assetic:
    assets:
        twbs_js_and_jq:
            inputs:
                - '%kernel.root_dir%/../vendor/components/jquery/jquery.min.js'
                - '%kernel.root_dir%/../vendor/twbs/bootstrap/dist/js/bootstrap.min.js'
        twbs_css:
            inputs:
                 - '%kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap.css'
        bootstrap_fonts_woff:
            inputs:
                - '%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.woff'
            output: fonts/glyphicons-halflings-regular.woff
    bootstrap_fonts_ttf:            
            inputs:
                - '%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.ttf'
            output: fonts/glyphicons-halflings-regular.ttf
    bootstrap_fonts_svg:
        inputs:
            - '%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.svg'
        output: fonts/glyphicons-halflings-regular.svg
    bootstrap_fonts_eot:
        inputs:
            - '%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.eot'

      It's important to create jQuery asset first. Assetic changes the paths to your assets, this will break any background images (or other paths) that uses relative paths, so I ned to add rule for the font files to make glyphicons work (find example here).

    3. In the head section of layout.html.twig file I paste:

      {% javascripts '@twbs_js_and_jq' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

{% stylesheets '@twbs_css' filter='cssrewrite' %}
     <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

    All worked!


  2. 0

    An easy way to integrate Bootstrap is to declare the stylesheet in the base.html.twig file :

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    You can also use asset to load your stylesheet. Have a look to Templating with Symfony

    Login or Signup to reply.
  3. 0

    Another way would be to use the MopaBootstrapBundle.
    With this Bundle you get a really great integration into Symfony, for example twig extensions and templates for use with Symfony Form component, so you don’t need to style everything by yourself.

    Login or Signup to reply.
  4. 0

    As all knows Bootstrap is related to assets, and all third party bundles, or direct includes lookls ugly (mostly form /vendor/ directory do not do this!). So better use Bower what created special for managing your asstes. You can configura it for install all assets to Symfony2 web directory and then use assets in twig. Here is some links for documentation:

    Instalation guide

    Configuration

    Hope this will help to you 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search