I have been trying to get a Bootstrap grid to center vertically on my page, but can't seem to get it to center. Horizontal center works fine.
HTML:
<div class="container-fluid">
<div class="board vh-100">
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">A</div>
<div class="col-4 tic-box">B</div>
<div class="col-4 tic-box">C</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">D</div>
<div class="col-4 tic-box">E</div>
<div class="col-4 tic-box">F</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">G</div>
<div class="col-4 tic-box">H</div>
<div class="col-4 tic-box">I</div>
</div>
</div>
</div>
CSS:
.tic-box {
border: solid black 1px;
font-size: 3vw;
text-align: center;
width: 90px;
height: 90px;
}
Thanks for any help!
Since your board element has a specific height v-100 the you can add the following css attributes to your board element to center its contents.
.board{
display:flex;
flex-direction: column;
justify-content:center;}
Hi I think this is the cleanest approach to do what you require!
.tic-box {
border: solid black 1px;
font-size: 3vw;
text-align: center;
width: 90px;
height: 90px;
}
<!doctype html>
<html lang="en">
<head>
<title>Center</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.0.2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid d-flex align-items-center min-vh-100">
<div class="board mx-auto">
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">A</div>
<div class="col-4 tic-box">B</div>
<div class="col-4 tic-box">C</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">D</div>
<div class="col-4 tic-box">E</div>
<div class="col-4 tic-box">F</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">G</div>
<div class="col-4 tic-box">H</div>
<div class="col-4 tic-box">I</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
I Got it -
body{
justify-content: center;
align-items: center;
display: flex;
}
.tic-box {
border: solid black 1px;
font-size: 3vw;
text-align: center;
width: 90px;
height: 90px;
}
<div class="container-fluid">
<div class="board vh-100">
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">A</div>
<div class="col-4 tic-box">B</div>
<div class="col-4 tic-box">C</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">D</div>
<div class="col-4 tic-box">E</div>
<div class="col-4 tic-box">F</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">G</div>
<div class="col-4 tic-box">H</div>
<div class="col-4 tic-box">I</div>
</div>
</div>
</div>
Related
I created a bootstrap grid that has 3 rows with the following layout.
All I'm trying to do is add a bit of margin between them but as you can see, the columns and rows are not longer properly aligned.
Is there a way to fix it or maybe there's a better way to achieve what I want?
#featured {
margin-bottom: 15px;
}
.featured-1 {
height: 200px;
}
.featured-2 {
height: 50%;
margin-left: 5px;
}
.featured-3 {
height: 50%;
margin-left: 5px;
margin-top: 5px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row featured-1" id="featured">
<div class="col-md-7 col-sm-12 bg-warning">
Featured 1
</div>
<div class="col-md-5">
<div class="row featured-2">
<div class="col-md-12 col-sm-12 bg-danger">
Featured 2
</div>
</div>
<div class="row featured-3">
<div class="col-md-12 col-sm-12 bg-success">
Featured 3
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 bg-primary">For reference</div>
</div>
</div>
The official bootstrap document recommended the use of Gutter.
you can do this like below:
.featured-1 {
height: 200px;
}
.featured-2, .featured-3 {
height: 50%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row featured-1" id="featured">
<div class="col-md-7 col-sm-12 bg-warning">
Featured 1
</div>
<div class="col-md-5 px-4">
<div class="row featured-2">
<div class="col-md-12 col-sm-12 bg-danger">
Featured 2
</div>
</div>
<div class="row featured-3">
<div class="col-md-12 col-sm-12 bg-success gy-2">
Featured 3
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-primary gy-2">For reference</div>
</div>
</div>
There's already padding on the columns, which acts as gutters. I'd put the background on your column content instead.
#featured {
margin-bottom: 15px;
}
.featured-1>div {
height: 200px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row" id="featured">
<div class="col-7 featured-1">
<div class="bg-warning">Featured 1</div>
</div>
<div class="col-5 d-flex flex-column">
<div class="featured-2 flex-grow-1 bg-danger mb-1">Featured 2</div>
<div class="featured-3 flex-grow-1 bg-success mt-1">Featured 3</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="bg-primary">For reference</div>
</div>
</div>
</div>
May I ask how to fix this? I need the second container to be at the bottom of the first container, and I do not know how to solve it. I have used display: flex but it seems it does not feel right and applicable in two containers, that is why I am having a trouble on how to fix it:
https://jsfiddle.net/0nv2oLqy/1/
.content {
display: flex;
}
aside {
border-right: 1px solid #000000;
}
aside {
height: 100vh;
width: 350px;
}
aside ul {
padding-top: 5%;
list-style-type: none;
text-align: center;
}
aside a {
text-decoration: none;
display: block;
font-size: 23px;
color: black;
margin: 40px;
font-family: $font1;
font-weight: lighter;
}
aside a:hover {
color: $color1;
}
.first {
margin: 50px;
}
.first a {
background-color: #ebe0dd;
padding: 4px;
}
.line {
padding: 8px;
border-bottom: 1px solid $color5;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<div class="content">
<aside class="d-none d-md-block">
<ul>
<li class="first">All</li>
<li>To Pay</li>
<li>To Ship</li>
<li>To Receive</li>
<li>Completed</li>
<li>Cancelled</li>
</ul>
</aside>
<div class="container-fluid p-3 m-5 item1" height="20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
<div class="container-fluid p-3 m-5 item2" height="20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
</div>
Just wrap them inside a new div
.content {
display:flex;
}
aside {
border-right: 1px solid #000000;
}
aside {
height: 100vh;
width: 350px;
}
aside ul {
padding-top: 5%;
list-style-type: none;
text-align: center;
}
aside a {
text-decoration: none;
display: block;
font-size: 23px;
color: black;
margin: 40px;
font-family: $font1;
font-weight: lighter;
}
aside a:hover {
color: $color1;
}
.first {
margin: 50px;
}
.first a {
background-color: #ebe0dd;
padding: 4px;
}
.line {
padding: 8px;
border-bottom: 1px solid $color5;
}
.rightDiv {
width: 100%;
}
<!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>
<!--Link for Font awesome icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/styles/try.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
</head>
<body>
<div class = "content">
<aside class = "d-none d-md-block">
<ul>
<li class = "first">All</li>
<li>To Pay</li>
<li>To Ship</li>
<li>To Receive</li>
<li>Completed</li>
<li>Cancelled</li>
</ul>
</aside>
<div class='rightDiv'>
<div class="container-fluid p-3 item1" height = "20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
<div class="container-fluid p-3 item2" height = "20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
keep that .content {display: flex} but try to add a new container for that two price column or that two container you mentioned in question and then add this ruleset .your-class { display:flex; flex-direction: column; }
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>
Trying to Get this Grid format
Hello, I am currently new to using bootstrap 4 and am trying to get the format above.
This is what I am currently trying so far....
<div class="container">
<div class="row">
<div class="col-md-4" >1</div>
<div class="col-md-8">2</div>
<div class="col-md-8 ">3</div>
</div>
</div>
Here you go!
.content {
min-height: 100px;
background: #ccc;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4">
<div class="row h-100">
<div class="col-12 h-100">
<div class="content h-100">1</div>
</div>
</div>
</div>
<div class="col-8">
<div class="row">
<div class="col-12 mb-3 pl-0">
<div class="content">2</div>
</div>
<div class="col-12 pl-0">
<div class="content">3</div>
</div>
</div>
</div>
</div>
</div>
.one, .two, .three{
border: solid 2px gray;
min-height: 150px;
font-weight: bold;
}
.one{
background: lightblue;
}
.two{
background: lightgreen;
}
.three{
background: pink;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-5 one">1</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-8 two">2</div>
</div>
<div class="row">
<div class="col-sm-8 three">3</div>
</div>
</div>
</div>
</div>
I am trying to center red block Horizontally and Vertically as in the picture below, but unfortunately red block is placed in the wrong place. I use bootstrap 4. Сan anyone say what's wrong??
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container-fluid">
<div class="row header-layout">
*Some content*
</div>
<div class="row content-layout">
<div class="col-6 left-side">
*Some content*
</div>
<div class="col-6 right-side">
<div class="row right-title">
*Some Text*
</div>
<div class="row parent">
<div class="child">
*Some content*
</div>
</div>
</div>
</div>
</div>
You can use flexbox for effortless centering of element.
Here's a full guide for Flexbox
.parent {
height: 100px;
width: 100px;
background: black;
display: flex;
align-items: center;
justify-content: center; }
.child {
height: 50px;
width: 50px;
background: red; }
<div class="parent">
<div class="child"></div>
</div>
i just change some bootstrap class and css. hope it help :)
div {
border: thin solid black;
}
.child {
position: relative;
margin: auto;
width: 60px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container-fluid">
<div class="row header-layout">
*Container content*
</div>
<div class="row content-layout">
<div class="col-6 left-side">
*left content*
</div>
<div class="col-6 right-side">
<div class="row right-title">
*Right Text*
</div>
<div class="row">
<div class="child">
*Child content*
</div>
</div>
</div>
</div>
</div>
You can do this using the new Bootstrap 4 flexbox utilities..
<div class="container-fluid h-100 d-flex flex-column">
<div class="row header-layout">
*Some content*
</div>
<div class="row content-layout flex-grow">
<div class="col-6 left-side d-flex flex-column">
<div class="row">
<div class="col-12 text-center">content</div>
</div>
<div class="row flex-grow">
<div class="col-12 text-center my-auto">content</div>
</div>
</div>
<div class="col-6 right-side d-flex flex-column">
<div class="row right-title">
<div class="col-12 text-center">title</div>
</div>
<div class="row parent flex-grow">
<div class="child col-6 mx-auto my-auto">
<div class="card card-block">child</div>
</div>
</div>
</div>
</div>
</div>
http://www.codeply.com/go/6nALguHQyw
Just make sure the body,html are 100% height. Also, I added a flex-grow class to make content fill the remaining height. In the future, this may be added as a util class so that you won't need this extra CSS.