I'm stuck on this layout issue, where I want to put two columns one below the other, on the right side, and I want to keep navigation on the left side. I'm currently having this layout:
The problem is, they are not placed right. I want them to be aligned exactly one below the other, something like this:
#extends('layouts.app')
#section('content')
<div class="row">
#include('partials.admin-sidebar')
<div class="col-md-10">
// first column layout
</div>
</div>
<div class="row">
<div class="col-md-10">
// Second column layout
</div>
</div>
#stop
The navigation sidebar that I'm including:
<div class="col-lg-2">
//Sidebar layout
</div>
Is there any easy fix that could solve this problem. Appreciate any help.
Try adding bootstrap 4 utilities justify-content-endto your row which you wanna align right. It would be helpful if you make a working snippet
#extends('layouts.app')
#section('content')
<div class="row">
#include('partials.admin-sidebar')
<div class="col-md-10">
// first column layout
</div>
</div>
<div class="row justify-content-end">
<div class="col-md-10">
// Second column layout
</div>
</div>
#stop
Solution2:
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-10">
<div class="row">
<div class="col-lg-12"></div>
<div class="col-lg-12"></div>
</div>
</div>
</div>
I guess you're using bootstrap. Try this:
#extends('layouts.app')
#section('content')
<div class="row">
#include('partials.admin-sidebar')
<div class="col-lg-10">
// first column layout
</div>
</div>
<div class="row">
<div class="col-lg-2">
// Empty column
</div>
<div class="col-lg-10">
// Second column layout
</div>
</div>
#stop
I think your HTML is Wrong, Change Your HTML Like.
#extends('layouts.app')
#section('content')
#include('partials.admin-sidebar')
<div class="col-md-10">
<div class="row">
<div class="col-md-12">
// first column layout
</div>
</div>
<div class="row">
<div class="col-md-12">
// Second column layout
</div>
</div>
</div>
</div>
#stop
Related
Actually I have a layout build with one row class and two column by using bootstrap grid system.
Now I need to add another one item inside that grid system but I'm unable to position it properly inside the layout as it's going under all other columns.
As you can see on the screenshot
As you can see the third column I'm trying to add goes under all other while I would to place it in the red rectangle position
The layout is build as the following:
<div class="container-fluid">
<div class="row">
<div class="col-md-4 mb-4 mt-1"></div>
<div class="col-md-8 mb-4 mt-1"></div>
</div>
</div>
I was trying to add something like that to put the 3rd column but the result was as described above
<div class="container-fluid">
<div class="row">
<div class="col-md-4 mb-4 mt-1"></div>
<div class="col-md-8 mb-4 mt-1"></div>
<div class="col align-self-start"><div>
</div>
</div>
You should use the following approach
<div class="container-fluid">
<div class="row">
<!-- There will be column with 2 right box -->
<div class="col-md-4">
<div class="row">
<div class="col-md-12 mb-4 mt-1">
</div>
<div class="col-md-12">
ITEM UNDER 1ST BOX
</div>
</div>
</div>
<!-- This will be your larger left box -->
<div class="col-md-8">
<div class="row">
<div class="col-md-12 mt-1">
</div>
</div>
</div>
</div>
</div>
Most grid layout examples in Bootstrap 4 put columns inside rows. Is it wrong to put rows inside columns ? Like this,
<div class="col col-md-6">
<div class="row">
</div>
</div>
Yes, it's totally valid to use nested columns/row. Just be sure to always use a column inside a row. Else you'll get unexpected layouts.
<div class="col">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<!-- Your content goes here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It's a perfectly valid approach. Consider the example below:
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
</div>
</div>
The [x]-col-[y] classes are all percentage based for widths. Go nuts with the nesting! Just make sure you wrap them in a row div else you'll get some funky margins
Can someone please give me a simple example of html and css that I need to have to create something like this picture using bootstrap?
website template like this image
I searched the web but cannot find a simple example!
(for bootstrap v3.3.7 in asp.net mvc project)
Here is a code for You, enjoy!
<div class="row">
HEADER
</div>
<div class="row">
<div class="col-md-4">
SIDEBAR
</div>
<div class="col-md-8">
<div class="col-md-12">
content1
</div>
<div class="col-md-12">
content2
</div>
</div>
</div>
<div class="row">
FOOTER
</div>
This is the complete and corrected answer:
<div class="row">
<div class="col-md-4"> HEADER </div>
</div>
<div class="row">
<div class="col-md-4">
SIDEBAR
</div>
<div class="col-md-8">
<div class="col-md-12">
content1
</div>
<div class="col-md-12">
content2
</div>
</div>
</div>
<div class="row">
<div class="col-md-4"> FOOTER </div>
</div>
I have 4 columns like this
<div class="container">
<div class="row">
<div class="col-md-3"> col3</div>
<div class="col-md-1"> col1</div>
<div class="col-md-4"> col4</div>
<div class="col-md-4"> col4</div>
</div>
</div>
Normally it looks like this:
[3][1][4][4]
When it's in smaller viewport, I want it to show like this:
[4]
[4]
[3]
[1]
I have tried
<div class="container">
<div class="row">
<div class="col-md-3 col-md-push-8"> col3</div>
<div class="col-md-1 col-md-push-8"> col1</div>
<div class="col-md-4 col-md-pull-4"> col4</div>
<div class="col-md-4 col-md-pull-4"> col4</div>
</div>
</div>
It shows:
In large viewport:
[4][4][3][1]
In viewport that those columns collapse:
[3][1][4][4]
But it seems like what I did is completely reversed...
A created a codepen snippet http://codepen.io/ngp130895/pen/Kzxdpj
How can I achieve this?
you may get the solution in this link
I found a workaround for this. This looks kinda stupid but it works.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-4"> col4</div>
<div class="col-md-4 col-md-push-4"> col4</div>
<div class="col-md-3 col-md-pull-8"> col3</div>
<div class="col-md-1 col-md-pull-8"> col1</div>
</div>
</div>
Edit: I found that this actually the correct way. Mobile view should be written by default and larger viewport is modified by pushing and pulling the columns.
Div is an element block and every new div go to the head of the line.
For fix this problem have two way:
Use tag
Use a code CSS for do became tag inline
For the first way you must only change tag <div> with <span.
For the last way you can use it:
div.container > div.row > div {
display: inline;
}
<div class="container">
<div class="row">
<div class="col-md-3"> col3</div>
<div class="col-md-1"> col1</div>
<div class="col-md-4"> col4</div>
<div class="col-md-4"> col4</div>
</div>
</div>
I have a two columns one column is size 9 and other column is size 3. I have a Google Map inside col-3 but my map is at the bottom of the screen. How do I get it to move up?
<div class="container">
<div class="row">
<div class="col-sm-9">
content....
<div class="col-sm-3">
content...
</div>
<div>
</div>
</div>
You have your col-sm-3 nested within your col-sm-9
Try this:
<div class="container">
<div class="row">
<div class="col-sm-9">
content....
</div>
<div class="col-sm-3">
content...
</div>
</div>
</div>
If I understand your question correctly, you want the divs stacked with the 3-column div on top. If so, do it like this:
<div class="container">
<div class="row">
<div class="col-sm-9 col-sm-pull-3">
content....
</div>
<div class="col-sm-3 col-sm-pull-9">
content...
</div>
</div>
</div>