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>
Related
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>
Actually, I want to trigger a onClick on the body where discussion and icons are positioned. However, onClick on the body is not having any problems. The spacing area, however, is where it breaks. I wish to close this gap. but are unable to. Is there a fix for the space that would allow me to make the entire body clickable?
<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="d-flex flex-column align-items-strentch " onclick="alert('hey')">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 flex-1 d-inline-block" >
<text class="bg-warning "> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
For the onclick div, you are not obliged to use flex position.
You can add h-100 to get 100% height
You can use this :
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<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 flex-1 d-inline-block" >
<text class="bg-warning "> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
</body>
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>
I'm very new to frontend - HTML, CSS and bootstrap. I basically want to do a comparison page, where users can enter search terms and the table below will display the information pulled from a database. Currently, when I tried to place the 2 tables and input containers side by side, they overlap and are way too close to each other.
So my question is - what is the best way to style these containers so that they look like the wireframe below?
Thank you!
This is what my page looks now:
Use bootstrap row and column approach
as it will make them responsive too
Example
<div class="row">
<div class="col-md-6"> Your First Box </div>
<div class="col-md-6"> Your Second Box </div>
</div>
What this will do is it will create a row in which two columns of 50% width will take place
HTML:
<div class="row">
<div class="column"></div>
<div class="column"></div>
</div>
CSS:
.row {
display: flex;
}
.column {
flex: 50%;
}
I create an example with bootstrap 5
<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">
<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>
<div class="d-flex justify-content-center align-items-start">
<div style="width:500px" class="pt-3 px-3">
<input type="text" class="form-control" placeholder="search">
<div class="results rounded border mt-3">
<div class="item d-flex justify-content-center align-items-center border-bottom flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
<div class="item d-flex justify-content-center align-items-center border-bottom flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
<div class="item d-flex justify-content-center align-items-center flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
</div>
</div>
<div style="width:500px" class="pt-3 px-3">
<input type="text" class="form-control" placeholder="search">
<div class="results rounded border mt-3">
<div class="item d-flex justify-content-center align-items-center border-bottom flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
<div class="item d-flex justify-content-center align-items-center border-bottom flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
<div class="item d-flex justify-content-center align-items-center flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
</div>
</div>
</div>
I have made an simple example of your case here with Bootstrap row and col. Hope it was to any help.
If you want to read more how the grid works in Bootstrap: Boostrap grid
.box {
border: 2px solid gray;
width: 300px;
height: 300px;
margin: 30px;
border-radius: 25px;
}
.input-field{
margin: 30px;
}
<!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.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="row">
<input class="col input-field"/>
<input class="col input-field"/>
</div>
<div class="row">
<div class="col box"></div>
<div class="col box"></div>
</div>
<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>
Im trying to use almost all the space horizontally within the dark container to use almost all of it's width with the white col. Is there a way to get rid of the preset padding by Bootstrap?
<div class="col pt-5 text-center bg-warning text-light">Main
<div style="height:400px;" class="row bg-dark">
<div class="col-5 bg-white mt-4 text-dark">Article</div>
<div class="col bg-white mt-4 text-dark">Article</div>
</div>
no-gutter did do it for me
here the full code...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloques con Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div>
<div class="container text-center bg-dark p-3">
<div class="text-light bg-info col-3 offset-4 p-1">Header</div>
</div>
</div>
<div class="row">
<div style="height:300px;" class="col-4 text-center bg-info text-light pt-4">Aside</div>
<div class="col pt-5 text-center bg-warning text-light">Main
<div style="height:400px;" class="row bg-dark">
<div class="col-5 bg-white mt-4 text-dark">Article</div>
<div class="col bg-white mt-4 text-dark">Article</div>
</div>
</div>
</div>
<div>
<div class="bg-success text-center text-light py-3">Footer</div>
</div>
</div>
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
Instead of mt-4 use pt-4.
margin will not do what you want
<div class="col pt-5 text-center bg-warning text-light">Main
<div style="height:400px;" class="row bg-dark">
<div class="col-5 h-100 bg-white pt-4 text-dark">Article</div>
<div class="col h-100 bg-white pt-4 text-dark">Article</div>
</div>
</div>
https://getbootstrap.com/docs/4.0/utilities/spacing/