i cant style my hr tag between h1 and button,if i use a older version of bootstrap that is working,but with 5.0.0 isnt.
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
</div>
</div>
</body>
</html>
this is the style sheet
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
background-size: cover;
}
}
hr{
border-color: #F05F44;
border-width: 3px;
max-width: 65px;
You need to override the bootstrap style. That can be done by using !important on the style.
body,
html {
background: url(header.jpg) no-repeat center center fixed;
background-size: cover;
font-family: 'Montserrat', sans-serif;
height: 100vh;
width: 100vw;
}
hr {
border-color: #F05F44 !important;
height: 3px !important;
max-width: 65px !important;
}
<link href="//fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="container">
<div class="row">
<h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
</div>
</div>
do hr.<className> for edit any hr tag
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hello, world!</title>
</head>
<style>
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
background-size: cover;
}
hr.new1 {
border-top: 1px solid red;
}
/* Dashed red border */
hr.new2 {
border-top: 1px dashed red;
}
/* Dotted red border */
hr.new3 {
border-top: 1px dotted red;
}
</style>
<body>
<div class="row">
<h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
<hr class="new1">
<hr class="new2">
<hr class="new3">
<button class="btn btn-primary btn-xl">Find out more</button>
</div>
</body>
</html>
Related
I have edited the default checkboxes look of HTML and created my own styles, the thing is that the property position of the checkbox makes it bypass other elements, how can I avoid that?
Example of what is happening: https://www.screencast.com/t/ELwluGBaX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500,700&display=swap" rel="stylesheet">
<!-- Our css -->
<title>Session Asigment</title>
<style>
label::before {
content: "";
border: solid 1px #FF6E0B;
position: absolute;
width: 1.4em;
height: 1.4em;
border-radius: 3px;
}
input[type=checkbox] {
display: none !important;
}
.checkbox-titles [type=checkbox]:checked + label:after {
/* check */
font-family: "Font Awesome 5 Free";
color: #fff;
content: "\f00c";
font-weight: 900;
padding-left: 0.2em;
padding-bottom: 0.2em;
/* Label */
position: absolute;
width: 1.4em;
height: 1.4em;
border-radius: 3px;
background-color: #FF6E0B;
}
</style>
</head>
<body>
<div class="checkbox-titles">
<input type="checkbox" value="test" id="test">
<label for="test"></label>
</body>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!--select2-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
</html>
Position absolute removes the item from the flow of the DOM.
Elements that are not positioned absolutely act as if the ones that are dont even exist.
I suggest using something like Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Or i suggest using the normal positioning, position: static
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500,700&display=swap" rel="stylesheet">
<!-- Our css -->
<title>Session Asigment</title>
<style>
label::before {
content: "";
border: solid 1px #FF6E0B;
position: absolute;
width: 1.4em;
height: 1.4em;
border-radius: 3px;
}
input[type=checkbox] {
display: none !important;
}
.checkbox-titles [type=checkbox]:checked + label:after {
/* check */
font-family: "Font Awesome 5 Free";
color: #fff;
content: "\f00c";
font-weight: 900;
padding-left: 0.2em;
padding-bottom: 0.2em;
/* Label */
position: absolute;
width: 1.4em;
height: 1.4em;
display: inline-block;
border-radius: 3px;
background-color: #FF6E0B;
}
.checkbox-titles label {
width: 1.4rem;
height: 1.4rem;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="checkbox-titles">
<input type="checkbox" value="test" id="test">
<label for="test"></label><span>Test Bla Bla Bla</span>
</body>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!--select2-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
</html>
I already did a circle with my input of type color I need that circle to be inside of another one, I already tried out with some things but doesn't work with an input, I would like to know how can I do that?
The circle its actually inside of the other one the thing it's you can't actually see it, how can I solve this?
This is how it should looks like: https://www.screencast.com/t/0Xw9Sv4NDgqT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Our css -->
<title>Colour picker</title>
<style>
input[type="color"] {
opacity: 0;
display: block;
width: 22px;
height: 22px;
border: none;
border-radius: 50% !important;
position: relative;
}
#color-picker-wrapper {
width: fit-content;
height: fit-content;
border-radius: 50% !important;
position: relative;
}
.pick-color{
font-family: 'Nunito Sans', sans-serif;
color: #A2A2A2 ;
}
.outer {
background-color:white;
width:2rem; /* You can define it by % also */
height:2rem; /* You can define it by % also */
position:relative;
border:2px solid #A2A2A2 ;
border-radius: 50%;
}
.inner {
top: 25%; left:25%; /* of the container */
width:50%; /* of the container */
height:50%; /* of the container */
border:1px solid black;
border-radius: 50%;
opacity: 0;
}
</style>
</head>
<body>
<!--<div id="wrapper" style="text-align: center;">
<input type="text" id="hex">
<input type="color" id="color">
</div>-->
<div class="container-fluid">
<div class="row d-flex justify-content-center mt-3">
<p class="mr-2 pick-color"><strong>Pick a color</strong></p>
<div id="color-picker-wrapper">
<input type="color" id="color-picker">
</div>
</div>
<div class="outer circle shapeborder">
<input type="color" class="inner">
</div>
</div>
<!--This is for testing, this change the background of the body and set the color HEX to the input-->
<script>
/*let inputColor = document.querySelector('#color');
let inputHex = document.querySelector('#hex');
let borderColor = document.getElementById('color');
let colorWrapper = document.getElementById('wrapper');
colorWrapper.style.backgroundColor = borderColor.value;
inputColor.addEventListener('input', () => {
let color = inputColor.value;
inputHex.value = color;
document.body.style.backgroundColor = color;
});*/
var color_picker = document.getElementById("color-picker");
var color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
</script>
</body>
</html>
The idea here is that you will have:
An outermost div (#color-picker-container): responsible for the outer border.
An inner div (#color-picker-wrapper) a little bit smaller: responsible for presenting the picked color.
An innermost input (#color-picker): set opacity:0 to be hidden away
const color_picker = document.getElementById("color-picker");
const color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
input[type="color"] {
opacity: 0;
}
#color-picker-container {
border-radius: 50%;
border: 2px solid #A2A2A2;
width: 1.5rem;
height: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
#color-picker-wrapper {
border-radius: 50%;
width: 80%;
height: 80%;
}
.pick-color {
font-family: 'Nunito Sans', sans-serif;
color: #A2A2A2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Our css -->
<title>Colour picker</title>
</head>
<body>
<div class="container-fluid">
<div class="row d-flex justify-content-center mt-3">
<p class="mr-2 pick-color"><strong>Pick a color</strong></p>
<div id="color-picker-container">
<div id="color-picker-wrapper">
<input type="color" id="color-picker">
</div>
</div>
</div>
</div>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I've developed a header and a footer in bootstrap and styled them in CSS. But there's a white space above the header and also below the footer. I'm not sure what is causing the white space to appear there.
Here's the code:
header.php
<html dir="ltr" lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/main.css" media="all">
<link href="css/main.css" rel="stylesheet">
<meta charset='utf-8' />
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
</head>
<nav class="navbar navbar-expand-lg navbar-static-top" id="topNav">
<img src="images/logo.png" alt="Logo">
</nav>
footer.php
<footer class="footer">
<div class="container">
<p class="m-20 text-center text-white"><br></p>
</div>
</footer>
main.css
body {
margin-top: 60px;
margin-bottom: 100px;
}
.footer {
position: sticky;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #CC0033;
}
#topNav {
position: sticky;
width: 100%;
height: 70px;
line-height: 60px;
background-color: #CC0033;
}
I don't know what you're exactly trying to do but here's what I got,
the problem was with the CSS, but check what the classes in the nav are doing
html,body {
height:100%;
}
body{
position:relative
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #CC0033;
left:0;
}
#topNav {
position: fixed;
top:0;
left:0;
width: 100%;
height: 70px;
line-height: 60px;
background-color: #CC0033;
}
<html dir="ltr" lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/main.css" media="all">
<link href="css/main.css" rel="stylesheet">
<meta charset='utf-8' />
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
</head>
<nav class="navbar navbar-expand-lg navbar-static-top" id="topNav">
<img src="images/logo.png" alt="Logo">
</nav>
<footer class="footer">
<div class="container">
<p class="m-20 text-center text-white"><br></p>
</div>
</footer>
I have this animation that works well if appllied to some div background image but when I tried to put some elements inside the content go below, I tried disabling content: '' but I lost the animation effect.
The goal here is invert colors of all elements, text and image using the CSS filter, I tried with the actual settings it works as expected and I am getting the result I want (white/red).
The only issue I am facing is putting the content inside the div :
html,
body {
background-color: #ddd;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.banner {
width: 936px;
height: 288px;
color: #fff;
background-color: #cc0000;
transition: 2s all;
}
.logo {
width: 298px;
height: 91px;
}
.banner:before {
display: block;
height: 100%;
content: "";
background: inherit;
background-clip: content-box;
box-sizing: inherit;
transition: 2s all;
padding-left: 0;
filter: brightness(0%) sepia(1) invert(1);
}
.banner:hover:before {
padding-left: 936px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</head>
<body>
<div class="banner">
<img class="logo" src='https://image.flaticon.com/icons/svg/1852/1852293.svg' />
<p>Coming soon</p>
<div class="container">
<div class="row">
<div class="col-xs-3">
<h1>89</h1>
</div>
<div class="col-xs-1">
<h1>:</h1>
</div>
<div class="col-xs-3">
<h1>60</h1>
</div>
<div class="col-xs-1">
<h1>:</h1>
</div>
<div class="col-xs-3">
<h1>24</h1>
</div>
</div>
</div>
</div>
</body>
</html>
i am not able to fix my footer at the bottom of the page.when the data is large in,the footer is showing on the data which i need to put on bottom of the page.below is my code please tell me what i am doing wrong.
<!doctype html>
<html class = "no-js" ng-app = "PreSales-Huddle" lang = "en">
<head>
<meta charset = "utf-8">
<title ng-bind = "title"> </title>
<meta name = "description" content = "">
<meta name = "viewport" content = "width = device-width">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel = "stylesheet" href = "styles/main.css">
<link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<head profile = "http://www.w3.org/2005/10/profile">
<meta name="google-signin-scope" content="profile email">
<style>
body {
background-size: cover;
background-position: top center;
}
.footer {
text-align: center;
width: inherit;
color: #747474;
border-top: 1px solid #e5e5e5;
position: static;
bottom: 0;
margin-top: 75%;
padding-right: 0%;
font-family: calibri;
}
</style>
</head>
<body>
<div class = "container" >
<header class = "header">
</header>
<div class="title" id="titleText" disabled>ABC</div>
<main class = "main" id = "main">
<div ng-view = ""></div>
</main>
<footer class = "footer" id="footer">
<p><span style="background-color:whitesmoke">footer. </span></p>
</footer>
</div>
Write position: fixed, bottom: 0 for class footer inside css.
.footer {
position: fixed;
bottom: 0;
}
<!doctype html>
<html class="no-js" ng-app="PreSales-Huddle" lang="en">
<head>
<meta charset="utf-8">
<title ng-bind="title"> </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css />
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css>
<meta name="google-signin-scope" content="profile email">
<style>
body {
background-size: cover;
background-position: top center;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
width: inherit;
color: #747474;
border-top: 1px solid #e5e5e5;
position: static;
bottom: 0;
margin-top: 75%;
padding-right: 0%;
font-family: calibri;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
</header>
<div class="title" id="titleText" disabled>ABC</div>
<main class="main" id ="main">
<div ng-view=""></div>
</main>
<footer class="footer" id="footer">
<p><span style="background-color:whitesmoke">footer. </span></p>
</footer>
</div>
I cleaned up your HTML and added this to your CSS:
position: fixed;
bottom: 0;
width: 100%;
footer {
position: absolute;
bottom: 0;
}