Current Version
Bootstrap 3.3.5, (*1)
Installation
Add bundle to your composer.json file
``` js
// composer.json, (*2)
{
"require": {
// ...
"pinano/bootstrap3-bundle": "dev-master"
}
}, (*3)
### Or, if you prefer, choose a specific version
``` js
// composer.json
{
"require": {
// ...
"pinano/bootstrap3-bundle": "3.3.5"
}
}
Add bundle to your application kernel
``` php
// app/AppKernel.php, (*4)
public function registerBundles()
{
$bundles = array(
// ...
new Pinano\Bootstrap3Bundle\PinanoBootstrap3Bundle(),
// ...
);
}, (*5)
### Download the bundle using Composer
``` bash
$ php composer.phar update pinano/bootstrap3-bundle
Install assets
Given your server's public directory is named "web", install the public vendor resources, (*6)
``` bash
$ php app/console assets:install web, (*7)
Optionally, use the --symlink attribute to create links rather than copies of the resources
``` bash
$ php app/console assets:install --symlink web
Usage
Once all the resources are in place, if you want to use the Bootstrap 3 javascript features (modals, dropdowns, etc.) you can edit any of your twig views or layouts to include the Bootstrap3 javascript files. If you don't want to use any of these features you can skip this step. Please refer to the Bootstrap 3 documentation to see what features are available., (*8)
Note: Bootstrap 3 javascript resources require that you have previously loaded jQuery library., (*9)
``` twig
{% block javascripts %}
{% javascripts
...
'@PinanoBootstrap3Bundle/Resources/public/js/bootstrap.js'
...
%}
{% endjavascripts %}
{% endblock %}, (*10)
Then you will want to load the css resources to take advantage of the grid and all the responsive utilities.
Note: The bootstrap-theme.css file is optional and is only intended to make Bootstrap 3 look nice out-of-the-box..
``` twig
{% block stylesheets %}
{% stylesheets filter='cssrewrite'
...
'bundles/pinanobootstrap3/css/bootstrap.css'
'bundles/pinanobootstrap3/css/bootstrap-theme.css'
...
'bundles/yourawesomebundle/css/awesomestylesheet.css'
...
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
If you want to create your own SCSS mix-ins or variables, you should import Bootstrap 3 SCSS files instead of the CSSs and create a css output using any of the SCSS filters available for assetic:
twig
{% block stylesheets %}
{% stylesheets filter='cssrewrite,scss'
...
'bundles/pinanobootstrap3/scss/_bootstrap.scss'
'bundles/pinanobootstrap3/scss/bootstrap/_theme.scss'
...
'bundles/yourawesomebundle/scss/awesomestylesheet.scss'
...
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}, (*11)
Note: See https://github.com/kriswallsmith/assetic/issues/53 for known limitations of assetic with CSS referencing., (*12)
I usually follow a simple inheritance schema when it comes to designing twig templates. That is, I have an app/Resources/views/base.html.twig file that I use as a site-wide template. Then, inside every bundle I have my own Resources/views/layout.html.twig file that extends the base template. Depending on the kind of application I'm designing I can place the Bootstrap stuff in the site-wide or the bundle-wide template. Then every view of a given bundle will extend the corresponding bundle layout.html.twig file, which in turn extends the site-wide template., (*13)
The folks at Sensio Labs have already covered this approach and you can check it in their documentation., (*14)
Licenses
I do not own Bootstrap 3 files at all, I'm just providing a Bundle package to easy-install them all. Refer to the source code of the included files from Bootstrap 3 for license information., (*15)
References
- http://getbootstrap.com/
- http://symfony.com
Wallogit.com
