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>
Related
This question already has answers here:
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed last month.
Please take a look at the demo code. When you scroll to the bottom, the stick to top element is always at the top, but the stick to bottom element does not stick to the bottom at all. Is there anything wrong?
<!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://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row" style="height: 2000px;">
<div class="col bg-success">
<div class="col bg-info" style="position: sticky; top: 0">
Stick to top
</div>
</div>
<div class="col bg-danger">
<div class="col bg-warning" style="position: sticky; bottom: 0">
Stick to bottom
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"
></script>
</body>
</html>
Thank you.
I recommend paying attention to this answer to a similar problem. In your case, accordingly, you can try to make the parent element as flex (.d-flex in Bootstrap), and for the stick element add margin-top: auto (.mt-auto in Bootstrap).
A modified example is below:
<!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://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row" style="height: 2000px;">
<div class="col bg-success">
<div class="col bg-info" style="position: sticky; top: 0">
Stick to top
</div>
</div>
<div class="col bg-danger d-flex">
<div class="col bg-warning mt-auto" style="position: sticky; bottom: 0">
Stick to bottom
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"
></script>
</body>
</html>
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;}
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>
I'm new to Bootstrap and can't get margins between things. I put mb-12 in the navbar class and also mt-12 in the container class for good measure, but nothing is happening. Everything else is working.
I've checked the Bootstrap documentation and posts on here and haven't been able to figure it out.
<!DOCTYPE html>
<html>
<head>
<Title>The Title</Title>
<!-- 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar mb-12 py-4 bg-warning">
<H1>Words Here</H1>
</nav>
<div class="container mt-12">
<div class="row">
<div class="col bg-light">Text</div>
<div class="col bg-primary">
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
</div>
<div class="col bg-success">Text</div>
</div>
</div>
</body>
</html>
Classes mt-12 and mb-12 are not working simply because they are not supported by Bootstrap you can use from 0 to 5 only for padding and margin bootstrap classes.
You can check here
Other way you can custom your own classes mt-12 nd mb-12 with your CSS :
.mb-12{
margin-bottom: 20px!important; /* You can custom the space you want
}
.mt-12{
margin-top: 20px!important; /* You can custom the space you want
}
I think you are not using proper class for the margin bottom. For example I used mb-2 and it worked fine. mb-12 is not proper class.
You need to consult some tutorials related to bootstrap in order to enhance your skills;
<!DOCTYPE html>
<html>
<head>
<Title>The Title</Title>
<!-- 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar mb-2 py-4 bg-warning">
<H1>Words Here</H1>
</nav>
<div class="container mt-12">
<div class="row">
<div class="col bg-light">Text</div>
<div class="col bg-primary">
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
</div>
<div class="col bg-success">Text</div>
</div>
</div>
</body>
</html>
There are many helpful tutorials available. For example