Boostrap chat keeping message box at bottom of screen - html

Hi I am trying to have a row stay at the bottom of the screen for a message send input box, the problem I am having is that if I set the row:
row d-flex position-absolute bottom-0
the columns are not taking the horizontal space in the row.
here is my Boostrap 5 code:
<!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" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<title>Stripe connect</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 bg-primary sidebar">
<div class="px-3 py-3"></div>
</div>
<div class="col bg-secondary">
<div class="row bg-success d-flex align-items-start flex-column vh-100">
ff
</div>
<div class="row d-flex position-absolute bottom-0">
<div class="col bg-danger">ff</div>
<div class="col">ff</div>
<div class="col">ff</div>
</div>
</div>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
and here is an image:
columns are to the left and not taking up the full width
Thanks for the help


Since you're deliberately placing the utility classes also specify the start-0 and end-0 declarations as well. Cheers
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 bg-primary sidebar">
<div class="px-3 py-3"></div>
</div>
<div class="col bg-secondary">
<div class="row bg-success d-flex align-items-start flex-column vh-100">
ff
</div>
<div class="row d-flex position-absolute bottom-0 start-0 end-0">
<div class="col bg-danger">ff</div>
<div class="col">ff</div>
<div class="col">ff</div>
</div>
</div>
</div>
</div>

Related

I cannot centre elements using Bootstrap and there are problems with the radius of one div

So I am trying to do a login form using HTML and Bootstrap but I can't get to align all elements in centre. They seem to be in centre but the header which is centre aligned by Bootstrap is not in one line vertically with the other elements. I am using the Grid and I need the elements to be centre-aligned in medium and small screen. In medium screen I tried to follow the logic of 12 column of the grid so to fill spaces until I arrive in centre but still the elements are not aligned correctly.
Also I can't apply the desired radius to login form. I need it to be more rounded. Bootstrap doesn't seem to work. CSS does but it applies radius to all the divs
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<link rel="stylesheet" href="css/style.css" >
<title>Social Network</title>
</head>
<body class="bg-primary">
<div class="row">
<div class="col-3 col-md-6"></div>
<header class="text-center fs-3 text-white my-5">
SOCIAL NETWORK
</header>
</div>
<div class="row">
<div class="col-2 col-md-4 m-1"></div>
<div class="rounded-3 text-center bg-light p-4 col-centered col-8 col-md-3 px-5">
<div>
<input type="email" class="form-control my-5" id="inputUsername" aria-describedby="emailHelp" placeholder="Username">
<input type="password" class="form-control my-5" id="inputPassword1" placeholder="Password">
</div>
<div class="text-center">
<button type="submit my-5" class="btn btn-primary">Log In</button>
</div>
<div class="text-center my-4 text-secondary">OR</div>
<div class="text-center">
<a class="text-decoration-none link-secondary" href="">Forgot Password?</a>
</div>
</div>
<div class="col-md-3"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-1 col-md-3"></div>
<div class="col-1 col-md-1"></div>
<div class="text-center text-secondary rounded-pill col-8 col-md-3 bg-light my-4 py-3" id="signUp">
<div class="text-centered">Don't have an account? <a class="text-primary px-3" href="">Sign Up</a></div>
</div>
<div class="col-1 col-md-3"></div>
<div class="col-md-2"></div>
</div>
<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>
</html>

