Bootstrap has its own grid system and I want to utilize it as much as I can so that I can minimize any custom CSS.
I have the code below wherein I have a couple of row classes here, you can see here that the first row is not aligning with the rest of the row. Is there any way that I can make this aligned?
You can also view it here on codepen https://codepen.io/aceraven777/pen/zYZMpEd
<div>
<div class="row">
<div class="col-4">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-8">
<div class="bg-red">
This is a content
</div>
</div>
</div>
<div class="row">
<div class="col-8 row">
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
</div>
<div class="col-4">
<div class="bg-red">
This is a content
This is a content
This is a content
This is a content
This is a content
This is a content
</div>
</div>
</div>
</div>
The issue is that you are combining rows and columns together in one div. With bootstrap you cant combine rows and columns as there are some conflicting css. Just split this div <div class="col-8 row"> into two seperate divs.
<div>
<div class="row">
<div class="col-4">
<div class="bg-red">This is a content</div>
</div>
<div class="col-8">
<div class="bg-red">This is a content</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red"></div>
</div>
</div>
</div>
</div>
</div>
Related
I used the Grid layout of bootstrap to create an overview in which one row serves as a header. This row should stick to the top of the grid at all times.
The problem is that I can not handle when the scrollbar appears. It changes the layout in a a way so that the header is not aligned with the rows anymore (See the example below).
Putting the header in the scrollable container fixes the layout issue, but will scroll the header away.
How do I align the content and the header not matter if the scrollbar is visible or not?
Example:
Notice how each column is a little less aligned.
.max-height {
max-height: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-md border m-3">
<div class="row">
<div class="col">
Some Heading
</div>
<div class="col">
Some Heading
</div>
<div class="col">
Some Heading
</div>
</div>
<div class="row overflow-auto max-height">
<div class="col">
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
</div>
</div>
</div>
It's not a perfect solution but how about something like this?
I set the heading column as sticky-top, and gave it a background colour.
Then set the container to overflow-auto.
.max-height {
max-height: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-md border m-3 overflow-auto ">
<div class="row sticky-top bg-white">
<div class="col">
Some Heading
</div>
<div class="col">
Some Heading
</div>
<div class="col">
Some Heading
</div>
</div>
<div class="row max-height">
<div class="col">
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
</div>
</div>
</div>
I have the following structure
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
box 1
</div>
</div>
<div class="row">
<div class="col-md-12">
box 2
</div>
</div>
</div>
<div class="col-md-4">
box 3
</div>
</div>
</div>
Is there a possibility with bootstrap to easily show the following order on small screens?
|box1|
|box3|
|box2|
I could not figure out how to swap rows in this manner. Thank you
Instead of putting the box column in other row. you can have all the box column in same row. You can achieve the column order in bootstrap using col-sm-push-* or col-sm-pull-* utility.
Check demo here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="content">
<h1>Column 1</h1>
</div>
</div>
<div class="col-sm-4 col-sm-push-4">
<div class="content">
<h1>Column 3</h1>
</div>
</div>
<div class="col-sm-4 col-sm-pull-4">
<div class="content">
<h1>Column 2</h1>
</div>
</div>
</div>
</div>
I have divided my Bootstrap grid columns following way.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="col-md-12">B1</div>
<div class="col-md-12">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="col-md-12">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
Please find below of visual layout of this code.
Is my approach of dividing grid columns correct or wrong?
Always wrap your column inside a row to avoid any css break when resizing/or something like that
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A </div>
<div class="col-md-6">B
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C </div>
</div>
</div>
You should add row divs for children inside B.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>
Just add an row div inside B for every line of columns inside: b, b1.1, b1.2 and b2.1, b2.2. This should help.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class='row'>
<div class="col-md-12">B1</div>
</div>
<div class='row'>
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class='row'>
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>
You should always wrap your columns inside the row for better layout without spacing in the columns or clearfix for layout with spacing:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="clearfix">
<div class="col-md-12">B1</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
You might be interested to see this Q/A, Remove padding from columns.
Is it possible to build a border layout with bootstrap, that centers the labels of the right and left borders, keeps the bottom at the bottom of the page and fills the content with all space left over in the center?
New to bootstrap, but even with the help of google I just came up with this:
div class="container">
<div class="row">
<div class="col-xs-1">
<div class="left-box">
<div class="turn-left">left</div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">
<div class="top-box">top</div>
</div>
<div class="col-xs-12">
<div class="content-box">content</div>
</div>
<div class="col-xs-12">
<div class="bottom-box">bottom</div>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="right-box">
<div class="turn-right">right</div>
</div>
</div>
</div>
https://jsfiddle.net/fbtw6/352
The result is not very convincing - what am I doing wrong?
See it this works for you.
<div class="container">
<div class="page-header">
<div class="row">
<div class="col-xs-1">
<div class="left-box">
<div class="turn-left">left</div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">
<div class="top-box">top</div>
</div>
<div class="col-xs-12">
<div class="content-box">content</div>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="right-box">
<div class="turn-right">right</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>sticky footer</p>
</div>
</footer>
I used this example to assemble.
Like this any better?
i am creating the layout something like this :
[my layout on paper][1]
but from html and using bootstrap i got following like this :
http://jsfiddle.net/52VtD/7352/
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<div class="sidemargin">
<%--<div>
<span class="verticaltextname1">Project</span>
</div>
<div>
<span class="verticaltextname1">Work History</span>
</div>--%>
</div>
</div>
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8">
<div class="row">
<div class="col-xs-3">
<div class="topBox">About me</div>
</div>
<div class="col-xs-3">
<div class="topBox">Specialization</div>
</div>
<div class="col-xs-3">
<div class="topBox">Awards</div>
</div>
<div class=" col-xs-3">
<div class="topBox">Testimonials</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="topBox">Project</div>
</div>
<div class="col-xs-3">
<div class="topBox">Description</div>
</div>
<div class="col-xs-3">
<div class="topBox">Achievements</div>
</div>
<div class="col-xs-3">
<div class="topBox">Clients</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="topBox">
WorkedAs
</div>
</div>
<div class="col-xs-6">
<div class="topBox">
Skills
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="topBox">
Responsibilities
</div>
</div>
<div class="col-xs-6">
<div class="topBox">
Work involved
</div>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<div class="sidemargin">
</div>
</div>
</div>
</div>
http://jsfiddle.net/52VtD/7352/
how can i adjust the greenyellow column as per my paper starch, and create the same space between each box?