I have this Html:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class="d-flex">
<div>
<input type="text" class="input-text">
<p class="error">error message</p>
</div>
<button class="cursor pl-4">apply coupon</button>
</div>
If there is an error the button looks like in image!
How can equal the height of image even there is an error under input?
Use align-items: baseline on the according row, or align-self: baseline on the according element. Codepen.
align-self-basline or align-items-baseline would be the responsible classes in Bootstrap.
.flex {
display: flex;
}
.reset {
align-items: baseline;
}
<div class="flex reset">
<div>
<input type="text">
<p>Error</p>
</div>
<button>Button</button>
</div>
You can do these types of tricks for your requirement.
<div class="d-flex">
<div>
<input type="text" class="input-text"><button class="cursor pl-4">apply
coupon</button>
<p class="error">error message</p>
</div>
Related
I have a setup just like the one I replicated.
I wanted to put the checkbox vertically aligned in the middle (same height as the other col) so it doesn't look so strange.
Any idea how to achieve this?
label {
display: block !important;
}
.col-xs-6 {
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-6">
<label>Hello</label>
<input type="text" placeholder="Hello" />
</div>
<div class="col-xs-6">
<label>
<input type="checkbox" />
World
</label>
</div>
</div>
You should start by giving the row a display: flex then you should reset the label's margin.
Then you could center the div by either using margin: auto 0; or align-self: center; both will work. I would also recommend upgrading to bootstrap 4. Here is a tool to help you upgrade to bootstrap 4
label {
display: block !important;
margin-bottom: 0;
margin-top: 0;
}
.row {
display: flex;
}
.col-xs-6 {
border: 1px solid red;
}
.align-self-center {
align-self: center;
/* margin: auto 0; */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-6">
<label>Hello</label>
<input type="text" placeholder="Hello" />
</div>
<div class="col-xs-6 align-self-center">
<label>
<input type="checkbox" />
World
</label>
</div>
</div>
label {
display: block !important;
}
.col-xs-6 {
border: 1px solid red;
}
.row{
display:flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-6">
<label>Hello</label>
<input type="text" placeholder="Hello" />
</div>
<div class="col-xs-6">
<label>
<input type="checkbox" />
World
</label>
</div>
</div>
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
In the below code snippet, I tried to align the div inside .jumbotron to the center but it didn't work. Is there any extra class needed because I already tried .justify-content-center and .mx-auto.
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- EndCSS -->
<div class="jumbotron">
<div class="justify-content-center">
<h1 class="display-3">Lorem.</h1>
<p class="lead">Lorem, ipsum dolor.<span class="text-
warning">Lorem, ipsum.</span><br>Lorem ipsum dolor
sitamet.
</p>
</div>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
text-center class of bootstrap may help
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="jumbotron text-center">
<h1 class="display-3">Lorem.</h1>
<p class="lead">Lorem, ipsum dolor.<span class="text-
warning">Lorem, ipsum.</span><br>Lorem ipsum dolor sitamet.
</p>
</div>
You can use the following solution:
Set d-flex to the jumbotron to use flex classes (like justify-content-center) on the jumbotron.
Set the justify-content-center to the jumbotron itself to center its content.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="jumbotron d-flex justify-content-center">
<div>
<h1 class="display-3">Lorem.</h1>
<p class="lead">Lorem, ipsum dolor.<span class="text-
warning">Lorem, ipsum.</span><br>Lorem ipsum dolor
sitamet.
</p>
</div>
</div>
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- EndCSS -->
<div class="jumbotron">
<div class="d-flex flex-row justify-content-center">
<h1 class="display-3">Lorem.</h1>
<p class="lead">Lorem, ipsum dolor.<span class="text-
warning">Lorem, ipsum.</span><br>Lorem ipsum dolor
sitamet.
</p>
</div>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
Please try this code,To Is there any way to align jumbotron elements in center?
<!DOCTYPE html>
<html>
<head>
<!-- Credit: http://stackoverflow.com/questions/22196587/how-to-center-align-vertically-the-container-in-bootstrap -->
<title>Bootstrap Centered Jumbotron</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" />
<style type="text/css">
html, body {
height: 100%;
}
.container{
width: 1025px;
}
.vertical-center {
height: 100%;
width: 100%;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.vertical-center:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.vertical-center > .container {
max-width: 100%;
background-color: gold;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; /* <-- reset the font property */
}
#media (max-width: 768px) {
.vertical-center:before {
/* height: auto; */
display: none;
}
}
</style>
</head>
<body>
<div class="jumbotron vertical-center">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg"></div>
</div>
<div class="col-md-5 iPhone-features" style="margin-left:-25px;">
<ul class="top-features">
<li>
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>
</li>
<li>
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
</li>
<li>
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>
<p><strong>Check</strong><br>Constantly the status of your links.</p>
</li>
<li>
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
</li>
GET STARTED
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
</ul>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
</body>
</html>
I hope this code will be useful for you.
Thank you.
My code:
<div class="row">
<div class="col-md-9">
<img src" link ">
</div>
<div class="col-md-3">
<form> </form>
</div>
Try this
<!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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-9">
<img src="image.png" class="img-responsive" alt="text">
</div>
<div class="col-md-3">
<form> </form>
</div>
</body>
</html>
use this class to make the image responsive in bootstrap 4 class="img-fluid"
if the image is very small in width and still you want to make it to fit the grid then give image width 100%, you can use this class too "w-100" in BS4
have a look on my fiddle and tell me if that's why you are looking for.
<div class="container">
<div class="row">
<div class="col-6">
<img src="http://cedricmarchal.eu/wp-content/uploads/2018/12/pexels-photo-414612.jpeg" class ="img-fluid">
</div>
<div class="col-4">
<form>
<div class="form-example">
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required>
</div>
<div class="form-example">
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-example">
<input type="submit" value="Subscribe!">
</div>
</form>
</div>
</div>
css :
.container{
margin-top: 5px;
}
https://jsfiddle.net/m0Lc37fy/
Just add img-fluid class in img element, I also update your code, i hope it'll help you out. Thanks
Bootstrap Responsive image Documentation - Link
<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="row">
<div class="col-md-9">
<img src="https://png.pngtree.com/thumb_back/fh260/back_pic/03/62/30/9157aa94e693d90.jpg" class="img-fluid">
</div>
<div class="col-md-3">
<form> </form>
</div>
</div>
<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>
img-fluid is the answer you are looking for. As a side note, as of Bootstrap 4, there is no reason to use "col-sm col-md col-lg col-xl" etc, just use col- and it will adjust to the screen size automatically.
.col-md-4 {
text-align:center
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<p>
Test
</p>
<p>
Testttttttttttttt
</p>
</div>
</div>
</div>
https://jsfiddle.net/jze8gqb1/1838/
I want to align text items in one column. I used display:inline-block but not working. How can I fix? Thank you.
Output
Test
Testttttttttttttt
Desired Output
Test
Testttttttttttttt
You can do this by using a single p tag and white-space: pre-line:
.col-md-4 {
text-align:center
}
p {
white-space: pre-line;
text-align: left;
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<p>
Test
Testttttttttttttt
</p>
</div>
</div>
</div>
You can find more information about the white-space property here.
add this to your class
class="text-left"
Try this
<div class="container">
<div class="row">
<div class="col-md-4">
<p class="text-left">
Test
<br>
Testttttttttttttt
</p>
</div>
</div>
</div>
No CSS, just add class="text-left" to desired p element
<form class="form-horizontal">
<div class="form-group orange-container">
<div class="col-sm-4">
<h4 class="black-container"> Title </h4>
<div class="black-container2"> What do you want to raise money for? </div>
</div>
<div class="col-sm-8 blue-container2">
<input type="email" class="form-control black-container3" id="email" placeholder="Enter email">
</div>
</div>
None of the divs classes have any formatting except for the orange-container which has a 100% width and 80px height. I cant get the input to vertically center inside the blue-container2 Tried using vertical-align: middle and display:table-cell on blue-container to no effect.
Use flex box layout.
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > .col-sm-8,
.vertical-align > .col-sm-8 {
display: flex;
align-items: center;
justify-content: center;
}
See it in action: https://jsfiddle.net/pcxdek1t/
Bootstrap provides a "text-center" class that you can apply by doing the following:
<div class="col-sm-4 text-center">
http://getbootstrap.com/css/#type-alignment
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<form class="form-horizontal">
<div class="form-group orange-container">
<div class="col-sm-4 text-center">
<h4 class="black-container"> Title </h4>
<div class="black-container2"> What do you want to raise money for? </div>
</div>
<div class="col-sm-8 blue-container2">
<input type="email" class="form-control black-container3" id="email" placeholder="Enter email">
</div>
</div>
</form>
.orange-container {
display: flex;
align-items: center;
}
if use FlexBox, but you use Bootstrap3