I've mocked up a simple example for you based on your Div boxes and layout. In short you can use.
There's a couple of things to not here. The centering is achieved by using Flex and justifying the content to the centre - d-flex justify-content-center
As for the border radius, I've added a rule called login-box, which sets the radius to 20px.
Hope that helps.
.login-box {
background-color: #fff;
border-radius: 20px;
}
.new-user-box {
border-radius: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<link rel="stylesheet" href="css/style.css" >
<title>Social Network</title>
</head>
<body class="bg-primary">
<div class="d-flex justify-content-center">
<header class="text-center fs-3 text-white my-5">
Social Network
</header>
</div>
<div class="row d-flex justify-content-center ">
<div class="col-6 login-box">
<div>
<input type="email" class="form-control my-5" id="inputUsername" aria-describedby="emailHelp" placeholder="Username">
<input type="password" class="form-control my-5" id="inputPassword1" placeholder="Password">
</div>
<div class="text-center">
<button type="submit my-5" class="btn btn-primary">Log In</button>
</div>
<div class="text-center my-4 text-secondary">OR</div>
<div class="text-center mb-4">
<a class="text-decoration-none link-secondary" href="">Forgot Password?</a>
</div>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="text-center text-secondary col-6 bg-light my-4 py-3 new-user-box" id="signUp">
<div class="text-centered">Don't have an account? <a class="text-primary px-3" href="">Sign Up</a></div>
</div>
</div>
<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>
</html>

how to prevent text from changing the height of other elements

I have two divs and want to display the content of both divs in the same location. Since the text in the first div is longer and has an impact on where the body content is positioned, the two divs do not look alike.I want the position of second div body content like first div body content. Please see the SS that I have attached.
<!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.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
</head>
<body style="padding: 40px">
<div class="d-flex flex-column border border-primary " style="max-width: 400px ; height: 130px ">
<div class="w-100 bg-warning text-center p-2">
Somecontent from a map function here dsdsadsadsffffffff
</div>
<div class="h-100">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" onclick="alert('hey')" >
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ; height: 130px;">
<div class="w-100 bg-warning text-center p-2">
Somecontent from a map
</div>
<div class="h-100" onclick="alert('hey')">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" >
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
</body>
</html>

Remove your static height's then use the .py-3 class for 1rem of vertical padding on your .h-100 div.
<!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.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
</head>
<body style="padding: 40px">
<div class="d-flex flex-column border border-primary " style="max-width: 400px; height: 140px;">
<div class="w-100 bg-warning text-center p-2">
Somecontent from a map function here dsdsadsadsffffffff
</div>
<div class="h-100 d-flex justify-content-between align-items-center">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 w-100" onclick="alert('hey')">
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px; height: 140px;">
<div class="w-100 bg-warning text-center py-3">
Somecontent from a map
</div>
<div class="h-100 d-flex justify-content-between align-items-center" onclick="alert('hey')">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 w-100">
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>

If you don't want to change the height, the only thing I can see is to cut the text or to increase the width or your elements
<!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.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
<style>
span {
width : 100%;
word-break: break-all;
overflow: hidden;
position: relative;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body style="padding: 40px">
<div class="d-flex flex-column border border-primary " style="max-width: 400px ; height: 130px ">
<div class="w-100 bg-warning text-center p-2">
<span>Somecontent from a map function here dsdsadsadsffffffff<span>
</div>
<div class="h-100">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" onclick="alert('hey')" >
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ; height: 130px;">
<div class="w-100 bg-warning text-center p-2">
Somecontent from a map
</div>
<div class="h-100" onclick="alert('hey')">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" >
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
</body>
</html>

Adding another box to an existing column using Bootstrap grid

I currently have a Bootstrap grid that looks as follows:
The code is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous">
<title>Example</title>
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="align-self-center">
<h1>Box 1</h1>
</div>
</div>
<div class="row">
<div class="col-6">
<div id="left-panel" class="row justify-content-center">
<div class="align-self-center">
Box 2
</div>
</div>
</div>
<div id="right-panel" class="col-6">
<div class="row justify-content-center">
<div class="align-self-center">
Box 3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I would like to add a Box 4 to the grid, as seen below:
How would I amend my code to do this?
Thanks!

Pls Check below one,we used nested div :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous">
<title>Example</title>
</head>
<body>
<div class="container-fluid border border-dark text-center">
<div class="row justify-content-center">
<div class="align-self-center">
<h1>Box 1</h1>
</div>
</div>
<div class="row border border-dark">
<div class="col-6">
<div id="left-panel col-12 border border-dark" class="row justify-content-center">
<div class="align-self-center border border-dark">
Box 2
</div>
</div>
<div id="left-panel-1 col-12 border border-dark" class="row justify-content-center">
<div class="align-self-center border border-dark">
Box 4
</div>
</div>
</div>
<div id="right-panel" class="col-6 border border-dark">
<div class="row justify-content-center">
<div class="align-self-center">
Box 3
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Bootstrap offset is not working

I'm just trying to experiment with Bootstrap and I cannot make the offset to work and I don't know why. Here's my code:
<div class="container">
<div class="row justify-content-between align-items-stretch">
<div class="col-4 offset-2"> ABC </div>
<div class="col-4"> DEF </div>
</div>
</div>
For some reason the offset-2 doesn't move the column at all. Do you know why?
Thanks in advance,

Hope this will work according to your requirements:-
<!DOCTYPE html>
<html lang="en">
<head>
<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.3.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">
<div class="row justify-content-between align-items-stretch">
<div class="col-4 col-md-offset-2">
ABC
</div>
<div class="col-4">
DEF
</div>
</div>
</div>
</body>
</html>

Why is Bootstrap 4 text-right not working properly?

I want to make the text in the blue column div align on the right side just like the red div, but text-right does not seem to work. I also want the letters to keep sticking together like they do now: [I]|dashboard
This is my html:
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 text-right color1setter">
test
</div>
<div class="col-md-3 text-right color2setter">
<div class="row no-gutters">
<div class="col-md-auto ">
[I]
</div>
<div class="col-md-auto ">
|
</div>
<div class="col-md-auto">
Dashboard
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>

As your auto columns have no width, they are all bunching on the left of your row - add ml-auto (margin-left: auto) class to the first auto col and it will push everything to the right:
<div class="container">
<div class="row">
<div class="col-md-3 text-right color1setter">
test
</div>
<div class="col-md-3 text-right color2setter">
<div class="row no-gutters">
<div class="col-md-auto ml-auto"> <!-- add ml-auto class here -->
[I]
</div>
<div class="col-md-auto ">
|
</div>
<div class="col-md-auto">
Dashboard
</div>
</div>
</div>
</div>
</div>
Example bootply
Bootstrap auto-margins

Colors to the background of your divs were added so as to show the group staying together, using float right for the group.
<div class="container">
<div class="row">
<div class="col-md-3 text-right color1setter" style="background-color: darkred; color: aliceblue">
test
</div>
<div class="col-md-3 text-right color2setter" style="background-color: red">
<div class="row no-gutters" style="float: right;">
<div class="col-md-auto " style="background-color: violet">
[I]
</div>
<div class="col-md-auto " style="background-color: blueviolet">
|
</div>
<div class="col-md-auto" style="background-color: purple;">
Dashboard
</div>
</div>
</div>
</div>