I have the following HTML element with bootstrap:
<div class="panel-footer">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
If you see there is a gray area (panel-footer):
The button uses pull-right class also that is float:right, but I would like the gray area that is actually the panel-footer div to fit within the button height.
This is the styles for panel-footer:
And this for the pull-right:
Any clue?
UPDATE:
I added after the button:
<div class="clearfix"></div>
And seems that fixed the problem. Is that ok?
Original Answer (2017)
you can try this (Bootstrap 3)
<div class="panel-footer text-right">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
You just need to add text-right class to your panel-footer.
It works for me.
Updates (2023-01-11)
Bootstrap 5
Use class text-end to make button realign to the right side.
.panel-footer {
background: #e9e9e9;
border-top: 0;
padding: 10px 15px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</head>
<body class="p-4">
<div class="panel-footer text-end">
<button class="btn btn-primary">Primary button</button>
</div>
</body>
</html>
Bootstrap 4 & 3
Use class text-right will make the alignment to the right.
.panel-footer {
background: #e9e9e9;
border-top: 0;
padding: 10px 15px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
<!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="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body class="p-4">
<div class="panel-footer text-right">
<button class="btn btn-primary">Primary button</button>
</div>
</body>
</html>
I ran your code you provided in a jsFiddle and got the same results. Even placing the button within the panel panel-default, still got the same results.
Here is a fix.
I created a jsFiddle
It includes two example one using your code with an override and one using a panel panel-default and panel-body with a css override.
hope that helps.
.panel-footer {
height: 50px !important;
}
#sep {
margin-top: 10px;
}
.panel-body {
background: #f3f3f3 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-footer">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
<div id="sep"></div>
<div class="panel panel-default">
<div class="panel-body">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
This is working for me.
<div class="footer">
Save
</div>
<div class="panel-footer">
<div class="form-group text-right">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
This will work properly.
Related
Could someone please help me with this, I'm trying to create the following:
With the below code:
<header>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</header>
<body>
<div class="d-flex flex-row mb-3" style="padding-left: 11rem;">
<div class="p-2"> <input type="text" class="form-control" placeholder="¿Que Buscas?"> </div>
<div class="p-2"> <input type="text" class="form-control" placeholder="Ciudad"> </div>
<div class="p-2"> <button type="button" class="btn bg-danger text-white">Buscar</button> </div>
</div>
</body>
I´ve ben trying to create this by using BootStrap´s classes.
Here is an example that you can use as a basis.
You can try to play with the borders of your 2 inputs. (border-left / border-right). You should also modify the border-radius of these two inputs.
With this, it will form a single input.
As for putting icons or buttons in the input, you can use the relative/absolute positions.
Now it's up to you to modify it (like modifying the shadow boxes, input focus, adding your other icons, ...) and to adapt it according to your needs.
<!DOCTYPE html>
<html lang="en">
<header>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<style lang="scss">
.buscando {
border-right-color: white;
border-radius: 0.25rem 0px 0px 0.25rem;
margin-right: -2px
}
.ciudad {
border-left-color: white;
border-radius: 0px 0.25rem 0.25rem 0px;
margin-left: -5px
}
button {
top: 0;
right: 0;
}
</style>
</header>
<body>
<div class="d-flex justify-content-center m-2">
<div>
<input
type="text"
class="form-control buscando shadow-none focus-none"
placeholder="¿Que Buscas?"
/>
</div>
<div class='position-relative'>
<input
type="text"
class="form-control ciudad shadow-none "
placeholder="Ciudad"
>
</input>
<button
type="button"
class="btn bg-danger text-white position-absolute"
>
Buscar
</button>
</div>
</body>
</html>
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>
Being upfront, I am terrible at CSS. My problem is I'm trying to center an image in a Bootstrap modal box that is centered on mobile and desktop and for the life of me, can't get it to work. How can I do this?
Thanks in advance!
This is the image
Here is one way of doing what you are looking for:
<!DOCTYPE html>
<html lang="en">
<head>
<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.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal with a centered image</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://picsum.photos/id/7/250/150" width="250" height="150">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
EDIT Adding a snippet to answer the comment about how can a flipcard instead of an image be centered.
<!DOCTYPE html>
<html lang="en">
<head>
<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.0/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.0/js/bootstrap.min.js"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="container">
<h2>Modal with a centered flipcard</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="flip-card" style="margin-left: auto; margin-right: auto;">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/1005/300/300" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm using Bootstrap Card, and in the footer, I have two buttons. What I need to do is align one button in the absolute center and another smaller button on the left side of the footer. And both buttons should be vertically middle aligned.
Here is my code:
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">
<div class="btn-wrapper text-center">
<a class="btn btn-secondary text-dark btn-sm">Remove</a>
<a class="btn btn-warning" style="">Next</a>
</div>
</div>
</div>
This aligns both cards to the center. But I need the Next button in center while the Remove button to the left. How do I do that?
Here is the jsbin for it: https://jsbin.com/vesobayuci/1/edit?html,js,output
Check the updated JSBIN
.remove-btn {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.btn-wrapper {
position: relative;
}
Please check Demo
https://output.jsbin.com/cezegetufe
.btn-wrapper .btn-secondary {
line-height: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card Example</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.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Card Header and Footer</h2>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">
<div class="btn-wrapper text-center d-flex justify-content-between">
<a class="btn btn-secondary btn-sm text-white d-flex align-items-center">Remove</a>
<a class="btn btn-warning" style="">Next</a>
</div>
</div>
</div>
</div>
</body>
</html>
You can absolutely position them like so
.card-footer .btn-wrapper{
position: relative;
min-height: 40px;
}
.card-footer .btn-wrapper .btn{
position: absolute;
top: 50%;
}
.card-footer .btn-wrapper .btn-warning{
left: 50%;
transform: translate(-50%, -50%);
}
.card-footer .btn-wrapper .btn-secondary{
left: 0;
transform: translate(0, -50%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<h2>Card Header and Footer</h2>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">
<div class="btn-wrapper text-center">
<a class="btn btn-secondary pull-left text-dark btn-sm">Remove</a>
<a class="btn btn-warning" style="">Next</a>
</div>
</div>
</div>
</div>
You can do this using transform property and Bootstrap 4 classes
.btn-warning {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card Example</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.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Card Header and Footer</h2>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">
<div class="btn-wrapper position-relative">
<a class="btn btn-secondary text-dark btn-sm">Remove</a>
<a class="btn btn-warning position-absolute">Next</a>
</div>
</div>
</div>
</div>
</body>
</html>
How can I make the background darker with bootstrap? I have found this code but have no idea where I can adjust the background or what kind of css code I must add to my style.
Found the code here:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
<!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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The CSS that is controlling the backdrop color is within the file modals.less and is controlled by the code below
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #333;
}
To make the background darker just overwrite the class .modal-backdrop within your own stylesheet and add a different background color.
Within the same less file there is a class called .modal-backdrop .in This class is controlling the opacity of the background.
.modal-backdrop.in {
filter: alpha(opacity=50);
opacity: .5;
}
You can overwrite this if the opacity is not what you're after too.