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>
Related
https://prnt.sc/sa63wm
You can see on the screenshot
How can i fill the empty place with div elements? I tried display:inline-block or the other display things. They didnt work.
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-9">
</div>
</div>
Bootstrap’s grid has excatly 12 column units. Whenever you exceed 12, it will wrap it in a new row. It works, but you should exceed 12 columns in one row.
So instead of doing it above, you should go with:
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
</div>
<div class="row">
... next columns
If you want to have them all in row, you should probably use only one row and then put your other content vertically, as your first column is very tall.
how to do something like that with bootstrap?
img cuz I do not know how to describe it
You can use Bootstrap grid to achieve this
<div class="row">
<div class="col-6">div-1</div>
<div class="col-6">
<div class="row">
<div class="col-12">div-2</div>
<div class="col-12">div-3</div>
</div>
</div>
</div>
You can try something like this:
<div class="container">
<div class="row">
<div class="col">
div 1
</div>
<div class="col">
<div class="row">
<div class="col">
div 2
</div>
</div>
<div class="row">
<div class="col">
div 3
</div>
</div>
</div>
</div>
</div>
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
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
When creating an ordinary Grid in bootstrap with 3 rows as the following, the grid is always positioned towards the left of the page,
I've tried centering the entire grid towards the center with the help of text-align:center and also tried using css classes center-block and text-center
But the grid only barely moves towards the center area.
Any suggestions on how i can get this to work?
Also i require Precise centering not using offsets in bootstrap
<div class="container">
<div class="row">
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
<div class="row">
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
<div class="row">
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
</div>
Here's how to get precise centering without using the offset classes: Fiddle Demo
Create a new helper class called col-centered:
.col-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
Any column you use this class on (ex. class="col-md-7 col-centered") will be centered directly in the middle of its container.
Then, add another set columns around your three column grid:
<div class="container">
<div class="row">
<!-- New set of columns, centered -->
<div class="col-sm-7 col-centered">
<!-- New row -->
<div class="row">
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
</div>
<div class="row">
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
</div>
<div class="row">
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
</div>
</div>
</div>
</div>
Make sure to use col-xs-4 rather than col-xs-1 to create the three columns so that it spans all twelve of the Bootstrap grid columns.
You need to use offset to center your columns like this:
<div class="container">
<div class="row">
<div class="col-xs-1 col-xs-offset-4">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
<div class="row">
<div class="col-xs-1 col-xs-offset-4">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
<div class="row">
<div class="col-xs-1 col-xs-offset-4">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
</div>
Here's a jsfiddle: https://jsfiddle.net/AndrewL32/e0d8my79/12/
The bootstrap grid has 12 columns. If you want 3 equal 'columns', they each have to be 12/3 = 4 'gridcolumns' wide.
You're html will then look like this:
<div class="row">
<div class="col-xs-4">Block</div>
<div class="col-xs-4">Block</div>
<div class="col-xs-4">Block</div>
</div>
The problem is that you are only using 3 out of 12 possible columns in Bootstrap. The columns, by default, run from left to right. A full 12 columns would look like this:
<div class='container'>
<div class='row'>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
</div>
</div>
That HTML represents 12 columns, spanning the entire width of the .container. But since you are using only 3 divs, each 1 column in size, all 3 columns are on the left side of the .container.
If you want 3 columns that span the entire size of the .container do this:
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
If you want 3, single-column divs that are centered in the .container it's a bit more complicated since the result of 12-3 = 9 is not divisible by 2. Since it's not divisible by 2 you can't have equal size space on the left and right side of the 3 columns. In order to get around this problem you need to do a nested (sub)grid similar to this:
<div class="col-xs-4 col-xs-offset-4">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
</div>
This is essentially a 3 column within another grid.
That will create 3 divs, but the first will be offset (or pushed) to the right 4 columns, which will make all 3 columns appeared to be centered in the layout
You need wrapper. Try with <div class="container">Your code here</div>
EDIT
The question was edited after that comment.