I want to make my input textbox and button inline but if i remove d-flex class from div, i cant justify by content to center. any ideas to make them inline or justify content?
<!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" />
<title>Movies</title>
<!-- Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"
></script>
<!-- css -->
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body class="bg-image shadow-2-strong">
<div class="mask">
<div class="container d-flex flex-column align-items-center justify-content-center text-center h-100">
<div>
<h1 class="mb-3">THE MOVIE SCOPE!</h1>
<h5 class="mb-4">search with movie titles</h5>
<input type="text" class="form-control" required />
<form action="/" method="post">
<button type="submit" class="btn btn-outline-light btn-lg">click</button>
</form>
</div>
</div>
</div>
<footer>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">© 2021 Copyright Danuja Jayasuriya</div>
</footer>
</body>
</html>
Here's how it looks now
Adding a div to cover <input> and <form> with the class d-flex, adding padding or margin to customize the space between textbox and button. For example, I added ms-4 to the button div.
<!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" />
<title>Movies</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- css -->
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body class="bg-image shadow-2-strong">
<div class="mask">
<div class="container d-flex flex-column align-items-center justify-content-center text-center h-100">
<h1 class="mb-3">THE MOVIE SCOPE!</h1>
<h5 class="mb-4">search with movie titles</h5>
<div>
<div class="d-flex">
<input type="text" class="form-control" required />
<form action="/" method="post">
<button type="submit" class="btn btn-outline-light btn-lg ms-4">click</button>
</form>
</div>
</div>
</div>
</div>
<footer>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">© 2021 Copyright Danuja Jayasuriya</div>
</footer>
</body>
</html>
Related
I am trying to center the content of a column using Bootstrap. This is my current code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<!-- CODE -->
<header>
<div class="container-fluid">
<div class="row">
<!-- LEFT -->
<div class="col-md-6 p-md-5 p-4" style="background-color: lime;">
<div> <!-- THIS SHOULD BE IN THE CENTER -->
<h1>Welcome</h1>
<h2>to my web!</h2>
</div>
<div> <!-- THIS SHOULD BE IN THE BOTTOM -->
<p>Icons</p>
</div>
</div>
<!-- RIGHT -->
<div class="col-6 d-md-block d-none" style="background-color: red"></div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
I have tried using d-flex justify-content-center, as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<!-- CODE -->
<header>
<div class="container-fluid">
<div class="row">
<!-- LEFT -->
<div class="col-md-6 p-md-5 p-4 d-flex justify-content-center" style="background-color: lime;">
<div> <!-- THIS SHOULD BE IN THE CENTER -->
<h1>Welcome</h1>
<h2>to my web!</h2>
</div>
<div> <!-- THIS SHOULD BE IN THE BOTTOM -->
<p>Icons</p>
</div>
</div>
<!-- RIGHT -->
<div class="col-6 d-md-block d-none" style="background-color: red"></div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
But this is not working...
How can I do to put the elements correctly inside the column?
You can add “ align-items-center” to the class, if that still doesn’t work, make sure you’re not adding different margins to left and right of the section, but justify-content-center and align-items-center will work fine
Adding d-flex flex-column h-100 to the child, with an align-items-center solves the scenario.
I've been trying : text-align:center, align-items:center..
In this code, I use BootStrap, but I also tried to over-code it via css- nothing helps.
I'd really thank you for help.
<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" />
<title>HTML Final Task</title>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>
</head>
<body>
<div class="nav-container-wrap">
<div class="nav container py-3 justify-content-between text-center">
<div class="left-box d-flex gap-5">
<div class="nav-item"><h3>Adantrip</h3></div>
<div class="nav-item"><p>Hotels</p></div>
<div class="nav-item"><p>Rooms</p></div>
<div class="nav-item"><p>Flights</p></div>
<div class="nav-item"><p>Cars</p></div>
<div class="nav-item"><p>Experiences</p></div>
</div>
<div class="right-box d-flex gap-5">
<div class="nav-item">USD</div>
<div class="nav-item"><i class="fa-solid fa-flag-usa"></i></div>
<div class="nav-item">
<i class="fa-solid fa-user"></i> My Account
</div>
</div>
</div>
</div>
</body>
</html>
The use of the HTML <p> and <h1> tags are throwing off the Bootstrap layout because of their default attributes. Rather than fight with them, use the classes that Bootstrap provides. align-items-center on your flex containers and the responsive h1 class on the item you want for your header.
<!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" />
<title>HTML Final Task</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>
<body>
<div class="nav-container-wrap">
<div class="nav container py-3 justify-content-between align-items-center text-center ">
<div class="left-box d-flex align-items-center text-center gap-5">
<div class="nav-item h1">Adantrip</div>
<div class="nav-item">Hotels</div>
<div class="nav-item">Rooms</div>
<div class="nav-item">Flights</div>
<div class="nav-item">Cars</div>
<div class="nav-item">Experiences</div>
</div>
<div class="right-box d-flex gap-5">
<div class="nav-item">USD</div>
<div class="nav-item"><i class="fa-solid fa-flag-usa"></i></div>
<div class="nav-item">
<i class="fa-solid fa-user"></i> My Account
</div>
</div>
</div>
</div>
</body>
</html>
There is nothing wrong with your code. Some Bootstrap default styles, same as margin-bottom in some tags, affect your code.
Let's make it simple and see the difference then correct it.
In this sample, I'm gonna use pure CSS.
Remove Bootstrap from your code temporarily and then add these styles:
.nav{display:flex;justify-content:space-between}
.left-box,
.right-box{display:flex;align-items:center;gap: 0.5rem;}
How can I center a div vertically in bootstrap 5?
It should be aligned in the middle between of content before the div and the screen end.
Tried this:
<div>some content</div>
<div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
<div>div that should be centered</div>
</div>
It makes the pages longer than it actually is. The div doesn´t looks centered.
You can do it like this:
Wrap everything with one div that has 100% screen width and height.
Use flex-grow-1 for the second div so it takes the remaining height and center everything inside.
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="d-flex flex-column min-vh-100 min-vw-100">
<div>This div is not centered.</div>
<div class="d-flex flex-grow-1 justify-content-center align-items-center">
<div>This div is centered.</div>
</div>
</div>
</body>
</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.0" />
<title>Document</title>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<style>
.card
{
min-width: 320px;
width: 480px;
}
</style>
</head>
<body>
<div class="d-flex align-items-center justify-content-center vh-100">
<div class="card shadow-lg">
<div class="card-header text-bg-danger">
<h2>
<i class="fa-solid fa-user"></i>
Login
</h2>
</div>
<div class="card-body">
<form action="">
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input
placeholder="your registered email"
class="form-control"
type="email"
name="email"
id="email"
/>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input
placeholder="your password"
class="form-control"
type="password"
name="password"
id="password"
/>
</div>
<div class="d-flex justify-content-end">
<button class="btn btn-danger">Login</button>
<button type="reset" class="btn btn-secondary">Reset all</button>
</div>
</form>
</div>
</div>
</div>
<script
src="https://kit.fontawesome.com/266b76cb57.js"
crossorigin="anonymous"
></script>
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
</body>
</html>
I have a simple issue in my CSS code I want to create a Vertical line after my heading using bootstrap utilities but I faced an issue.
Here is a live example of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 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" />
<title>Bootstrap</title>
</head>
<body class="bg-dark text-white">
<div class="container mt-5">
<h3 class="position-relative d-inline-block fw-bold">
My Title Here
<hr style="height: 2px;" class="position-absolute top-50 start-100 translate-middle-y opacity-100 w-100 my-0 ms-4 bg-primary" />
</h3>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Expected Result:
thanks!
Close <h3> before the hr, and add display: inline-block; to hr. Remove the top and bottom margin set at 0 (my-0), as well as left: 100%; (start-100), and translate-middle-y. Your position absolute along with the margin-left and w-100 is making the hr appear to overflow. You can easily fix this by using w-75.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 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" />
<title>Bootstrap</title>
</head>
<body class="bg-dark text-white">
<div class="container mt-5">
<h3 class="position-relative d-inline-block fw-bold">My Title Here</h3>
<hr style="height: 3px;" class="position-absolute opacity-100 w-75 ms-4 bg-primary d-inline-block">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Simple flex will do what you need
<div style="display: flex;align-items: center;">
<h3>
My Title Here
</h3>
<hr style="height: 2px;flex: 1;margin-left: 8px;">
</div>
I have the following code and I am not sure why bg-info doesn't work for the whole body as I am new to bootstrap.
<!--http://v4-alpha.getbootstrap.com/getting-started/introduction/-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, 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-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body class="bg-info">
<div class="container text-xs-center">
<h1 class="display-1">Fullstack Conference</h1>
<p class="lead">Coming soon!! A one day conference about all things Javascript!!</p>
</div>
<div class="col-lg-6 col-lg-offset-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter your Email for info...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Sign Up!</button>
</span>
</div>
</div>
</div>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
Here's what I see:
Note: According to this video it should work though https://teamtreehouse.com/library/bootstrap-4-basics/getting-to-know-bootstrap-4/enhancing-the-page
You are using the alpha 4 of bootstrap(js), use bootstrap 3.x.
Also you have an extra </div> in the code.
This works:
<!--http://v4-alpha.getbootstrap.com/getting-started/introduction/-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous" />
</head>
<body class="bg-info">
<div class="container text-xs-center">
<h1 class="display-1">Fullstack Conference</h1>
<p class="lead">Coming soon!! A one day conference about all things Javascript!!</p>
</div>
<div class="col-lg-6 col-lg-offset-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter your Email for info...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Sign Up!</button>
</span>
</div>
</div>
</body>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</html>
What do you mean by doesn't work for the whole body? Try to add this CSS property to your custom CSS:
.bg-info {background: #5bc0de!important;
}