I can't understand why this nested grid row has the space above it. I want to align it to the center. I'd like to just select and align to center much like Excel.
I have a fluid container with a nested grid row with three columns and another grid row nested in the first column, but its like I've pressed return and there's a space above it.
TIA!
gridrow alignment issues
.row>div:not(.row) {
background: #ddd;
}
.row .row>div {
background: pink;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xl-4">
<div class="row">
<div class="col-xl-6">Col content</div>
<div class="col-xl-6">Col content</div>
</div>
</div>
<div class="col-xl-4">Col content</div>
<div class="col-xl-4">Col content</div>
</div>
</div>
Don't use
<div class="container-fluid">
but use this
<div class="col-12 d-flex justify-content-center">
//like your code
</div>
col-12 is only an example, change with the number that you want.
Related
I have been experimenting with full responsive layouts between desktops, tablet, and mobile phone sizes for a bit but am having trouble with the layout below.
I was using a grid layout from bootstrap but since it is two columns, as the width shrinks, the second column of two goes below the left, main content section. I want to split it up as the screen caps below state.
This is the starting view:
This is what I want to happen:
This would be the mobile phone view:
So the wide view will get shrunk during testing and I want it to jump to the mobile view where the top side bar goes above the main content and matches the width of the main content while the bottom sidebar does the same thing to the bottom.
It is easy to put both sidebars on the bottom but I want to try to figure out the possibility of splitting it up.
For testing I am using flexbox, css3 and bootstrap5+ and no plugins or javascript.
Solution 1: You can use CSS float feature with float-end and float-start bootstrap classes ref:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid vh-100 vw-100 py-2 bg-light clearfix">
<div class="float-sm-end col-sm-4 col-12 h-25 bg-secondary">Sidebar Top</div>
<div class="float-sm-start col-sm-8 col-12 h-100 bg-warning">Content</div>
<div class="float-sm-end col-sm-4 col-12 h-25 bg-info">Sidebar bottom</div>
</div>
Go in Full page view and reduce browser width below 576px to see the responsive change.
I've used breakpoint small col-sm-* here, use different breakpoints to handle different devices.
There are only d-*-grid rules in entire boostrap v5.1.3 CSS file. Rest of the stuff is experimental.
Solution 2: Using flexbox, playing with order and wrap. Improved version of #Rana's answer:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column flex-sm-wrap vh-100 vw-100 py-2 bg-light">
<div class="order-sm-1 order-2 col-sm-8 col-12 h-100 bg-warning">Content</div>
<div class="order-sm-2 order-1 col-sm-4 col-12 h-25 bg-secondary">Sidebar Top</div>
<div class="order-sm-3 order-3 col-sm-4 col-12 h-25 bg-info">Sidebar bottom</div>
</div>
You may want to try out Bootstrap's Flex order utility to achieve the desired result
https://getbootstrap.com/docs/5.0/utilities/flex/#order
Also, share a code example so others can see what you have already tried, I believe you may face some issues even with Flex's Order utility, but that depends on your HTML structure.
For such layout my preference would be to create a copy of the top column for mobile / desktop, and use d- utility to show hide the right one.
<div class="container">
<div class="row ">
<div class="col-12 d-md-none d-block">
<div class="box box-1">sidebar top col (only for mobile)</div>
</div>
<div class="col-md-8">
<div class="box box-2">main col</div>
</div>
<div class="col-md-4">
<div class="box box-3 d-none d-md-block">sidebar top col (only for desktop)</div>
<div class="box box-4">sidebar bottom col</div>
</div>
</div>
</div>
Example - https://jsbin.com/yidokokewu/1/edit?html,css,output
Alternatively if you are already using Bootstrap 5, then you should also consider using CSS Grid, Bootstrap 5 comes with a lot of useful utilities for that -
https://getbootstrap.com/docs/5.1/layout/css-grid/
If you do not want to duplicate your HTML to show one on desktop and the other on mobile then CSS Grid for layout is the best choice - it has some learning curve but it is worth trying out
You can try following properties
flex-flow: column;
flex-wrap: wrap/nowrap;
order: 1/2/3/....;
When screen-size reaches certain limit than change these values like in below snippet
.container {
display: flex;
flex-flow: column;
flex-wrap: wrap;
background-color: lightgray;
}
.containerBox {
width: 50%;
}
.containerBox1 {
background-color: lightgreen;
order: 2;
}
.containerBox2 {
background-color: yellow;
order: 1;
}
.containerBox3 {
background-color: lightblue;
order: 3;
}
#media screen and (max-width: 700px) {
.container {
background-color: grey;
flex-wrap: nowrap;
}
.containerBox {
width: 100%;
}
.containerBox1 {
order: 1;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container vh-100 vw-100">
<div class="containerBox containerBox1 h-25">Sidebar Top</div>
<div class="containerBox containerBox2 h-100">Content</div>
<div class="containerBox containerBox3 h-25">Sidebar bottom</div>
</div>
Using float-start for left column and float-end for right columns is the best solution. col-12 and col-sm-* were used only in order to defining width of columns. Avoid of using row class for parent div because this will force columns to act like flex items.
Also clearfix class for parent div is required to prevent overlapping following elements.
More information about float: https://getbootstrap.com/docs/5.1/utilities/float/
More information about clear-fix: https://getbootstrap.com/docs/5.1/helpers/clearfix/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="clearfix">
<div class="col-12 col-sm-4 float-end bg-secondary">Sidebar Top Area</div>
<div class="col-12 col-sm-8 float-start bg-primary">Content<br>Some Text<br>Some Text</div>
<div class="col-12 col-sm-4 float-end bg-success">Sidebar Bottom Area</div>
</div>
go to enter link description here
or
enter link description here
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-9 bg-success">col-12 col-sm-9</div>
<div class="col-12 col-sm-3 bg-warning">col-12 col-sm-3</div>
</div>
</div>
</div>
</body>
</html>
.content {
background-color: #faaa03;
height: 500px;
}
.sidebarTop {
background-color: #ccd0d5;
}
.sidebarBottom {
background-color: #99d2f2;
}
.custom-row {
margin-right: calc(-0.5 * var(--bs-gutter-x));
margin-left: calc(-0.5 * var(--bs-gutter-x));
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="custom-row clearfix d-flex flex-wrap d-lg-block">
<div class="col-12 col-md-8 col-lg-8 content order-2 float-lg-start">Content</div>
<div class="col-12 col-md-2 col-lg-4 sidebarTop order-1 float-lg-end">Sidebar Top Area</div>
<div class="col-12 col-md-2 col-lg-4 sidebarBottom order-3 float-lg-end">Sidebar Bottom Area</div>
</div>
</div>
Give this a Try
I can't seem to be able to extend the color of a bootstrap col to the bottom of the page. I don't want to set a fixed height, I want it to extend to the bottom of the browser screen.
HTML:
<div class="container">
<div class="row">
<div class="col box1">
Box1
I need the blue to extend to bottom of page
</div>
<div class="col">
Box2
</div>
</div>
</div>
CSS:
.box1 {
background-color: aqua;
}
JS Fiddle here:
https://jsfiddle.net/romanbogza/oL3nk8wz/
You can use min-vh-100 ( min-height: 100vh; ) class for that.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col box1 min-vh-100 bg-info">
Box1 I need the blue to extend to bottom of page
</div>
<div class="col">
Box2
</div>
</div>
</div>
On my page I have a calendar, I want it to be responsive, so that On Large screens it will look like this:
[Jan] [Feb] [Mar]
[Apr] [May] [June]
[July] [Aug] [Sept]
[Oct] [Nov] [Dec]
When resizing to middle this:
[Jan] [Feb]
[Mar] [Apr]
[May] [June]
[July] [Aug]
[Sept] [Oct]
[Nov] [Dec]
The problem is that I group them by 3 elements to one row (large screens view).
(I assigned these classes to my "months": class="col-lg-4 col-md-6")
So when I change screen size to middle it is still grouped in rows and looks so:
[Jan] [Feb]
[Mar]
[Apr] [May]
[June]
[July] [Aug]
[Sept]
[Oct] [Nov]
[Dec]
Is there any way to solve this?
you can just use one .row and use .clearfix visible-lg-block for large screens at each 3nth item. See Bootstrap Docs about Responsive Columns Resets
[class^="col-"] {
border: solid red;
height: 50px;
text-align: center
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3">Jan</div>
<div class="col-md-6 col-lg-3">Feb</div>
<div class="col-md-6 col-lg-3">Mar</div>
<div class="clearfix visible-lg-block"></div>
<div class="col-md-6 col-lg-3">Apr</div>
<div class="col-md-6 col-lg-3">May</div>
<div class="col-md-6 col-lg-3">Jun</div>
<div class="clearfix visible-lg-block"></div>
<div class="col-md-6 col-lg-3">Jul</div>
<div class="col-md-6 col-lg-3">Aug</div>
<div class="col-md-6 col-lg-3">Sep</div>
<div class="clearfix visible-lg-block"></div>
<div class="col-md-6 col-lg-3">Oct</div>
<div class="col-md-6 col-lg-3">Nov</div>
<div class="col-md-6 col-lg-3">Dez</div>
</div>
</div>
I'm trying to make some space / gap between 2x col-sm-6 inside an row. Have tried some methods from earlier posts here from Stack Overflow, but none seem to make the right result.
What I have tried:
<div class="row">
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
</div>
Well... this creates the right spacing, but then the left and right sides are not allign with the rest of the page content. To help you guys understand what I'm trying to explain, here is a picture.
Here you can see that the upper white content, the width is what I'm trying to keep for all the elements inside the page. I know its because the extra div I added, because the following code is producing the upper white content box you see in the picture, but then there is no spacing. Have also tried with col-md-5 and an offset of 2 but this creates too much spacing.
<div class="row">
<div class="col-sm-6 contentpage3">
</div>
<div class="col-sm-6 contentpage3">
</div>
</div>
What am I doing wrong?
You can do something like this.
All .col-* elements should be inside row elements.
All .col-* elements should contain content, not be content.
.example {
padding-bottom: 15px;
background: #ccc;
}
.example > .row > div {
margin-top: 15px;
}
.example .inside {
height: 50px;
background: #fff;
border: 1px solid #eee;
}
<div class="container-fluid example">
<div class="row">
<div class="col-xs-12">
<div class="inside"></div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="inside"></div>
</div>
<div class="col-xs-6">
<div class="inside"></div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
Is it possible to do this?
I have 3 columns in a row. The first column has 2 nested row - top and bottom.
Is it possible to have the bottom row of the first column to be at the fourth position is the mobile view?
Here is my code:
http://www.bootply.com/yhhFaWRjC6
Edit:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row" style="height:100%;">
<div class="col-md-4 col-lg-4 col-sm-12" style="background-color:#ccc;height:100%; padding:0px;">
<div class="row">
<div class="col-md-12 " style="height:180px;background-color:#d33;">one</div>
</div>
<div class="row">
<div class="col-md-12 " style="height:180px;background-color:#edd;">four</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-12" style="height:360px;background-color:#e42;">two</div>
<div class="col-md-4 col-lg-4 col-sm-12" style="height:360px;background-color:#444;color:#fff;">three</div>
</div>
</div>
I want to make it the sequence to be:
- one
- two
- three
- four
In mobile
Assuming the first column to be less in height than both the second and third column I'm afraid you can only achieve this by:
Duplicating the content of the fourth column and showing/hiding it based on the grid size (e.g. xs). I'll show an example of this below.
Using JavaScript to move the content of the fourth column when the grid size changes. I have a small prototype of a jQuery plugin to facilitate this at https://github.com/ckuijjer/jquery-breakpointspy
Create your own grid system using flexbox. This might be an option if you don't have to support IE9 or lower.
I've implemented the first option below, and made some additional changes:
I've moved the inline styling into classes named .one, .two, .three and .four to make the code a little bit more clean.
I've started with the mobile layout and gave all classes col-xs-12. This makes a column take up 12 columns from the size xs onwards.
<div class="container">
<div class="row">
<div class="col-xs-12 one">one</div>
...
<div class="col-xs-12 four">four</div>
</div>
</div>
As we want to have each column take up a fourth of the container, I've added col-md-4 to each of the columns. Each column now looks like e.g. <div class="col-xs-12 col-md-4 one">. There is no need to add col-lg-4 nor col-sm-12.
Showing a column only on a specific grid size can be done by e.g. visible-xs-block. As we want the fourth column to only be visible on xs and sm I've changed the html into <div class="col-xs-12 visible-xs-block visible-sm-block four">four</div>. Notice that I've dropped the col-md-4 as there is no need for that anymore.
To put the fourth column below the first column when the screen is md or lg the first column is changed into a nested grid. I've opted not to use a second .row as having more than 12 columns will make the next column drop anyway and used .col-xs-12 as I always want a column to have a bootstrap grid class on it, regardless of the screen size. I could've used visible-md-block and visible-lg-block to make it show on md and lg only, but for fun I've used its opposite, hidden-xs and hidden-sm.
<div class="col-xs-12 col-md-4">
<div class="row">
<div class="col-xs-12 one">one</div>
<div class="col-xs-12 hidden-xs hidden-sm four">four</div>
</div>
</div>
See the entire code below:
.one {
height: 180px;
background-color: #d33;
}
.two {
height: 360px;
background-color: #e42;
}
.three {
height: 360px;
background-color: #444;
color: #fff;
}
.four {
height: 180px;
background-color: #edd;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="row">
<div class="col-xs-12 one">one</div>
<div class="col-xs-12 hidden-xs hidden-sm four">four</div>
</div>
</div>
<div class="col-xs-12 col-md-4 two">two</div>
<div class="col-xs-12 col-md-4 three">three</div>
<div class="col-xs-12 visible-xs-block visible-sm-block four">four</div>
</div>
</div>