Basic config for assetic bundle:
https://coderwall.com/p/cx1ztw/bootstrap-3-in-symfony-2-with-composer-and-no-extra-bundles
Installing assets in Symfony
https://symfony.com/blog/new-in-symfony-2-6-smarter-assets-install-command
Asset management in Symfony (merging /concatenating resources):
http://symfony.com/doc/current/assetic/asset_management.html
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles: [ 'AppBundle' ]
filters:
# Since Assetic generates new URLs for your assets, any relative paths inside your CSS files will break.
# To fix this, make sure to use the cssrewrite filter with your stylesheets tag. This parses your CSS
# files and corrects the paths internally to reflect the new location.
# !!! IMPORTANT When using the cssrewrite filter, don't refer to your CSS files using the @AppBundle syntax.
cssrewrite: ~
assets:
bootstrap_js:
inputs:
- '%kernel.root_dir%/../vendor/twbs/bootstrap/dist/js/bootstrap.js'
bootstrap_css:
inputs:
- '%kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap.css'
filters: [cssrewrite]
jquery:
inputs:
- '%kernel.root_dir%/../vendor/twbs/bootstrap/vendor/components/jquery/jquery.js'
with config like that (note keys: bootstrap_css, bootstrap_js, jquery) above you can refer to the assets with @ (@bootstrap_css, @bootstrap_js, @jquery)
{% block javascripts %}
{% javascripts '@jquery' '@bootstrap_js' %}
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
and
{% block stylesheets %}
{% stylesheets "@bootstrap_css" %}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}"/>
{% endstylesheets %}
{% stylesheets 'bundles/app/css/*' output='css/compiled/main.css' %}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}"/>
{% endstylesheets %}
{% endblock %}
and place it in base.html.twig for example
Bootstrap 4 examples:
https://v4-alpha.getbootstrap.com/examples/
CSSREWRITE:
When using the cssrewrite filter, don't refer to your CSS files using the @AppBundle syntax because it will crash linking inside css files (backgound images etc.)