I want bootstrap legend's underline to be more thick.
I would like to override twitter bootstrap css.
Is it possible?
Yes you can.
legend {
border-bottom:10px solid #000000;
}
To further increase/decrease the thickness, you can increase/decrease the pixels in the border-bottom. Hope this helps.
Yes. With CSS:
Bootstrap currently uses:
legend {
border-bottom: 1px solid #E5E5E5
}
In order to increase the thickness, simply increase the 1px value to something greater:
legend {
border-bottom: 5px solid #E5E5E5
}
JSFiddle example.
In order to get your own CSS to override the Bootstrap CSS, ensure your CSS is included on your page after Bootstrap, otherwise your style will be ignored:
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="yourStylesheet.css">
</head>
Have you tried actually looking on the css code? It's border-bottom on legend.
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: 40px;
color: #333333;
border: 0;
border-bottom: 1px solid #e5e5e5; /* that's the one */
}
Related
I have an issue creating a title for a web page.
Here is title:
<!DOCTYPE html>
<html>
<head>
<style>
.title {
border-top: 2px solid grey;
color: grey;
text-size:20px;
}
</style>
</head>
<body>
<div class="title">Düsseldorf markets</div>
</body>
</html>
I need to move the market word to the bottom and it should be displayed like that:
Düsseldorf
markets
Any idea how can I do it with the help of CSS only(i.e how can I change title CSS class to get desired view)?
You can use a CSS hack to acheive this if you really want to use CSS only. First, make the text disappear by setting it to the color of the background. Then use the before and after selectors to rerender the content.
However, easier would be to use span tags in your HTML, then make each of them have display: block to get a line break.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--font_size: 20px;
--text_col: grey;
--text_margin: 10px;
}
.title {
border-top: 2px solid grey;
font-size: var(--font_size);
color: white;
}
.title:before {
content: "Düsseldorf";
color: var(--text_col);
position: absolute;
left: 10px;
top: var(--text_margin);
}
.title:after {
content: "markets";
color: var(--text_col);
position: absolute;
left: 10px;
top: calc(var(--font_size) + var(--text_margin));
}
</style>
</head>
<body>
<div class="title">Düsseldorf markets</div>
</body>
</html>
You can use padding-right with calculation. padding-right: calc(100% - 10ch); This is very simple, no complex.
.title {
border-top: 2px solid grey;
color: grey;
font-size: 20px;
padding-right: calc(100% - 10ch); /* Düsseldorf is 10 character */
box-sizing: border-box;
}
<div class="title">Düsseldorf markets</div>
A simple way to approach this - use a width property on a element. Then, by word-break rule (which is 'normal' by default and you don't need to specify this) words will be auto-wrap on next line, when there is no free place on container
here is demo
P.S. And you have a typo - did you mean font-size except for text-size?
When I created some code, I noticed something strange. The DOWNLOAD button touches the end of the left wall, there is no gap (500% zoom). But when I decrease the zoom from 500% to 250%, a piece of background appears (green color). Watch the video on which I show it. Below is the source code from the video. Is this a browser rendering bug or my code is bugged?
Windows 10, 10.0.18362, 64-bits
Google Chrome, 75.0.3770.100, 64-bits
video: https://youtu.be/uwAEixLBUeU
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
<style>
html, body { margin: 0; border: 0; padding: 0; font-family: 'Montserrat', sans-serif; font-size: 1em; line-height: 1.2; color: #222; }
html { background: #bbb; }
body { width: 1000px; margin: 0 auto; background: #fff; }
a { text-decoration: none; }
.modelerInputReport {
overflow: hidden;
padding: 5px;
}
.modelerInputReportDiv {
float: right;
}
.modelerInputReportDiv span {
display: inline-block;
}
.modelerInputReportDiv button {
vertical-align: middle;
cursor: pointer;
font-weight: bold;
padding: 8px;
color: #fff;
border: 1px solid #ccc;
background: #0066cc;
margin-left: 5px;
}
.modelerInputReportDiv button:hover {
border: 1px solid #1B273F;
}
.modelerInputReportDiv button:active {
background: #cc7600;
border: 1px solid #402400;
box-shadow: inset 0 0 10px 2px #402400;
}
</style>
</head>
<body>
<div class="modelerInputReport">
<div class="modelerInputReportDiv">
<span id="modelerInputReportMsg">(generate to unlock) -</span>
<span>Report:</span>
<button id="modelerInputReportPrint" class="modelerInputReportPrint">PRINT</button>
<button id="modelerInputReportDownload" class="modelerInputReportDownload">DOWNLOAD</button>
</div>
</div>
</body>
</html>
In my experience this sort of thing is a rendering 'quirk', rather than a 'bug' per se. When you change the zoom level of a document, you're asking the browser to scale your '1px' border to a different number of pixels wide. Sometimes this doesn't equal a whole number of pixels, so the browser needs to do something to account for that. That something might be anti-aliasing, rounding widths to the nearest pixel, etc. This sort of thing needs to happen whenever you have anything that's not a whole number of pixels on screen. It's one of those things that happens at high-zoom levels, and in most cases it's not a big enough problem to worry about.
If it is a problem in your case, you can try doing things to minimise the effect, for example:
Use non-pixel measurements border: 0.1rem solid #CCC
Adjust the way the background is drawn: for example, include spacer elements between your buttons, and background color them, leaving the containing element background the same color as its border.
Experiment with small margin, transform or position adjustments (0.5px - 1px) to nudge the element slightly over the border.
These are all indirect ways of tricking the browser's renderer into doing something that's better for your specific case, and I'm not sure any of these will actually work. They might have undesirable side effects in other OS's and browsers, too.
TL:DR - It's the browser, and don't worry about it unless you really need to!
this is display:inline-block; issue because of inline-block use some spacing
Use float: left instead of display: inline-block,
Use this css
.modelerInputReportDiv span {
float:left;
}
.modelerInputReportDiv button {
float:left;
vertical-align: middle;
cursor: pointer;
font-weight: bold;
padding: 8px;
color: #fff;
border: 1px solid #ccc;
background: #0066cc;
margin-left: 5px;
}
I want to have combination of 2 colors for bootstrap badge. I dont want to mix 2 colors instead want to do something like this:
This is the first time I am having this kind of requirement. So completely not sure how to do this.
You can try this:
.label {
border-radius: 1.25em !important;
}
.label-warning {
padding: 0.1em 0.8em !important;
color: black !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<span class="label label-danger"><span class="label label-warning">28</span></span>
</body>
Hope this helps!
I have extracted the important part of the code that #Marvin put up at W3Schools' TryIt:
.badge {
color: black;
background: orange;
border: 5px solid red;
padding: 0 5px;
}
What you want to do is set the text color and background, and set a different color for the border, with an appropriate thickness.
You should look at the whole thing at his link, http://www.w3schools.com/code/tryit.asp?filename=FAQVDL441G2K
Working Example:
span.badge {
color: black;
background: orange;
border: 5px solid red;
padding: 0 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<span class="badge">2B</span>
</div>
Current result: bottom border is colored gray
Desired result: all borders are white
Problem: border-color is set to white in the CSS
.zoom {
border-width: 2px 0px 2px 0px;
background: white;
border-color: white;
}
<button class="zoom">???</button>
You have to set the border-style as solid explicitly for it to work. The gray border that you see at the bottom is because of the default UA styling which I is border-style: outset.
As noted by Marcos Pérez Gude in his comment the default border-style for buttons is outset and that for input and textarea elements is inset.
.zoom {
border-width: 2px 0px 2px 0px;
background: white;
border-color: white;
border-style: solid;
}
<button class="zoom">???</button>
Screeshot of UA Stylesheet Value:
Add this line in your CSS
border-style: solid;
As Harry highlighted : You need to specify the style of the border in order to change the default.
you can also use an easier-to-remember code like this :
.zoom {
border-top:3px solid white;
border-bottom:3px solid white;
background-color:white;
}
<button class="zoom">???</button>
In bootstrap 4, you can use border utilities to add or remove an element’s borders.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<button class="border-0 bg-white">???</button>
I am applying a background image on input type button. for this i have written my code in style.css. But now i want that button will look like as it is default, but my restriction is that i can not delete css style from style.css. But i can override it in other css style1.css.
so how can i override this?
style.css
button
{
background:red;
}
if i override like this it shows nothing.
style1.css
button
{
background:none;
}
Probably a duplicate question for Can you style html form buttons with css?.
Well, as far as button or any other input type is considered you can do that by adding this:
HTML
<input type="submit" name="submit" value="Submit Application" id="submit" />
CSS
#submit {
background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:6px;
color: #fff;
font-family: 'Oswald';
font-size: 20px;
text-decoration: none;
cursor: poiner;
border:none;
}
#submit:hover {
border: none;
background:red;
box-shadow: 0px 0px 1px #777;
}
You can even try this,
input[type="submit"]{
background: #fff;
border: 1px solid #000;
text-shadow: 1px 1px 1px #000;
}
or even, you can add a class:
.my_button_type
{
background: #fff;
border: 1px solid #000;
text-shadow: 1px 1px 1px #000;
}
You can apply inline styling also:
<input type="button" style="background: #333; border: 0px;" />
So, you have many ways to do it.
You can either use inline styles, or use !important.
Example:
style1.css
button
{
background:none !important;
}
Or inline:
<button style="background: none;">
You can do it like this...
button { background:none !important; }
First, precedence is important:
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style1.css" />
You must put the css file after the original css that you want to overwrite.
Second, in your style1.css, there are so many approach do achieve what you want. Like cancelling out the css style that you want to overwrite
//style.css
button {
background: url("...");
}
//style1.css
button {
background: none;
}
or using !important to attributes you want to implement.