Menu
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>
324
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
