I want to set the modal dialog position lower , I've tried to change so many properties of bootstrap.css file but no one of that changes works,what is the property that I have to change and in what class?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bootstrap Login Form</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!--login modal-->
<div id="loginModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center">Login</h1>
</div>
<div class="modal-body">
<form class="form col-md-12 center-block">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block">Sign In</button>
<span class="pull-right">Register</span><span>Need help?</span>
</div>
</form>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<!-- script references -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Related
I would like to put my button at the top right at the same height as the title.
Here is an example:
enter image description here
My result for now
enter image description here
I think I have a problem with my divs? The button does not want to be placed at the top right.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<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">
<body>
<div class="home-content container">
<h1 class="text-start ps-3 pt-5 pb-3">Signalétique de SOLVAY BE (Euronext Brussels)</h1>
<button type="button" (click)="goBack()" class="btn btn-primary mb-2 mr-5 ">Retour</button>
<hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>
</body>
</html>
You can use rows and columns to keep content aligned in bootstrap. Rows have 12 columns so here I've used 10 columns for the heading and 2 columns for the button and aligned the button right.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<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">
<body>
<div class="home-content container">
<div class="row">
<div class="col-10 my-2">
<h2 class="text-start">Signalétique de SOLVAY BE (Euronext Brussels)</h2>
</div>
<div class="col-2 my-2 text-right">
<button type="button" (click)="goBack()" class="btn btn-primary">Retour</button>
</div>
<hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>
</div>
</body>
</html>
You could use position:absolute or float:right to make it in the right corner:
button{
position: absolute;
right:20px;
top:90px;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<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">
<body>
<div class="home-content container">
<h1 class="text-start ps-3 pt-5 pb-3">Signalétique de SOLVAY BE (Euronext Brussels)</h1>
<button type="button" (click)="goBack()" class="btn btn-primary mb-2 mr-5 ">Retour</button>
<hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>
</body>
</html>
or use float:right:
button{
float: right
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<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">
<body>
<div class="home-content container">
<h1 class="text-start ps-3 pt-5 pb-3">Signalétique de SOLVAY BE (Euronext Brussels)</h1>
<button type="button" (click)="goBack()" class="btn btn-primary mb-2 mr-5 ">Retour</button>
<hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>
</body>
</html>
This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 1 year ago.
I am trying to vertical align the 2 rows I have inside the container-fluid, they are already aligned horizontally. The goal is to have it in the middle of the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Mapa Gravida</title>
<style>
html, body {
height: 100%;
}
</style>
</head>
<body>
<div class="container-fluid h-100">
<div class="row justify-content-center align-items-center">
<p>O seu email foi enviado com sucesso, deseja criar outro mapa?</p>
</div>
<div class="row justify-content-center align-items-center">
<button type="button" class="btn btn-dark mr-3" onclick="redirectToCardioMap()">Mapa Cardio</button>
<button type="button" class="btn btn-dark" onclick="redirectToPregnantMap()">Mapa Gravida</button>
</div>
</div>
</body>
</html>
preview
You can first add d-flex class to your parent div and align the two rows vertically and horizontally using align-items-center and justify-content-center. Then you can wrap both your rows inside a div. Try below code :
<html lang="en">
<head>
<!-- Required meta tags -->
<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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Mapa Gravida</title>
<style>
html, body {
height: 100%;
}
</style>
</head>
<body>
<div class="d-flex container-fluid h-100 align-items-center justify-content-center">
<div >
<div class="row align-items-center">
<p>O seu email foi enviado com sucesso, deseja criar outro mapa?</p>
</div>
<div class="row justify-content-center align-items-center">
<button type="button" class="btn btn-dark mr-3" onclick="redirectToCardioMap()">Mapa Cardio</button>
<button type="button" class="btn btn-dark" onclick="redirectToPregnantMap()">Mapa Gravida</button>
</div>
</div>
</div>
</body>
</html>
I'm creating a simple login page with Angularjs, and am trying to add CSS to it using UI Bootstrap. One of the dependencies that UI Bootstrap required was Bootstrap CSS, so I have that included in my page too. Right now, my form looks as intended; what I want to do is to center the container itself vertically, so that it sits in the middle of the page. Is there a good way for me to go about doing that? I've searched up a lot of solutions, and they either do not change anything, or squash/change the form itself in a way that I don't want. And to be honest, I'm not sure if the reason I'm having difficulty centering the container has to do with UI Bootstrap or anything.
Here is an image of what the form looks like:
And here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body>
<!-- This is the div for the form component -->
<div ng-app="form-component">
<div class="container">
<div class="row center-block">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username-input">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password-input">
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div> <!-- class="col-sm-4" -->
<div class="col-sm-4"></div>
</div> <!-- class="row justify-content-center" -->
</div> <!-- class="container" -->
</div> <!-- np-app form-component -->
<script>
var form = angular.module("form-component", ["ui.bootstrap"]);
</script>
</body>
</html>
Any help would be greatly appreciated, thank you very much.
Try this
html, body {
height: 100%
}
.wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body>
<!-- This is the div for the form component -->
<div ng-app="form-component" class="wrapper">
<div class="container">
<div class="row center-block">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username-input">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password-input">
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div> <!-- class="col-sm-4" -->
<div class="col-sm-4"></div>
</div> <!-- class="row justify-content-center" -->
</div> <!-- class="container" -->
</div> <!-- np-app form-component -->
<script>
var form = angular.module("form-component", ["ui.bootstrap"]);
</script>
</body>
</html>
Buttons are inputs fields are not getting displayed on modal inside .aspx page but labels are visible
<div class="modal inmodal" id="mdl_filter" tabindex="-1" role="dialog" aria-hidden="true" style="position: absolute;">
<div class="modal-dialog modal-lg">
<div class="modal-content animated bounceInRight">
<div class="modal-header" style="height: 55px; padding-top: 10px">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Filter</h4>
</div>
<div class="modal-body">
<div class="tab-content">
<div class="space-10"></div>
<div id="filter_form" class="wizard-big filter_form">
<div class="step-content">
<div class="row">
<div class="col-lg-8">
<div class="form-group">
<label>By Number</label>
<input id="txt_filter_number" name="txt_filter_number" type="text" class="form-control" runat="server" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>
</div>
</div>
</div>
</div>
</div>
Output (missing buttons and input fields):
It looks like your .modal-footer div is inside the .modal-body div. The bootstrap documentation has an example that shows the footer div outside of the body div
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I tried the same html for the modal popup that you reported and its working perfectly. I think you are missing css or other css are hiding your modal elements. have a look here:
function showModal()
{
$('#mdl_filter').modal('show');
}
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<input type="button" id="btnShow" onclick="showModal();" value="Show Modal"/>
<div class="modal inmodal" id="mdl_filter" tabindex="-1" role="dialog" aria-hidden="true" style="position: absolute;">
<div class="modal-dialog modal-lg">
<div class="modal-content animated bounceInRight">
<div class="modal-header" style="height: 55px; padding-top: 10px">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Filter</h4>
</div>
<div class="modal-body">
<div class="tab-content">
<div class="space-10"></div>
<div id="filter_form" class="wizard-big filter_form">
<div class="step-content">
<div class="row">
<div class="col-lg-8">
<div class="form-group">
<label>By Number</label>
<input id="txt_filter_number" name="txt_filter_number" type="text" class="form-control" runat="server" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
I cannot figure out how to align the div containing the "Go" button vertically to bottom.
I tried several things but none worked.
Here is a jsfiddle: https://jsfiddle.net/2fzq3xb3/2/
and here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>align div to bottom inside div</title>
<meta charset="utf-8">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="#">
<div class="row" style="position: relative;">
<div class="col-xs-10">
<div class="row">
<div class='col-xs-6'>
<div class="form-group">
<label for="start-date">Start date</label>
<div class='input-group date' id='start-date'>
<input type='text' class="form-control" id='start_date' name='start_date' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-xs-6'>
<div class="form-group">
<label for="end-date">End date</label>
<div class='input-group date' id='end-date'>
<input type='text' class="form-control" id='end_date' name='end_date' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<?php
?>
</div>
</div>
</div>
</div>
<div class="col-xs-2" style="position: relative; bottom: 50%;transform: translateY(-50%);">
<button type="submit" class="btn btn-primary btn-xs">Go</button>
</div>
</div>
</form>
</div>
</body>
</html>
Thanks
Add this CSS to the parent div.
display:table-cell;
vertical-align:middle;
Here is the solution that I found. Any suggestions for improvements are welcome:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>align div to bottom inside div</title>
<meta charset="utf-8">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="#">
<div class="row">
<div class="col-xs-10" style="max-width: 500px;">
<div class="row">
<div class='col-xs-6'>
<div class="form-group">
<label for="start-date">Start date</label>
<div class='input-group date' id='start-date' style="max-width: 230px;">
<input type='text' class="form-control" id='start_date' name='start_date' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-xs-6'>
<div class="form-group">
<label for="end-date">End date</label>
<div class='input-group date' id='end-date' style="max-width: 230px;">
<input type='text' class="form-control" id='end_date' name='end_date' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<?php
?>
</div>
</div>
</div>
</div>
<div class="col-xs-2" style="height:74px;">
<button type="submit" class="btn btn-primary btn-ss" style="position:absolute; bottom: 15px;">Go</button>
</div>
</div>
</form>
</div>
</body>
</html>
Thanks
just make sure row has its position property set to static (default value). I don't know why, but if you change it to relative or absolute it won't work.
.col-xs-12 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div class="row">
<div class="col-xs-12">
some text...
</div>
</div>