This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 1 year ago.
I have three elements and I want to center two in the middle of the page and the last item completely to the left.
I still don't understand the col system.
Thanks in advance.
html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container w-100">
<div class="row">
<div class="col d-flex justify-content-start">
item 1 // align this element to the left
</div>
<div class="col">
item 2 // center this element in the middle of the page
</div>
<div class="col">
item 3 // center this element in the middle of the page
</div>
</div>
</div>
To accomplish what you are looking for we need to create a row that contains 3 columns with the same width and leave the third column empty. Then we use Bootstrap d-flex class to position the elements inside each column exactly where we want.
In this case I'm using justify-content-start to position the flex element at the start (left) of the container.
.m-1{border:1px solid black}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row w-100">
<div class="col">
<div class="d-flex justify-content-start">
<div class="m-1 p-1"> item one</div>
</div>
</div>
<div class="col">
<div class="d-flex justify-content-center">
<div class="flex-fill m-1 p-1">item two</div>
<div class="flex-fill m-1 p-1">item three</div>
</div>
</div>
<div class="col">
</div>
</div>
You can read more about this here and here
Related
I'm trying to make three new columns inside the my center column. But when I nest, they do go inside the centered column, but they also stack at the bottom of it. I'm interested in the center column can work as a background kind of like a container for the other three columns.
Maybe this is not how to use Bootstrap and columns? Should I instead just created some three divs that are not columns, but regular divs inside the column?
I'm trying to design a website where it has tree major columns, in which inside the center columns there should be three evenly spaced boxes/images/blocks.
I'm using Bootstrap version: 4.6.1
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="bg-secondary col-sm-2">
1
</div>
<div class="bg-primary col-sm-8">
2
<div class="row">
<div class="bg-warning col-sm-4">
2.1
</div>
<div class="bg-warning col-sm-4">
2.2
</div>
<div class="bg-warning col-sm-4">
2.3
</div>
</div>
</div>
<div class="bg-secondary col-sm-2">
3
</div>
</div>
</div>
I'm trying to get my column (bg-primary col-sm-8) in the center to get three more columns inside it:
For what you want, you need to use flex utility classes
.container-fluid {
height: 100vh
}
.box {
border: 5px solid red;
padding: 30px
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row h-100">
<div class="bg-secondary col-sm-2">1</div>
<div class="bg-primary col-sm-8">
<div class="row justify-content-around align-items-center h-100">
<div class="box">2.1</div>
<div class="box">2.2</div>
<div class="box">2.3</div>
</div>
</div>
<div class="bg-secondary col-sm-2">3</div>
</div>
</div>
I'm trying to align the .time div (left) and .saveIcon div (right) within the .card div I've created but they just seem to be stacking horizontally on the left of my .card div. I'm sure I'm missing something fairly obvious but any help would be appreciated.
<div class="jumbotron" style="background-color:white">
<div class="card col-lg-12">
<div class="time col-lg-2"></div>
<div class="card-body col-lg-8">write tasks here</div>
<button class="saveIcon col-lg-2">
<i class="fa fa-lock"></i>
</button>
</div>
</div>
So there are a few issues with the snippet you've supplied, and they come down to what Bootstrap expects when rendering the layout.
Here is the basic use of the col tag in Bootstrap and it's expected outer Grid Layout.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
As you can see, a container must wrap a row which then contains a col element.
As per Bootstrap Rows and Columns - Do I need to use row?:
Yes, you need to use row. Only columns may be immediate children of rows
Here is your amended code as a result of these required rules:
<div class="container">
<div class="card">
<div class="card-block">
<div class="row">
<div class="time col-2"></div>
<div class="card-body col-8">write tasks here</div>
<button class="saveIcon col-2">
<i class="fa fa-lock"></i>
</button>
</div>
</div>
</div>
</div>
Also, please ensure you're correctly referencing Bootstrap in your head: Bootstrap Get Started
Here is the JSFiddle showing the working output with Bootstrap.
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 3 years ago.
I have the following elements with Bootsrap 4(.3.1) classes:
<footer class="container-fluid">
<div class="row">
<div class="col">
Copyright ©
</div>
<div class="col text-right">
<a class="">Back to top</a>
</div>
</div>
</footer>
The height of <footer> is 100px and I'd like the content fo the cols to sit veritcally in the center of the element.
I've tried adding d-flex align-items-center to the elements (trying container, row and cols in turn) but didn't get any results.
Will I have to scrap the grid classes all together and re-do this with flex classes? Or does anyone know of a way Bootstrap can acheive this out-of-the-box using it's own classes?
In addition to adding d-flex align-items-center to the footer and flex-grow-1 to the row class - see demo below:
footer {
height: 100px;
border: 1px solid;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<footer class="container-fluid d-flex align-items-center">
<div class="row flex-grow-1">
<div class="col">
Copyright ©
</div>
<div class="col text-right">
<a class="">Back to top</a>
</div>
</div>
</footer>
You should add the height to the row. and use align-items-center to vericaly align the flex-items i.e, col
.footer {
height: 100px;
background: #dedede;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer class=" container-fluid">
<div class="footer row align-items-center justify-content-center">
<div class="col">
Copyright ©
</div>
<div class="col text-right">
<a class="">Back to top</a>
</div>
</div>
</footer>
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 3 years ago.
Just like the title says, in Bootstrap 4, I can't figure out how to center content inside a column that's inside .container-fluid.
Here's my code, can someone please let me know what I did wrong?
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-4 my-auto mx-auto">
<div class="mx-auto">
<h1 class="mb-5">This is a title
</h1>
<p class="mb-5">Lorem ipsum</p>
Click me
</div>
</div>
<div class="col-md-8">
<p>Something else that's not important but needs to be here </p>
</div>
</div>
Why doesn't the .mx-auto work and what can I use instead of it?
The col-* are flex items, so you have to also make them flex container in order to center their content like you want (vertically or/and horizontally) using margin:auto with elements (my-auto/mx-auto) or align-items-*/jusity-content-* with the container:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-4 d-flex flex-column align-items-center justify-content-center">
<h1 class="mb-5">This is a title
</h1>
<p class="mb-5">Lorem ipsum</p>
Click me
</div>
<div class="col-md-8 d-flex flex-column ">
<p class="my-auto mx-auto">Something else that's not important but needs to be here </p>
</div>
</div>
I'm using Bootstrap 4 for the first time. I want to have a website with blank columns on left and right in large view but make them disappear in small view.
I use this HTML structure to create the 3 columns: blank ones and the grey one we can see in the middle:
<div class="container-fluid">
<div class="row">
<div class="col"></div>
<div class="col-sm-12 col-md-8"></div>
<div class="col"></div>
</div>
</div>
But because of the min-height: 1px; which is applied to all the .col-* by Bootstrap, when the blank columns should be hidden, they create a little space, breaking what I want to do.
How can I do what I want? Is the way I'm using Bootstrap 4 the good?
To center a column (.col) in a row (.row) you can add the class justify-content-center (see flex utilities) to the row:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col col-sm-12 col-md-8">Hello World</div>
</div>
</div>
So there is no need for empty columns to center a column.
Another solution would be to use the d-* classes (see utilities) to hide the columns:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col d-none d-md-block">1</div>
<div class="col-sm-12 col-md-8">2</div>
<div class="col d-none d-md-block">3</div>
</div>
</div>