Align items in a div when div breaks up to 2 rows - html

What I have:
A navbar, with a group of buttons on the right-hand side.
When the navbar becomes too small (e.g. on a smartphone), the div divides the two buttons up into 2 rows. In that state, I want to align the 2 buttons inside the div to the right side, but no matter what I try, Bootstrap always aligns the items to the left side, as shown in the picture. (outline just for illustration)
Good:
Bad:
<!-- Bootstrap-5 -->
<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.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Body -->
<nav class="navbar navbar-expand d-flex justify-content-around" style="box-shadow: 0 2px 0 #202020;">
<div class="">
<a class="btn btn-orange m-1" href="./projects">Projekte</a>
</div>
<a href="./">
<image class="my-1" id="logo" src="./res/fnbg-logo6.svg" alt="FNBG Logo">
</a>
<div class="border me-2">
<a class="btn btn-orange m-1 align-self-end" target="_blank" href="mailto:a#bc.de">a#bc.de</a>
<a class="btn btn-orange m-1 align-self-end" target="_blank" href="https://linkedin.com/in/abcde/">LinkedIn</a>
</div>
</nav>
How can I fix this?

Give the buttons div it's own flex container with d-flex, then add the justify-content-end class (aligns to the right) and flex-wrap class so that they wrap as desired.
More info: https://getbootstrap.com/docs/5.0/utilities/flex/
<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">
<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>
<nav class="navbar navbar-expand d-flex justify-content-around" style="box-shadow: 0 2px 0 #202020;">
<div class="">
<a class="btn btn-orange m-1" href="./projects">Projekte</a>
</div>
<a href="./">
<img class="my-1" id="logo" src="./res/fnbg-logo6.svg" alt="FNBG Logo">
</a>
<div class="border me-2 d-flex justify-content-end flex-wrap">
<a class="btn btn-orange m-1" target="_blank" href="mailto:a#bc.de">a#bc.de</a>
<a class="btn btn-orange m-1 align-self-end" target="_blank" href="https://linkedin.com/in/abcde/">LinkedIn</a>
</div>
</nav>

Related

Bootstrap: Horizontal Align H1 and dropdown button

I put a dropdown button beside an H1 tag and I want the dropdown button moved up just a bit because they don't look aligned right now.
I'm using Bootstrap 5.1.3
<div class="ps-4 pt-4 pe-4" id="profile">
<div class="dropdown">
<h1 class="d-inline-block display-1">Cheese</h1>
<button class="d-inline-block ms-2 btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="authorControlsDropdownButton" data-bs-toggle="dropdown" aria-exanded="false"></button>
</div>
</div>
You can use Bootstrap's flexbox class and attributes to align items
https://getbootstrap.com/docs/5.0/utilities/flex/
In this case, I just did center but you can use whatever attribute that gives you the positioning you're looking for.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<div class="ps-4 pt-4 pe-4" id="profile">
<div class="d-flex flex-row align-items-center dropdown">
<h1 class="d-inline-block display-1">Cheese</h1>
<button class="d-inline-block ms-2 btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="authorControlsDropdownButton" data-bs-toggle="dropdown" aria-exanded="false"></button>
</div>
</div>

Drawing a line between a logo and text

I am using bootstrap 5 and I need to draw a thin line after the logo.png below. There should be no spaces between the line and logo
and still no spaces between the text and line.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-sm d-flex py-4">
<div class="d-flex align-items-center">
<div>
<a href="index" class="navbar-brand">
<img src="images/logo.png" />
</a>
<h2 class="my-auto font-size-medium">Zombie Testing</h2>
</div>
</div>
<nav>
How can i achieve this?
Use margin: 0 to get rid of the space between the elements
h2, hr {
margin: 0;
}
<nav class="navbar navbar-expand-sm d-flex py-4">
<div class="d-flex align-items-center">
<div>
<a href="index" class="navbar-brand">
<img src="https://picsum.photos/100" />
</a>
<hr>
<h2 class="my-auto font-size-medium">Zombie Testing</h2>
</div>
</div>
</nav>
simply add a border-top to the text by adding the border-top-class
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-sm d-flex py-4">
<div class="d-flex align-items-center">
<div>
<a href="index" class="navbar-brand">
<img src="images/logo.png" />
</a>
<h2 class="my-auto font-size-medium border-top">Zombie Testing</h2>
</div>
</div>
</nav>
This will do :
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-sm d-flex py-4">
<div class="d-flex align-items-center">
<div>
<a href="index" class="navbar-brand">
<img src="images/logo.png" style="padding-bottom:0px;padding-top:0px;marin-bottom:0px;margin-top:0px;" />
</a>
<hr style="padding-bottom:0px;padding-top:0px;margin:0px;">
<h2 style="padding-top:0px ;padding-bottom:0px ;margin-bottom:0px;margin-top:0px;">Zombie Testing</h2>
</div>
</div>
<nav>
check at this:https://jsfiddle.net/sugandhnikhil/t6p4dubo/12/

Bootstrap Navbar overlap using transforms in Safari

I'm struggling with the problem of a transformed div overlapping a bootstraped navbar, illustrated below. Does anyone know why this could be happening?
It happens in safari but not in Firefox or Chrome. It also doesn't happen when there are no transforms applied to the div.
I'm using bootstrap 4 and tailwind.css. I've included the code below. Thanks.
Grateful for any pointers, thanks.
<head>
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<nav class="navbar w-100 navbar-expand-md navbar-light bg-warning fixed-top " style="background-color: #eee;">
<a class="navbar-brand" href="">
Logo
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav w-100">
nav item
</div>
</div>
</nav>
<br><br><br><br><br><br><br><br>
<body>
<div class="column p-0 place-self-center">
<div class="card bg-transparent border-0 ">
<div class="w-50 border-2 border-yellow-400 rounded-t-lg rounded-b-lg h-96 bg-dark pb-0" style="transform: perspective(150rem) rotateY(-25deg); box-shadow: 10px 10px 40px #888888;"></div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
Can you please check the below code link? Hope it will work for you. You have to add position and z-index in the parent element .place-self-center and its child element .place-self-center .bg-transparent.
Please refer to this link: https://jsfiddle.net/yudizsolutions/Lj482t1p/2/

