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='.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>
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/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 – moka Commented Jul 18, 2013 at 10:30
2 Answers
Reset to default 3Create 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>
Create a folder like .\public\js\lib\bootstrap and in bootstrap folder keep the two files bootstrap-bined.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-bined.min.css" rel="stylesheet">
<script src="/js/lib/bootstrap/bootstrap.js"></script>
it should now work for you....