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>
Related
I tried to use a custom CSS file alongside my Bootstrap, but it's not working.
<!DOCTYPE html>
<html lang="en">
<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="bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<script src="bootstrap.min.js"></script>
<title>NRRN Concrete Udhyog</title>
</head>
On this section of the document, I tried to use my own custom CSS:
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/Images /cover.jpg" id="slide-1-background" class="d-block w-100" alt="slide1">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
My CSS code:
#slide-1-background {
background-color: black !important;
}
You could try something like this. It overrides the classes of Bootstrap.
<!DOCTYPE html>
<html lang="en">
<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">
<!-- bootstrap css link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/* -- Your custom css goes here -- */
.custom{
background: #000;
font:10px 'Helvetica',sans-serif;
color:white;
}
</style>
</head>
<body>
<button type="button" class="btn btn-warning custom">Danger</button>
</body>
</html>
I have an example basic bootstrap card like below
Example 1:
I want to draw blue and green color side by side but I only could draw blue like below
Example 2:
When I try to give both classes at the same time it doesnt work.The one is always getting overwritten.
<div class="card blue green">
<div class="card-body">Basic card</div>
</div>
How to add them side by side?Seems like :before doesnt help.
Expected
Snippet is available below
.green:before{border-left: 5px solid #73BD07;}
.blue:before{border-left: 5px solid #4D33DC;}
.card:before{content: '';position: absolute;top: 0;left: 0;height: 100%;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Card</h2>
<div class="card blue green">
<div class="card-body">Basic card</div>
</div>
</div>
</body>
</html>
The problem is your green:before is overwritten by card:before since these classes are on the same div element. You can avoid this by using .green:after instead.
.green:after{
content: '';
border-left: 5px solid #73BD07;
position: absolute;
left: 5px;
top: 0;
height: 100%;
}
.blue:before{border-left: 5px solid #4D33DC;}
.card:before{content: '';position: absolute;top: 0;left: 0;height: 100%;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Card</h2>
<div class="card blue green">
<div class="card-body">Basic card</div>
</div>
</div>
</body>
</html>
Add a green border ::before pseudo elements.
.green{position:relative;}
.green::before{
border-left: 5px solid #73BD07;
position:absolute;
content:'';
top:0;left:0;bottom:0;
}
.blue{border-left: 5px solid #4D33DC !important;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Card</h2>
<div class="card blue green">
<div class="card-body">Basic card</div>
</div>
</div>
</body>
</html>
I'm trying to make a display heading with an image to the left and to the right of the heading. It works great om lg-display but when i make the display smaller the heading text seems to overflow the column to the right making it asymetrical. I would like the images and the text to stay even with smaller screens. Am I doing something wrong with the grid system?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>farfetch'd | Official Website ‐</title>
<!--CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- favicon -->
<link rel="icon" href="Images\Logo-feather-without-stroke.png">
</head>
<body>
<body>
<div class="container">
<div class="row">
<div class="col">
<img class="float-right" src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
<div class="col">
<h1 class="display-4 text-center">farfetch'd</h1>
</div>
<div class="col">
<img src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
</div>
</div>
</body>
I assume you want the text to always fit in the middle div, one way you can achieve this is using vw for length instead of rem
rem:
Represents the font-size of the root element (typically <html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this).
vw:
Equal to 1% of the width of the viewport's initial containing block.
Check length for more info on this.Final result would be:
.heading {
font-size: 5vw;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>farfetch'd | Official Website ‐</title>
<!--CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- favicon -->
<link rel="icon" href="Images\Logo-feather-without-stroke.png">
</head>
<body>
<body>
<div class="container">
<div class="row">
<div class="col">
<img class="float-right" src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
<div class="col">
<h1 class="heading text-center">farfetch'd</h1>
</div>
<div class="col">
<img src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
</div>
</div>
</body>
i think this is the default behavior of h1 tag
you can change this behavior with overflow-wrap overflow , etc in css
If I open it through a pc browser it will be responsive but when I change it to a tablet or smartphone view it does not become responsive, instead it becomes zoom (should zoom in if view). how to solve it?
Here its my code :
.modal-dialog{
padding-top: 100px;
border-radius:0;
}
.modal-header{
background-color: #F47321;
}
.modal-title{
color: white;
}
.modal-footer{
background-color: #FFFFFF;
margin-top: 0;
}
.modal-body{
background-color: #FFFFFF;
color: black;
}
.orange{
background-color: #F47321;
}
.grey{
background-color: #807874;
}
.title-header{
background-color: #F47321;
}
.body {
background-color: #807874;
}
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="modal.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dist/css/pencarian2.css">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Regular.otf">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Medium.otf">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Bold.otf">
<style>
#font-face {
font-family:'Elivio',sans-serif;
font-size:100px;
div{
font-family:Elivio;
}
</style>
<title>Selamat Datang</title>
<body class="body">
<div class="content">
<div class="container">
<br>
<div class="modal-header">
<h4 class="modal-title" style="text-align: left; font-family: MavenPro-Bold"> SYARAT & KETENTUAN</h4>
</div>
<div class="modal-body">
<p style="font-family:MavenPro-Regular;"><strong></strong><strong>SYARAT DAN KETENTUAN</strong></p>
<p> </p>
</div>
<div class="modal-footer">
<div align="left">
<label class="checkbox-inline">
<input type="checkbox" id="check" title="Please agree to our policy!" name="checkbox" style="font-family:MavenPro-Regular;" />Saya setuju dengan syarat & ketentuan
</label>
<br>
<p ><label class="label label-danger">*Silahkan ceklis setuju untuk melanjutkan</label></p>
</div>
<form method="POST" action="pengajuan" align="">
<input type="submit" name="btncheck" class="btn btn-success" id="btncheck" value="Lanjutkan" />
</form>
</div>
<p align="center"><font color="white">© Rumah Zakat 2018</font></p>
</html>
let me know if there is a wrong code, because men are always wrong whoops ...
You need to add the viewport <meta> tag to your <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
...Note that you'll also need to add the <head> section itself (you appear to have omitted it):
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="modal.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dist/css/pencarian2.css">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Regular.otf">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Medium.otf">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Bold.otf">
<style>
#font-face {
font-family: 'Elivio', sans-serif;
font-size: 100px;
div {
font-family: Elivio;
}
</style>
<title>Selamat Datang</title>
</head>
<body class="body"> ... </body>
</html>
I would like to know how I can have a sticky header? I have been figuring out that for the whole day and still don't know how to do. Can anyone help me for that? What I want is that when I scroll down, the header will keep sticking on the top.
These are my codes. Thanks a lot!
header {
padding: 20px 0;
}
header .row,
footer .row {
display: flex;
align-items: center;
}
header h1 {
font-weight: 700;
margin: 0;
}
header nav {
display: flex;
justify-content: flex-end;
}
header p {
padding: 0 20px;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Bo Kei Tuck Shop</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> <!--Google Font API-->
<link rel="stylesheet" type="text/css" href="about_us_main.css"> <!--CSS-->
<script type='text/javascript' src='javascript/jquery-3.1.0.js'></script> <!--jQuery-->
<script type='text/javascript' src='javascript/jquery-ui.min.js'></script> <!--jQuery-->
<meta name="description" content="Free Web tutorials"> <!--meta description-->
<meta name="keywords" content="HTML,CSS,XML,JavaScript"> <!--meta keywords-->
<meta name="content-language" content="en-US">
</head>
<body>
<!--header-->
<header class="container">
<div class="row">
<h1 class="col-sm-4">Bo Kei Tuck Shop</h1>
<nav class="col-sm-8">
<p>Hot Food</p>
<p>Cold Food</p>
<p>Snacks</p>
<p>Drinks</p>
<p>Contact Us</p>
</nav>
</div>
</header>
</body>
You can wrap your div and nav with another div and set it's class like in the docs (navbar navbar-default navbar-fixed-top).
Like this:
body {
height:1500px;
}
header {
padding: 20px 0;
}
header .row,
footer .row {
display: flex;
align-items: center;
}
header h1 {
font-weight: 700;
margin: 0;
}
header nav {
display: flex;
justify-content: flex-end;
}
header p {
padding: 0 20px;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Bo Kei Tuck Shop</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> <!--Google Font API-->
<link rel="stylesheet" type="text/css" href="about_us_main.css"> <!--CSS-->
<script type='text/javascript' src='javascript/jquery-3.1.0.js'></script> <!--jQuery-->
<script type='text/javascript' src='javascript/jquery-ui.min.js'></script> <!--jQuery-->
<meta name="description" content="Free Web tutorials"> <!--meta description-->
<meta name="keywords" content="HTML,CSS,XML,JavaScript"> <!--meta keywords-->
<meta name="content-language" content="en-US">
</head>
<body>
<!--header-->
<header class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="row">
<h1 class="col-sm-4">Bo Kei Tuck Shop</h1>
<nav class="col-sm-8">
<p>Hot Food</p>
<p>Cold Food</p>
<p>Snacks</p>
<p>Drinks</p>
<p>Contact Us</p>
</nav>
</div>
</div>
</header>
</body>
Try this
<nav class="navbar navbar-fixed-top">
Click here for bootstrap proper navigation
Have a look
body{height:20000px}
<!DOCTYPE html>
<html>
<head>
<title>Bo Kei Tuck Shop</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> <!--Google Font API-->
<link rel="stylesheet" type="text/css" href="about_us_main.css"> <!--CSS-->
<script type='text/javascript' src='javascript/jquery-3.1.0.js'></script> <!--jQuery-->
<script type='text/javascript' src='javascript/jquery-ui.min.js'></script> <!--jQuery-->
<meta name="description" content="Free Web tutorials"> <!--meta description-->
<meta name="keywords" content="HTML,CSS,XML,JavaScript"> <!--meta keywords-->
<meta name="content-language" content="en-US">
</head>
<body>
<!--header-->
<header class="container">
<div class="row">
<nav class="navbar navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bo Kei Tuck Shop</a>
</div>
<ul class="nav navbar-nav">
<li>Hot Food</li>
<li>Cold Food</li>
<li>Snacks</li>
<li>Drinks</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</header>
</body>