I use Bootstrap 4 and following the documentation i implemented a toggle button group like this:
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox">Test
</label>
</div>
The toggle is supposed to change the buttons active state so i added the following css to change the buttons color and background-color when toggled:
.btn.btn-secondary {
color: BLACK;
background-color: WHITE;
}
.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
The problem is that the button doesnt toggle. It doesnt switch to the active state when clicked.
Then i found this working stackblitz. It doesnt use data-toggle="buttons",but it adds ng-bootstraps ngbButtonLabel and ngbButton to the label and input.
By following that example of the stackblitz and applying it to my code the toggle button functionality works correctly:
<div class="btn-group btn-group-toggle">
<label class="btn btn-secondary" ngbButtonLabel>
<input type="checkbox" ngbButton>Test
</label>
</div>
I would like to know, why doesnt the way i tried to implement it the first time following bootstraps documentaiton work?
this is just the selector problem. apply css by selecting particular element with its parent class. not need to apply any css using !important.
see the below snippet
.btn-group label.btn.btn-secondary {
color: BLACK;
background-color: WHITE;
}
.btn-group label.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</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.3.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.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox">Test
</label>
</div>
</body>
</html>
I suggest you read this article about CSS Specificity.
If you are using bootstrap events (in this case you are using a button which toggles a css class) remember to import the optional JavaScript file.
body {
padding: 2rem;
}
.btn.btn-secondary,
.btn.btn-secondary:hover {
color: BLACK;
background-color: WHITE;
}
.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></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">
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox" checked autocomplete="off"> Checked
</label>
</div>
May it will help.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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://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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<style>
.btn.btn-secondary {
color: BLACK;
background-color: WHITE;
}
.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
</style>
</head>
<body>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox">Test
</label>
</div>
</body>
</html>
Related
I have an image within a container that needs to be down scaled. When rendered out the full source code is as below.
/*STAFF LOGIN*/
#myMainContainer {
border: 10px solid red;
}
#logoStaffLoginPage {
width: 50%;
height: auto;
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href=/static/main.css>
<link rel="stylesheet" href=/static/style.css>
<link rel="shortcut icon" type="image/png" href="/static/media/favicon.png" />
<title></title>
<!--font-awesome including icon for shopping cart-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Font awesome-->
<script src="https://kit.fontawesome.com/efc09bd617.js" crossorigin="anonymous"></script>
<!--Google recaptcha-->
<script src="https://www.google.com/recaptcha/enterprise.js?render=6LdNCXEhAAAAAHy7vvB9oqTF8zSfVrGDIfr-82Re"></script>
<!--Google analytics-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-20BMMNWM05"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-20BMMNWM05');
</script>
</head>
<body>
<div class="container" id="myMainContainer">
<div class="row">
<div class="col">
<img src="/media/logoWithText.png" alt="Logo" id="logoStaffLoginPage">
</div>
</div>
<div class="row">
<div class="col bodyTextBold centerText">
Staff Login
</div>
</div>
</div>
<div class="container">
<form method="post" action="/accounts/login/">
<input type="hidden" name="csrfmiddlewaretoken" value="V3d7Hqf3vYG8whYv6xF7yU0Cak3dKk21xn7U6X6dxCXEPdHAWd9URA8Sc69YRlOy">
<label for="id_username">Username:</label>
<br>
<input class="form-control" type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" required id="id_username">
<br><br>
<label for="id_password">Password:</label>
<br>
<input class="form-control" type="password" name="password" autocomplete="current-password" required id="id_password">
<br>
<br>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
I have tried with max-width and max-height in css and none of them seem to work. Also I have tried to put the img out of the container, and even outside it does not scale properly. Also I have tried clear the cookies, and still I am unable to scale down the image.
Below is a screen dump of the page, and I want to down scale the logo image.
There seem to be jquery file missing. jquery can help to support with the responsive website design need which allow you to set the size condition of your file based on the window size limitation.
Well, you can try changing the size of parent container. and use object fit property for logo. The logo image inside will scale itself according to it.
Reference: https://www.delftstack.com/howto/css/resize-image-css/#:~:text=Use%20the%20object%2Dfit%20Property%20to%20Resize%20the%20Image%20in%20CSS,-We%20can%20use&text=We%20can%20specify%20the%20way,given%20dimension%20of%20the%20container.
parent-div{
height:200px;
width:300px;
}
image{
height:100%;
width:100%;
object-fit:contain;
}
I figured it out. I was edit the wrong css file.
I'm trying to use an external Style Sheet for putting my CSS code, When I put the CSS on the same file It works, but when the CSS code and is in an external sheet It does nothing,
for testing I create a php file with and input field and use the css for background color of page and style of an Input field called "account_name":
This is my code with css code in the same file:
<!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">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Add Account</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/dist/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap-3.3.6/js/tests/vendor/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-themes-1.10.3/jquery-ui-themes-1.10.3/themes/black-tie/jquery-ui.css">
<!-- Alertify Librery-->
<link rel="stylesheet" type="text/css" href="alertify/css/alertify.css">
<link rel="stylesheet" type="text/css" href="alertify/css/themes/bootstrap.css">
<script src="alertify/alertify.js"></script>
<!-- Modal librery-->
<script type="text/javascript" src="librerias/js/sweetalert2.js"></script>
<script type="text/javascript" src="librerias/js/sweetalert2.min.js"></script>
<link rel="stylesheet" href="librerias/css/sweetalert2.css" type="text/css">
<link rel="stylesheet" href="librerias/css/sweetalert2.min.css" type="text/css">
<style type="text/css">
body{
color: #fff;
background: #3598dc;
font-family: 'Roboto', sans-serif;
}
.signup-form {
width: 600px;
margin: 0 auto;
padding: 5px 0;
}
.signup-form form {
color: #9ba5a8;
border-radius: 3px;
margin-bottom: 15px;
background: #F0FFF0;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form h2 {
color: #333;
font-weight: bold;
margin-top: 0;
}
input#account_name {
border-radius: 10px;
border: 1px solid #73AD21;
padding: 5px;
width: 400px;
height: 35px;
float: left;
color: #0000CD;
background-color : #ffee88;
}
</style>
</head>
<body>
</br>
</br>
<div class="signup-form">
<form method="post" id="add_form">
<h2>Add Account</h2>
<hr>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label>Please Enter Account Name</label>
<input type="text" class="form-control" id="account_name" name="account_name" required="required">
<input type="hidden" name="key" value="addcuenta" >
</div>
</div>
</br>
</br>
</br>
</br>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">Accept</button>
</div>
</form>
</div>
</body>
</html>
<script>
//Send Data to Add
$(document).on('submit', '#add_form', function(e){
e.preventDefault();
var data = $(this).serialize();
$.ajax({
//Send Data To add
url: 'processAddAccount.php',
type: 'POST',
dataType: 'json',
data : data,
success: function(data)
{
alert('Account Add');
},
error: function(errorThrown)
{
alert(errorThrown);
}
});
});
</script>
But If I put the css code in a external sheet called: "style.css", the css format makes nothing, these are the php and css file:
php code:
<!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">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Add Account</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/dist/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap-3.3.6/js/tests/vendor/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-themes-1.10.3/jquery-ui-themes-1.10.3/themes/black-tie/jquery-ui.css">
<!-- Load css style file-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Alertify Librery-->
<link rel="stylesheet" type="text/css" href="alertify/css/alertify.css">
<link rel="stylesheet" type="text/css" href="alertify/css/themes/bootstrap.css">
<script src="alertify/alertify.js"></script>
<!-- Modal librery-->
<script type="text/javascript" src="librerias/js/sweetalert2.js"></script>
<script type="text/javascript" src="librerias/js/sweetalert2.min.js"></script>
<link rel="stylesheet" href="librerias/css/sweetalert2.css" type="text/css">
<link rel="stylesheet" href="librerias/css/sweetalert2.min.css" type="text/css">
</head>
<body>
</br>
</br>
<div class="signup-form">
<form method="post" id="add_form">
<h2>Add Account</h2>
<hr>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label>Please Enter Account Name</label>
<input type="text" class="form-control" id="account_name" name="account_name" required="required">
<input type="hidden" name="key" value="addcuenta" >
</div>
</div>
</br>
</br>
</br>
</br>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">Accept</button>
</div>
</form>
</div>
</body>
</html>
<script>
//Send Data to Add
$(document).on('submit', '#add_form', function(e){
e.preventDefault();
var data = $(this).serialize();
$.ajax({
//Send Data To add
url: 'processAddAccount.php',
type: 'POST',
dataType: 'json',
data : data,
success: function(data)
{
alert('Account Add');
},
error: function(errorThrown)
{
alert(errorThrown);
}
});
});
</script>
The css file style.css:
body{
color: #fff;
background: #3598dc;
font-family: 'Roboto', sans-serif;
}
.signup-form {
width: 600px;
margin: 0 auto;
padding: 5px 0;
}
.signup-form form {
color: #9ba5a8;
border-radius: 3px;
margin-bottom: 15px;
background: #F0FFF0;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form h2 {
color: #333;
font-weight: bold;
margin-top: 0;
}
input#account_name {
border-radius: 10px;
border: 1px solid #73AD21;
padding: 5px;
width: 400px;
height: 35px;
float: left;
color: #0000CD;
background-color : #ffee88;
}
Please any Ideas?
The problem is you need to link your CSS file just before the closing head tag ! All because of specificity rule of CSS ! Try this
HTML
<!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">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Add Account</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/dist/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap-3.3.6/js/tests/vendor/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-themes-1.10.3/jquery-ui-themes-1.10.3/themes/black-tie/jquery-ui.css">
<!-- Alertify Librery-->
<link rel="stylesheet" type="text/css" href="alertify/css/alertify.css">
<link rel="stylesheet" type="text/css" href="alertify/css/themes/bootstrap.css">
<script src="alertify/alertify.js"></script>
<!-- Modal librery-->
<script type="text/javascript" src="librerias/js/sweetalert2.js"></script>
<script type="text/javascript" src="librerias/js/sweetalert2.min.js"></script>
<link rel="stylesheet" href="librerias/css/sweetalert2.css" type="text/css">
<link rel="stylesheet" href="librerias/css/sweetalert2.min.css" type="text/css">
<!-- Linking external custom CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>
<body>
<br />
<br />
<div class="signup-form">
<form method="post" id="add_form">
<h2>Add Account</h2>
<hr>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label>Please Enter Account Name</label>
<input type="text" class="form-control" id="account_name" name="account_name" required="required">
<input type="hidden" name="key" value="addcuenta">
</div>
</div>
<br />
<br />
<br />
<br />
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">Accept</button>
</div>
</div>
</form>
</div>
<script>
//Send Data to Add
$(document).on('submit', '#add_form', function(e) {
e.preventDefault();
var data = $(this).serialize();
$.ajax({
//Send Data To add
url: 'processAddAccount.php',
type: 'POST',
dataType: 'json',
data: data,
success: function(data) {
alert('Account Add');
},
error: function(errorThrown) {
alert(errorThrown);
}
});
});
</script>
</body>
</html>
Remember : Your style.css file should be in css folder of root directory .
I'm testing, please, Why for example If I change input ID in the HTML code and then I change my CSS to formar the new input ID, the css style doesn't apply to my Input? Do I have to reset something in the browser?
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 1 year ago.
I have some text (p element) and two buttons next to it. However, both buttons dont look center aligned horizontally at the same level as the text (p element). The buttons seem slightly below the text.
How to make them look like they are on the same level horizontally?
Code snippet:
body {
background-color: rgb(44, 63, 83);
}
#timer {
margin-top: 1%;
}
#time-p {
color: white;
font-family: Helvetica, Arial, sans-serif;
font-size: 3rem;
display: inline-block;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- My own CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="timer">
<p id="time-p">00:00:00</p>
<!-- Start and reset buttons -->
<button class="btn btn-success btn-lg">Start</button>
<button class="btn btn-danger btn-lg">Reset</button>
</div>
<!-- jQuery 3.5.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- BootStrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
Use 'vertical-align' and adjust the default 'margin-bottom' of the 'p' tag.
body {
background-color: rgb(44, 63, 83);
}
#timer {
margin-top: 1%;
}
#time-p {
color: white;
font-family: Helvetica, Arial, sans-serif;
font-size: 3rem;
display: inline-block;
color: black;
vertical-align: middle;
margin-bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- My own CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="timer">
<p id="time-p">00:00:00</p>
<!-- Start and reset buttons -->
<button class="btn btn-success btn-lg">Start</button>
<button class="btn btn-danger btn-lg">Reset</button>
</div>
<!-- jQuery 3.5.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- BootStrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
wrap p tag in d-flex class & align-items-center
body {
background-color: rgb(44, 63, 83);
}
#timer {
margin-top: 1%;
}
#time-p {
color: white;
font-family: Helvetica, Arial, sans-serif;
font-size: 3rem;
display: inline-block;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- My own CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="d-flex align-items-center" id="timer">
<p class="mb-0 mr-1" id="time-p">00:00:00</p>
<!-- Start and reset buttons -->
<button class="btn btn-success btn-lg mr-1">Start</button>
<button class="btn btn-danger btn-lg">Reset</button>
</div>
<!-- jQuery 3.5.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- BootStrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
The modern way of doing things like that is to use Flexbox. Check out a basic tutorial on Flexbox here: https://www.w3schools.com/css/css3_flexbox.asp
And an excellent game that helps to learn Flexbox here: http://www.flexboxdefense.com
Essentially you wrap your items within a div that has a class with the property display: flex; applied.
Then each of your items within will appear horizontally on the screen. You can use align-items: center; to get the correct alignment and justify-content: space-between; or justify-content: space-around; to spread the items across the row nicely.
So your #timer block would look something like:
#timer {
margin-top: 1%;
display: flex;
align-items: center;
justify-content: space-around;
}
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>
here is the problematic bit of code
:root {
--color-foreground-text-main: rgb(255, 72, 142);
--color-foreground-text-sub: rgb(0, 114, 153);
}
html,
body {
height: 100%;
}
img {
max-width: 100%;
}
#cover {
background: #222 url('Resources/img/cover.jpg') center center no-repeat;
background-size: cover;
color: var(--color-foreground-text-main);
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
#cover-caption {
width: 100%;
}
#subscribe-button {
text-align: center;
background: var(--color-foreground-text-main);
color: white;
outline: 0;
}
#subscribe-button:hover {
background: var(--color-foreground-text-sub);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--Mandatory meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!--Custom Styles-->
<link rel="stylesheet" href="SP_BaseStyle.css" />
<title>School Project</title>
</head>
<body>
<section id="cover">
<div id="cover-caption">
<div class="container">
<div class="col-12">
<br>
<div class="row">
<div class="p-0 pr-1 pb-1 m-0
col-12 col-sm-6 col-md-5">
<label class="sr-only">Name</label>
<input type="text" class="form-control form-control-lg" placeholder="George Smith">
</div>
<div class="p-0 m-0 pr-1 pb-1
col-12 col-sm-6 col-md-5">
<label class="sr-only">Email</label>
<input type="text" class="form-control form-control-lg" placeholder="george.smith#email.com">
</div>
<button type="submit" class="btn btn-lg mb-1
col-12 col-md-2" id="subscribe-button">Subscribe!</button>
</div>
↓
</div>
</div>
</div>
</section>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
after clicking the button out of nowhere a dark blue outline appears around the button. I looked around forums and the Bootstrap Docs about it but I cannot seem to find a way to change it's color or remove it altogether
I have tried setting the outline and the box shadow without any success.
NOTE: I know it is a visual queue that should not be removed and prefer just changing the color of it but if I cannot do it other way I would want to remove it internally and add it in CSS.
EDIT: Just for clarification we are talking about the 'subscribe' button not the arrow button. I am adding the code with the suggested changes. Also removing the border for clarity.
I thought it was outline but not, of course i didn't saw your code, but after i see, the problem is here:
border: 2px var(--color-foreground-text-sub) solid;
remove this line. that's all.
Edit: and after click, override this:
.btn.focus, .btn:focus {
outline: 0;
box-shadow: none!important;
}
:root {
--color-foreground-text-main: rgb(255, 72, 142);
--color-foreground-text-sub: rgb(0, 114, 153);
}
.btn.focus, .btn:focus {
outline: 0;
box-shadow: none!important;
}
html,
body {
height: 100%;
}
img {
max-width: 100%;
}
#cover {
background: #222 url('Resources/img/cover.jpg') center center no-repeat;
background-size: cover;
color: var(--color-foreground-text-main);
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
#cover-caption {
width: 100%;
}
#subscribe-button {
text-align: center;
background: var(--color-foreground-text-main);
color: white;
outline: 0;
}
#subscribe-button:hover {
background: var(--color-foreground-text-sub);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--Mandatory meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!--Custom Styles-->
<link rel="stylesheet" href="SP_BaseStyle.css" />
<title>School Project</title>
</head>
<body>
<section id="cover">
<div id="cover-caption">
<div class="container">
<div class="col-12">
<br>
<div class="row">
<div class="p-0 pr-1 pb-1 m-0
col-12 col-sm-6 col-md-5">
<label class="sr-only">Name</label>
<input type="text" class="form-control form-control-lg" placeholder="George Smith">
</div>
<div class="p-0 m-0 pr-1 pb-1
col-12 col-sm-6 col-md-5">
<label class="sr-only">Email</label>
<input type="text" class="form-control form-control-lg" placeholder="george.smith#email.com">
</div>
<button type="submit" class="btn btn-lg mb-1
col-12 col-md-2" id="subscribe-button">Subscribe!</button>
</div>
↓
</div>
</div>
</div>
</section>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
Just add this to your css:
button:focus {outline:0;}
That's small property named "outline" is mostly placed in pseudo classes. So to avoid it you may use outline:none or outline:0