I have tried so many times to give less priority of Bootstrap CSS but I am not able to give it.
I have placed my custom.css below the CDN link of Bootstrap
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
Writing !important to all the CSS Properties would be a very hard task since I am working on a very big project which has many line of CSS Codes
Why dont use !important instead on your custom.css?
The !important rule in CSS is used to add more importance to a
property/value than normal.
In fact, if you use the !important rule, it will override ALL previous
styling rules for that specific property on that element!
https://www.w3schools.com/css/css_important.asp
The margins of the page are different when I compare the html file (in the browser) and the ejs file. I am using node/express and Bootstrap 4. I built the page initially in html. I wanted the content to fill the page from side edge to side edge, and I was able to do that with the html page.
html,body {
height: 100%;
width: 100%;
}
{
margin:0;
}
body {
overflow-x: hidden;
}
<div>
<div class="row">
<div class="col-lg-12 pl-5 pr-5 pb-5 pt-5 text-light" style="font-size:30px; background-color: pink;">
My Website
</div>
</div>
</div>
This will produce a div that is a band of pink color that goes from one edge of the screen to the other edge.
However, when I take the same html page and change it to an ejs file, there is about 1.3 cm of white space between the div and the edge of the screen. Not only that, but the background of white divs becomes a very pale gray background.
I didn't add any other css styling to make the background color change to this pale gray color. And this pale gray background only appears with ejs files, not with html files.
I do not have a partials ejs file except for one that contains messages, and that ejs file has no styling information. Every main page, eg, home page, about page, etc, is supposed to be self-contained in terms of css and html.
I do not know where the gray background is coming from.
Bootstrap (I'm using Bootstrap 4) is working fine for me. There were problems opening dropdown menus initially but I fixed that by downloading Bootstrap and putting the css file into the Public folder instead of using a cdn link to Bootstrap, but anyway the margin problem was there even before I did that.
Hi it sounds odd so I just doubled checked using my Bootstrap 4 template. It works very well the pink background run left edge to right edge no white spaces. Full template below for your ref. I expect it is smt with software installation. You need to make sure Bootstrap, jQuery, popper.js are all installed properly in your project anyhow. Let me know.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<!-- build:css css/main.css -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<!-- endbuild -->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 pl-5 pr-5 pb-5 pt-5 text-light" style="font-size:30px; background-color: pink;">
My Website
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<!-- build:js js/main.js -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- endbuild -->
</body>
</html>
BS has 2 classes "container" and "container-fluid" you need class "container-fluid" to force the content expand left edge to right edge. Code below should solve the issue. Let me know if all good after.
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 pl-5 pr-5 pb-5 pt-5 text-light" style="font-size:30px; background-color: pink;">
My Website
</div>
</div>
</div>
your code works just the fine for me, make sure you have written your backend code properly like this
const express = require('express');
const ejs = require('ejs');
const app = express();
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.get('/', (req, res)=>{
res.render('home', {Title: 'Welcome'});
});
app.listen(3000, ()=>{
console.log('Server is running on port 3000');
});
Make sure your EJS file is in a folder called 'views' and you have your css file in a folder called 'public'
I found what the problem is. It is the express-ejs-layouts module that I installed and used. I forgot I had done that and that's why I didn't mention this in the question. I also didn't think it would affect the layout so much, and I thought I had to install this as well as the ejs module for ejs to work properly. To be honest, I didn't know what the express-ejs-layouts module did.
Once I removed const expressLayouts = require('express-ejs-layouts') and the app.use(expressLayouts) middleware, the ejs files render fine now. The margins are flush with the edge of the page with container-fluid. There is no pale gray background anymore.
I also have to mention that the solution suggested by hang-coder above of putting the stylesheets in the correct order worked for the html files. Even though that was not the main question, it solved the issue of the html files not showing margins correctly in the browser when using container-fluid. I had wrongly put the Bootstrap scripts above the jQuery scripts. I had put those scripts in the wrong order in the ejs files too, and that was also part of the problem for why the margins were not displaying properly, but I corrected the order just before I asked the margins question in the ejs files because I had to do that to make the dropdown menu work, which was another problem I had just before I asked the margins question, but I wasn't sure whether they made a difference to the margins issue.
So the problem had nothing to do with mac screens or how Chrome browser displays in macs, as I originally thought.
This script is showing the correct margins in html files for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">.
</script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">.
</script>
</head>
<body>
<div class="container-fluid bg-primary">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
So in summary, placing the jQuery and Bootstrap scripts in the correct order and removing the express-ejs-layouts solved the problem.
simply i want to separate some part of MyCSS.css and Bootstrap4.css
because Bootstrap is breaking My CSS but i wanna use some part of Bootstrap4.
I know how to get part Bootstrap4 CSS code but searching one by one is so tire.
<link rel="stylesheet" href="Bootstrap4.css">
<link rel="stylesheet" href="MyCSS.css">
<body>
<!-- where i want to use only MyCSS.css -->
<div>
...
</div>
<!-- where i want to use only Bootstrap4.css -->
<div>
...
</div>
</body>
You can customize and download only the required bootstrap components from https://getbootstrap.com/docs/3.4/customize/
Download Bootstrap Sass and remove unwanted styles and compile only what u want
I'm new to this HTML CSS stuff and I like it. A few days ago I stumbled upon Bootstrap, and I liked it. How can I use it with dreamweaver ?
you can add the bootstrap files to your source (if you want to edit the bootstrap docs this is recomended) or just use the online-versions and apply the tags in the head part of your html document.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
and with this it should run no matter what IDE you use.
/S
So I just finished the layout for a website, which uses bootstrap, however I have my own CSS as well. Im getting a couple of modal issues which through the help of another coder have deduced its from calling bootstrap.min.css and my custom .css file. How can I include them both with no issues with the index.html?
<title>Kameechi</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/Rae.css" rel="stylesheet">
<style type="text/css">
That is right. The order implies that your styles would override bootstrap sometimes.
<head>
<title>Kameechi</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/Rae.css" rel="stylesheet">
</head>