hr line in jumbotron at the end

I got 2 hr lines in my jumbotron. The first one aligns correctly as I want at the beginning of the page. The one at the bottom of the logo should be at the end of the page. I set a vh hight of 100.
.jumbotron{
height: 100vh;
How can I align the hr at the end? I tried something like align-items-end, but this didn't work out.
I'm using Bootstrap 4 and the html looks like this:
<!DOCTYPE html>
<html lang="de">
<head>
<!-- Wichtige Meta Daten -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS
============================================================================================= -->
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Spectral" rel="stylesheet">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<!-- Custom -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="hero-bg">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container m-auto nav-line">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav mt-1">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impressionen
</li>
<li class="nav-item">
Über mich
</li>
<li class="nav-item">
Kontakt
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header -->
<section id="home" class="hero-bg jumbotron">
<div class="container pt-0 pb-5 header-h">
<hr style="background: white; justify-content-start">
<div class="align-items-start row justify-content-center">
<div class="img-logo col align-self-start">
<img class="img-fluid d-block img-responsive" src="resources/img/logo.png" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
<hr class="align-self-end" style="background: white;">
</div>
<!-- container -->
</section>
<!-- Header -->
<!-- jQuery -->
<script src="assets/js/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Custom -->
<script src="assets/js/custom.js"></script>
</body>
</html>
To solve this (while keeping the <hr> elements inside the jumbotron), add the classes d-flex flex-column h-100 to the container inside the jumbotron and then add the mt-auto class (margin-top:auto) and optionally the mb-0 class (margin-bottom:0) to the last <hr> element.
d-flex flex-column classes enable a flexbox column and h-100 gives it 100% height. mt-auto on the <hr> then pushes it down. Via the pb-* class on the container, you can then control how far from the bottom the <hr> sits. In this case, I've chosen pb-4.
Click "run code snippet" below and expand to full page for testing:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<header class="hero-bg">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container m-auto nav-line">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav mt-1">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impressionen
</li>
<li class="nav-item">
Über mich
</li>
<li class="nav-item">
Kontakt
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header -->
<section id="home" class="hero-bg jumbotron bg-info pb-0" style="height: 100vh;">
<div class="container d-flex flex-column h-100 pt-0 pb-4 header-h">
<hr style="background: white; height: 1px; width: 100%; border: 0">
<div class="align-items-start row justify-content-center mx-auto">
<div class="img-logo col align-self-start">
<img class="img-fluid d-block img-responsive" src="https://placehold.it/500x100" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
<hr class="mt-auto mb-0" style="background: white; height: 1px; width: 100%; border: 0">
</div>
<!-- container -->
</section>
<!-- Header -->
Note: I've also added mx-auto to the logo image div to center it horizontally.
Every thing is fine with your code, Except you have coded <hr> tags inside the jumbotron, just add those hr tags before and after the jumbotron, then you will get result as u expected
<!DOCTYPE html>
<html lang="de">
<head>
<!-- Wichtige Meta Daten -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS
============================================================================================= -->
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Spectral" rel="stylesheet">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<!-- Custom -->
<link rel="stylesheet" href="assets/css/style.css">
<style>
.jumbotron{
height: 100vh;}
</style>
</head>
<body>
<header class="hero-bg">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container m-auto nav-line">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav mt-1">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impressionen
</li>
<li class="nav-item">
Über mich
</li>
<li class="nav-item">
Kontakt
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header -->
<hr style="background: white; justify-content-start"/>
<section id="home" class="hero-bg jumbotron">
<div class="container pt-0 pb-5 header-h">
<div class="align-items-start row justify-content-center">
<div class="img-logo col align-self-start">
<img class="img-fluid d-block img-responsive" src="resources/img/logo.png" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<hr class="align-self-end" style="background: white;"/>
<!-- Header -->
<!-- jQuery -->
<script src="assets/js/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Custom -->
<script src="assets/js/custom.js"></script>
</body>
</html>

Bootstrap container, grid rows width and a padding issue

I'm creating my first bootstrap frontend, and I'm experiencing some issues which I'm not able to solve:
The row expanding to the whole width of the container, the max column width (12 units) will not extend to this width:
Further on, why is within the container writing over the padding:
Any hints appreciated!
I already tried to use container-fluid class, but the row seems not to get the max width.
Whole HTML:
<!DOCTYPE html>
<html>
<head>
<title>Snoo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Snoo!</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reddit!</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col_xl-12">
<div id="content">
<h1>Snoo!</h1>
<hr>
<h3>A chatbot based on a million reddit comments, quiet salty!</h3>
<button class="btn btn-primary btn-lg">Learn more!</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</html>
css:
#content {
text-align: center;
padding-top: 25%
}
your class name wrong col_xl-12 to change class name col-xl-12
https://v4-alpha.getbootstrap.com/layout/grid/
I'm seeing a typo, try to change:
col_xl-12 to -> col-xl-12
Remove container from your coding. Then the row will have full width
your class should be col-*-*, but you used col_xl-12
The HTML Structure Will be:
<div class="row">
<div class="/* Container or Container-fluid or Col-* */">
</div>
</div>