background color not inherited - html

The background and the padding are not applying and the css is not overriding the bootstrap style and when i keep the container style the css display style is not applied.
check the below code:
body{
background-color: #f5d9d5;
font-family: 'Nunito' , sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<title>Document</title>
</head>
<body>
<div class="tcontainer bg-light p-2">
<img src="data:image/.." alt="">
<h4>ping pong score keeper</h4>
<div class="panel ">
<h3><span class="p1">0</span> to <span class="p2">0</span></h3>
<p>Use the buttons below to keep score</p>
<h4>playing to
<select class="form-select" aria-label="Default select example">
<option value="3">3</option>
<option value="5">5</option>
<option value="9">9</option>
<option value="12">12</option>
</select></h4>
</div>
<button>P1 +1</button>
<button>P2 +2</button>
<button>Reset</button>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
how the website appears

Try adding !important to the background-color css property. Your CSS property is getting overwritten. adding !important should make the results look like follows:
body{
background-color: #f5d9d5 !important;
font-family: 'Nunito' , sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<title>Document</title>
</head>
<body>
<div class="tcontainer bg-light p-2">
<img src="data:image/.." alt="">
<h4>ping pong score keeper</h4>
<div class="panel ">
<h3><span class="p1">0</span> to <span class="p2">0</span></h3>
<p>Use the buttons below to keep score</p>
<h4>playing to
<select class="form-select" aria-label="Default select example">
<option value="3">3</option>
<option value="5">5</option>
<option value="9">9</option>
<option value="12">12</option>
</select></h4>
</div>
<button>P1 +1</button>
<button>P2 +2</button>
<button>Reset</button>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>

Link the Css
<link rel="stylesheet" href="css/style.css">
Then try to refresh the

The bg-light class you are trying to apply to tcontainer is not working since the version of bootstrap that you are using here i.e. bootstrap 3.4.1 does not contain a definition for bg-light and bg-dark. Try updating the bootstrap version, since I don't see a mistake in the code itself.

Related

Bootstrap Progress bar dots (bullet-point)

I want to make a progress bar using Bootstrap that has some dots on that progress bar as in the image below. How can I do that? Or where exactly should I research?
.progress {
width: 278px;
height: 7px;
left: 597px;
top: 489px;
}
.progress-bar {
background: #007BFF;
border-radius: 100px;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card">
<div class="card-body">
<div class="justify-content-center">
<div class="progress" style="width: 100%">
<div class="progress progress-bar" aria-valuenow="15%" aria-valuemin="0%" aria-valuemax="100%"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Try using range bars
https://getbootstrap.com/docs/5.1/forms/range/
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
</head>
<body>
<label for="customRange1" class="form-label">Range bars</label>
<input type="range" class="form-range" id="customRange1" />
</body>
</html>

CSS width is not working on HTML select tag

I am learning Bootstrap v5.0. I am trying to resize the select tag with CSS width but it is not working. I also tried Bootstrap .col and it is also not working.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input</title>
</head>
<body>
<div class="alert bg-light">
<div class="container">
<h4 class="alert-heading">Custom file input</h4>
<hr>
<div class="input-group">
<select class="form-select" style="width: 40px;">
<option value="1">C</option>
<option value="2">C++</option>
<option value="3">Java</option>
<option value="4">Python</option>
<option value="5">JavaScript</option>
</select>
<input type="file" class="form-control" multiple>
</div>
</div>
</div>
<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>
</body>
</html>
How can I resize this select tag?
If it is possible with bootstrap then please suggest me a solution with bootstrap otherwise CSS.
Replace your width with max-width, and your select tag will behave as expected.
Bootstrap actually adds a style rule which makes the width of the select very fluid.
select {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
width cannot override these style rules, which is why you should be using max-width

Font Awesome Icons are not working in HTML

I've been working on a Javascript To-Do app and included some icons from Font Awesome. But they're just not showing up. So far I've tried:
Disabling adblockers and reloading Pages
Trying out different browsers.
Removing CDN and using Font Awesome CSS itself in the project.
I've already googled regarding this problem double-checked my CDN link, checked the recent documentation and everything seems alright. What did I do wrong?
I have attached the HTML Code Snippet and the screenshot from the browser below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght#300&family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>To do List</title>
</head>
<body>
<header>
<h1>My todo list</h1>
</header>
<form>
<input type="text" class="todo-input">
<button class="todo-button" type="submit">
<i class="fas fa-user-md"></i>
</button>
<div class="select">
<select name="todos" class="filter-todo">
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="uncompleted">Uncompleted</option>
</select>
</div>
</form>
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
Browser View
Change fas fa-user-md to fa fauser-md and add it directly to button.
Like so -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght#300&family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>To do List</title>
</head>
<body>
<header>
<h1>My todo list</h1>
</header>
<form>
<input type="text" class="todo-input">
<button class="todo-button fa fa-user-md" type="submit">
</button>
<div class="select">
<select name="todos" class="filter-todo">
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="uncompleted">Uncompleted</option>
</select>
</div>
</form>
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
Edit: fas, far etc is supported in Font Awesome 5 and above. The version is used in this example is 4.7.0 which is supports fa.

Multi select dropdownlist in bootstrap not displaying dropdown menus

I want to integrate a multiselect dropdown list in my web page. But the list does not show the dropdown menu when click.The dropdown displays its menu if i remove bootstrap.min.css from head tag, but the menus not aligned well.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Money Withdrawal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-
select.min.css">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript">
$(function () {
$('.selectpicker').selectpicker();
});
</script>
</head>
<body>
<div class="row">
<div class="col-lg-6 mx-auto">
<label class="text-white mb-3 lead">Where do you live?</label>
<!-- Multiselect dropdown -->
<select multiple="" class="selectpicker" id="exchange_p" tabindex="-98">
<option>BSE</option>
<option>NSE</option>
<option>NCDEX</option>
<option>MCX</option>
<option>NSDL</option>
<option>ICEX</option>
</select>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/bootstrap- select.min.js">
</script>
</body>
</html>

Can't reduce the height of the textbox

Can't override and reduce the height of a bootstrap textbox.
<div class="form-group row">
<label class="col-xl-3">Posted Speed Limit (mph)</label><input type="text" class="col-xl-1 ps" autocomplete="off" id="sl" onkeydown="return keyval(event)" onkeyup="return valkey(event)" name="num3" required="required"><span id="rspan" class="rspan"><span>⚠</span>Enter a numeric value > 0 and ≤ 90</span></input>
</div>
The above is my input tag and below is the css for class = "ps"
.ps{
min-height: 2%;
}
I can't increase or reduce the height. when it comes to the width, I can increase it but can't reduce it.
How do i solve this?
I have tried your code. In my opinion, you should try with id. It may happen that the CSS of the col-xl-1 class is overwritten on your CSS. Or else what you can try is !important to emphasize your CSS code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
#txtBox1 {
margin: 10px;
min-height: 50px;
}
</style>
</head>
<body>
<form>
<input type="text" class="col-xl-1 ps" id="txtBox1">
<button class="btn btn-primary">Submit</button>
</form>
</body>
</html>