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>
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>
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
I'm using Bootstrap 5 and I'm trying to get the first row to be at the top of the page and the second row to occupy the rest of the viewport and have its content vertically centered without scrollbars (assuming the viewport is high enough). Here's the basic code
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container min-vh-100">
<div class="row">
<div class="col-12 col-md-2">
Content
</div>
<div class="col-12 col-md-10">
Content
</div>
</div>
<div class="row min-vh-100 align-items-center">
<div class="col-12 col-lg-6">
Content
</div>
<div class="col-12 col-lg-6">
Content
</div>
</div>
</div>
The second row does correctly center its content, however, because I'm using the min-vh-100 class it produces scroll bars (removing the first row makes the scroll bars go away as expected). Changing the second row's min-vh-100 to h-100 class doesn't help (actually makes things worse). The problem seems to be how to tell the second row to occupy 100% of the parent's remaining height and not 100% of the viewport height.
You need the d-flex and flex-column classes on your container. Then, rather than forcing height on the second row, use flex-fill to get it to use the remaining space. Fixed sizing should be a last resort.
See https://getbootstrap.com/docs/5.0/utilities/flex.
.row:first-child {
background: thistle;
}
.row:last-child {
background: moccasin;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container min-vh-100 d-flex flex-column">
<div class="row">
<div class="col-2">
Content
</div>
<div class="col-10">
Content
</div>
</div>
<div class="row flex-fill align-items-center">
<div class="col-6">
Content
</div>
<div class="col-6">
Content
</div>
</div>
</div>
I am using Bootstrap v2.3.0 to design footer content. I am trying to use the bootstrap grid to order my columns. In v2.3.0 by using span(adding up to 12 cols), my columns are not covering the entire row.
Only in 980px screen, it's covering the entire row. But when screen size gets larger than 980px, some space is getting left or uncovered on the right side. I want the 3rd span part to be in the extreme right of the screen.
Please refer to the image for the output of my code.
(https://i.stack.imgur.com/SlfyQ.png)
Actually I want my output like below code:
[Required or Expected output][1]
<link href="https://getbootstrap.com/3.0.0/assets/css/bootstrap.css" rel="stylesheet" />
<link href="https://getbootstrap.com/3.0.0/assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">.col-sm-6</div>
<div class="col-sm-6" style="background-color:lavenderblush;">
<div style="float:right;">.col-sm-6_Part-2</div>
<div style="float:right; padding-right: 100px">.col-sm-6_Part-1</div>
</div>
</div>
</div>
What should I use to get it correct? Please help. Thanks in advance !!
Below is the current/wrong code.
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="span4" style="background-color:lavender;">span4</div>
<div class="span4" style="background-color:lavenderblush;">span4</div>
<div class="span4" style="background-color:lavender;">span4</div>
</div>
</div>
</body>
Replace row class with row-fluid:
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row-fluid">
<div class="span4" style="background-color:lavender;">span4</div>
<div class="span4" style="background-color:lavenderblush;">span4</div>
<div class="span4" style="background-color:lavender;">span4</div>
</div>
</div>
Here. I know you are using bootstrap v2 and I understand why but do this.
Do this
<div class="row" style="display: flex; justify-content: space-between">
I did inline style to not destroy other parts of code because bootstrap v2 is really old and I don't know how it will work if you put this CSS globally for every row element
It will put first span to left second span to center and third span to right of the screen.
Is this what you want to do? If not then post in comments.
UPDATE
If you only want to push the third element to the right and leave other two on their current places you can do this
<div class="span4" style="background-color:lavender; float: right">span4</div>
It will float that element to the far right of its parent
UPDATE 2
Based on new info I got from comment here is the solution
<div class="row">
You need
<div class="row-fluid">
row-fluid will take the whole width of parent and spans will stretch
This is a bootstrap 2 feature. Read more about it here
check this:
minimum amount of code:
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavender;">span4</div>
<div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavenderblush;">span4</div>
<div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavender;">span4</div>
</div>
</div>
check :https://jsfiddle.net/sugandhnikhil/ut8d0j3m/
I have two rows which contain 3 column each , I would like at certain breakpoint to switch from 3 columns to 2 column and from 2 columns to 1 column (mobile breakpoint). so far this is what I have.
#media (min-width:768px) {
.col-md-4{
min-width: 50%;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
<div class="row" >
<div class="col-md-4">4</div>
<div class="col-md-4">5</div>
<div class="col-md-4">6</div>
</div>
Question
This does not work , what am I missing in my code? help am newbie though
I would place them all in the same .row and use the appropriate grid classes. This should get you what you want:
<div class="row">
<div class="col-sm-6 col-md-4">1</div>
<div class="col-sm-6 col-md-4">2</div>
<div class="col-sm-6 col-md-4">3</div>
<div class="col-sm-6 col-md-4">4</div>
<div class="col-sm-6 col-md-4">5</div>
<div class="col-sm-6 col-md-4">6</div>
</div>
Note: I would not redefine .col-md-4 or any of the Bootstrap built-in grid glasses like that.
For more details, read the Bootstrap documentation on using grid glasses: https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match
Just use the different breakpoint column classes of bootstrap.
If you want to change order in bootstrap 3 (as requested in comments) you can easily use push and pull.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 col-md-push-4 col-sm-6 col-sm-push-6">1</div>
<div class="col-md-4 col-md-pull-4 col-sm-6 col-sm-pull-6">2</div>
<div class="col-md-4 col-sm-6">3</div>
</div>
https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match
Use col-sm-6 to set 2 divs in 1 row on sm size...
(the calc is: 12/6=2 => 100% /2=50% means each div gets 50% to his width)
By default in xs size's screen will set 1 div in 1 row because you did not specify otherwise...
<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>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">1</div>
<div class="col-sm-6 col-md-4">2</div>
<div class="col-sm-6 col-md-4">3</div>
</div>
<div class="row" >
<div class="col-sm-6 col-md-4">4</div>
<div class="col-sm-6 col-md-4">5</div>
<div class="col-sm-6 col-md-4">6</div>
</div>
</div>