how can I center my main container horizontally, using excising bootstrap classes
here is the container:
<div class="container-fluid main-container">
<div class="col-md-10 content">
<div class="panel panel-default">
<div class="panel-heading">
Edit existing questions
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
The way it looks now
Here you go with a solution https://jsfiddle.net/w4gLtcz5/1/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid main-container">
<div class="row">
<div class="col-md-offset-1 col-md-10 content">
<div class="panel panel-default">
<div class="panel-heading">
Edit existing questions
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
In bootstrap, by default there is 12 columns.
Since your container is occupying 10 columns out of 12, so started your container from 2 column instead of column 1. So that in both the side of the container you will have equal space.
I considered col-md-10 is your number of columns
I have added col-md-offset-1.
Please use col-xs-offset-x
Instead of x you can write number between 1 to 12.
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns:
Your code will be.
<div class="container-fluid main-container">
<div class="col-md-10 content col-xs-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
Edit existing questions
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
Reference link https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
Related
This might be a bit of a silly question - but I could not find an answer to what I'm trying to do..
I'm trying to make the entire container div responsive (like a column inside a row).
e.g. I want to have the effect that this would produce:
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-6 cold-sm-10">
...
</div>
</div>
</div>
but in one line... something like:
<div className="container-lg-6 container-sm-10">
...
</div>
Is there something in Bootstrap that could achieve this?
I tried the classes container-sm but they are not working like what I want.
That is not how the containers work. But you can easily achieve the layout by just nesting everything inside of a .col-12.col-sm-10.col-lg-6 inside a .row inside a .container-fluid
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container-fluid p-0">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-lg-6">
<div class="row">
<div class="col bg-primary">
<h1>1</h1>
</div>
<div class="col bg-secondary">
<h1>2</h1>
</div>
<div class="col bg-info">
<h1>3</h1>
</div>
</div>
<div class="row">
<div class="col bg-info">
<h1>4</h1>
</div>
<div class="col bg-primary">
<h1>5</h1>
</div>
</div>
</div>
</div>
</div>
In my app i have following, typical for bootstrap view structure:
<div class="row">
<div class="col-lg-9">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</div>
content length inside panel class may be different for each column. Moreover, in one on them part of it is being displayed only when user press a button.
How to ensure that each column will always have the same height? I can setup same column height with use of display: flex as below:
.col-md-4 {
display: flex;
}
all 3 columns have same height. But panels not. How to achieve it?
If the .col-md-4 items have height defined already you can simply add .h-100 (height: 100%) to panels class="h-100 panel panel-default".
https://getbootstrap.com/docs/4.0/utilities/sizing/
in bootstrap 4 all columns have display flex & the height of columns is the same. so the content in every column has an effect on another column so if the inside content has full height all of them be the same height.
you need to add h-100 class on content in columns.
like <div class="h-100 panel panel-default"> </div>
be attention this tag should not have vertical margins.
I am trying to use two column divisions in same line.
Check my code:
<div class="col-md-12">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
Left Div
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
Right Div
</div>
</div>
</div>
this structure responsive for till 574px. but when i reduce browser size after 574px, divisions show in two rows. but my requirement show it in same line (left & Right)
please check above image. that the issue.
You can set same divided columns for every screen using col class
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col bg-success">
Left Div
</div>
<div class="col bg-warning">
Right Div
</div>
</div>
</div>
</div>
bg-success and bg-warning is just for color
<div class="col-12 ">
<div class="row">
<div class="col-6">
Left Div
</div>
<div class="col-6">
Right Div
</div>
</div>
I'm using Bootstrap to build a Dashboard, but I'm rather new to Bootstrap and I'm having issues getting the final grid layout in the image below. The problem is that when I add the 4th column (Table), which will vertically house more data than the other 3 columns on the left (Widgets), is pushing down the bottom row content (Chart) like in this image. It looks easy, and I guess it has something to do with the 'colspan' or 'rowspan' features, but I can't figure it out.
Why is my chart getting pushed down like this, and how can I fix it?
You have to nest to achieve that.
For example:
<div class="container"
<div class="row">
<div class="col-md-9 not-right-table-content">
<!--nest content here, it's like a new grid-->
<div class="row">
<div class="col-md-4">
widget 1
</div>
<div class="col-md-4">
widget 2
</div>
<div class="col-md-4">
widget 3
</div>
<div class="col-md-12">
chart
</div>
<div class="col-md-12">
other content
</div>
</div>
</div>
<div class="col-md-3">
right table html here
</div>
</div>
</div>
#Nuno - Use below "HTML Code Snippet" or see my JS Fiddle (you might need to scroll boundaries to extend Result pane.)
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 not-right-table-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">widget 1</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 2</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 3</div>
<div class="col-lg-12 col-md-12 col-sm-12">chart</div>
<div class="col-lg-12 col-md-12 col-sm-12">other content</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">right table html here</div>
</div>
You can use below resources to know more about bootstrap:
Bootstrap - Approach to better, faster, stronger web development
Blasting off with Bootstrap
I want to create a (more or less Pinterest like) grid layout like in the below below. The two columns have different rows, but do appear side to side. How can I do this using the twitter bootstrap grid framework?
If I'm not mistaken the normal row/col behaviour would give me the layout below.
You should be able to achieve the layout by using two columns which themselves have rows:
<div class="row">
<div class="col-xs-6">
<div class="col-xs-12">1</div>
<div class="col-xs-12">2</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">3</div>
<div class="col-xs-6">4</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="col-xs-12">5</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">6</div>
<div class="col-xs-6">7</div>
</div>
</div>
<div class="col-xs-12">8</div>
</div>
</div>
http://jsfiddle.net/zz4ug/
Create the illusion of incongruous rows via background color or image:
<div class="container">
<div class="row">
<div class="col-xs-6 red"> </div>
<div class="col-xs-6 orange"> </div>
</div>
<div class="row">
<div class="col-xs-6 red"> </div> <--This will appear to be on row 1
<div class="col-xs-3 blue"> </div>
<div class="col-xs-3 green"> </div>
</div>
</div>
Check out this jsFiddle