Best method to use Bootstrap in Laravel 4

Question

I am using now Laravel 4,
What is the best method to use bootstrap for my site?
Is there some stuff I need to change and where do I put the css files?

Someone sa

Answer 1

Here's the approach if you don't want to use bower.

• Download bootstrap and extract the contents inside public/components/

• Using Blade as your view compiler, use it like this:

---

<link href="{{ asset('components/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">

or like this

{{ HTML::style('components/bootstrap/dist/css/bootstrap.min.css') }}

Answer 2

You can just include it on your app with composer:

composer require twbs/bootstrap

Answer 3

Some things you must know about Laravel:

It has directly nothing to do with your front end, including Twitter Bootstrap.

Where you put your files is entirely up to you, but the public folder is (usually) where your public viewable files must go.

CSS and JavaScript files are directly downloaded by browser, so those files should be in your public folder.

To download/use Bootstrap you have some options:

1) Go to http://getbootstrap.com/ and download it.

2) Use bower (https://github.com/bower/bower) to download it for you.

3) If you are planning using a Bootstrap template, usually those already come with Bootstrap.

4) Use a CDN, like http://www.bootstrapcdn.com/

I, personally, use bower, those are the steps you can follow to install and use it:

Install it

[sudo] npm install bower

Create a .bowerrc file in your project dir, which tells bower where to download your packages:

{
    "directory": "public/bower"
}

Create a bower.json file, which holds your installed packages:

{
  "name": "YourApp.com",
  "dependencies": {
  }
}

Then you just need to install your packages using it:

bower install bootstrap -S
bower install jquery -S

And you can also use it to find packages

bower search google-code-prettify

After installing bootstrap, your css files would be located at:

public/bower/bootstrap/dist/css/

In Laravel there are many ways of including your assets, this is one of those, using Blade as you view compiler:

<link href="{{ asset('bower/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">