Twitter bootstrap on Node.js and Express

Question

How can I use Twitter Bootstrap on Node.js and Express?

I know I have to put CSS and Javascript files in ./public directory (if it's set default). But when I look for how to use Twitter Bootstrap on Node.js and Express, I get to know there are many variants on using Twitter Bootstrap.

For example, just put bootstrap CSS and JS files in appropriate directories, or specify :

<link rel='stylesheet' href='assets/css/bootstrap-responsive.css'> <link rel='stylesheet' href='https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap.js'>

etc, and also there are two sources, normal and .min.css file, each with CSS and JS. So how can I serve the appropriate Bootstrap file in Node.js and Express?

Here's a first few lines of my current code (is it necessary?), which is not working with responsive design (it doesn't stack vertically when I narrow the screen to mimic the size of smartphones, and instead just scale down the size with each ratio being the same).

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title><%= title %></title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link rel='stylesheet' href='/stylesheets/bootstrap.min.css'>
    <link rel='stylesheet' href='assets/css/bootstrap-responsive.css'>
    <script src='/javascripts/jquery-2.0.2.min.js'></script>
    <style type='text/css'>

        /* Large desktop */
        @media (min-width: 980px) {
            body {
                padding-top: 60px;
            }
        }

        /* smartphones */
        @media (max-width: 480px) {
            body {
                padding-top: 30px;
            }

        }
    </style>
</head>

possible duplicate of [static files with express.js](http://stackoverflow.com/questions/10434001/static-files-with-express-js) — moka, Jul 18 '13 at 10:30

score 3 · Accepted Answer · answered Jul 18 '13 at 10:39

3

Create one sub folder in public folder and name it as stylesheets.Then put all your twiter bootstraper css files in that stylesheets folder.Then you can link the file like below.Follow the same for js files also.

 <link rel='stylesheet' href='stylesheets/bootstrap.min.css'>
 <link rel='stylesheet' href='stylesheets/bootstrap-responsive.css'>
 <script src='javascripts/jquery-2.0.2.min.js'></script>

answered Jul 18 '13 at 10:39

sachin

13,605
14
42
55

I want to ask why you use `.min.css` for the first but `.css` for the second file? I also have `bootstrap.css` and `bootstrap-responsive.min.css`... How can I decide which one to use? Thanks. – Blaszard Jul 18 '13 at 10:58
@user2360798 1st use 'bootstrap.min.css'(minified version of bootstrap.css) then use bootstrap-responsive.min.css(minified version of bootstrap-responsive.css); – sachin Jul 18 '13 at 11:17

score 0 · Answer 2 · answered Jul 18 '13 at 10:33

Create a folder like .\public\js\lib\bootstrap and in bootstrap folder keep the two files bootstrap-combined.min.css and bootstrap.js whic you can get from bootstrap repository the in the ./views/index.html page include those files as

<link href="/js/lib/bootstrap/bootstrap-combined.min.css" rel="stylesheet"> 
<script src="/js/lib/bootstrap/bootstrap.js"></script>

it should now work for you....

Twitter bootstrap on Node.js and Express

2 Answers2