I have modified my datatable to be editable but I ran into a display problem and it looked like below:
I played around in firefox's inspector changing some css settings and fixed the issue so now it looks like this.
What I modified is this block of css it was class="col-sm-12 col-md-12", I modified it so that it's just class="col-sm-12 col-md.
Now how can I make my css changes permanent for this table only? ps, I know the tags say boostrap-4 but I'm actually using boostrap-5. Couldn't find it in the tags.
Try adding an important tag like this to your main css stylesheet to override your bootstrap.
.col-sm-12{width:100%!important;}
In the head section of your html place your custom.css below bootstrap.css to override the styling
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="custom.css" rel="stylesheet" type="text/css">
</head>
Related
I want to make login page using bootstrap and react. I use the following style from official page. I added these all bootstrap and css files in index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link href="all.css" rel="stylesheet">
<link href="autorization.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="bootstrap.bundle.min.js"></script>
<script src="jquery.min.js"></script>
</html>
But result is another than when I open throug a regular html page. The font is different.
This is how it should be:
And this is what I have:
I don't understand why, because I didn't change css files...
This could be the issue with index.js file. There you remove importing index.css line.
Remove this line in index.js file.
import './index.css';
You maybe load another CSS file after bootstrap rewrites CSS style rules from BS or bootstrap CSS file is not loaded, please check it in the console or in the browser which style from which file is applied like a first
You can dominate with important;
example:
font-family: 'Lilita One'!important;
I have a project going on, in several components, I need to put styles.
Bootstrap is working fine. But when I added style.css it does not seems to catch up.
I have checked the page source and the style.css file is linked properly to my index.html file.
my file structure:
This is the head tag of my index.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="%PUBLIC_URL%/style.css">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>News Scroller</title>
</head>
It depends, what does your Webpack create when it compiles? How are you even putting your react component into your index.html now?
It seems like those are not there yet. These few things needs to be done:
There should be a div where your react application is mounted
Your index.html shouldn't reference styles.css directly. It's usually imported in your App.js or `Index.js, depending on your naming
In the style.css file, I was writing the CSS selector incorrectly.
I wrote this before : .input-group .input-group-sm .col-md-3
which is not able to select the className.
Instead of this I replaced the "" between the classNames and the CSS rules worked.
When I open https://bomengeduld.github.io/debadkamers/ on my mobile device, half of the project is not rendering. Only headr & first section is showing. Second section not. It looks completily blanc. It does renders perfect on desktop.
What I have tried so far
1) I have added:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2) I tried to add css to <style> tag in <head>
3) The css is held in seperate file, and I already tried to add it to the style.css file.
https://github.com/bomengeduld/debadkamers/blob/master/css/responsive.css
It should look like this
You are not referring to the css folder change <link rel="stylesheet" href="style.css"> to <link rel="stylesheet" href="css/style.css">
I currently have this as my base template, but depending on the route (using this as router)
, it has to switch out the css for another one, I tried but couldn't find a way to do this.
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app.css" />
<Title>Title</Title>
</head>
<body>
<div id="render-target"></div>
</body>
You cannot control the css file in meteor, because when the server starts, all the css files will be merged into one file. In order to define a css for a particular module, it would be better to use less or sass to define the namespace
I am starting out at writing my own website and following a few tutorials on HTML5 and CSS. I am using netbeans to create and edit my project.
Here is my index.html file
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="newcss" href="newcss.css" type="text/css">
</head>
<body>
<p>This is css</p>
</body>
</html>
Here is my css file, called newcss.css
p {
color: #FFF;
}
I have my css file in the root folder of the webpage, same as the index file. All I am trying to do is change the colour of the text so I can see my style sheet is working. I am sure it is something really simple but can't seem to see it at the moment.
Thanks in advance for any help,
Mash
From the validator (assuming you add an HTML 5 Doctype):
Error Line 7, Column 57: Bad value newcss for attribute rel on element
link: The string newcss is not a registered keyword.
<link rel="newcss" href="newcss.css" type="text/css">
To load a stylesheet you have to use the stylesheet relationship, not the newcss relationship (which doesn't exist).
Fix your rel attribute.
Try the below one
<link rel="stylesheet" href="newcss.css">
Change your rel="stylesheet"
Change link rel:
<link rel="newcss" href="newcss.css" type="text/css">
to:
<link rel="stylesheet" href="newcss.css" type="text/css">