Im working on bootstrap but unsure if im using the columns correctly
I cant seem to get the margin and padding correct.
Please see image below and JS Fiddle
<div class="row">
<!-- MAIN LEFT CONTENT! -->
<div class="col-lg-9">
<div class="panel panel-default">
<div class="panel-body">
<div class="alert alert-info">
<p><span>Pending approval</span>.Your profile is bring approved. This means others can't search for you just yet.</p>
</div>
<div class="col-lg-5 col-sm-4 col-xs-5 hot-not">
<div class="row">
<div class="thumbnail">
The rule .col-xs-5 (line 793) is fixing the width:
.col-xs-5 {
width: 41.66666666666667%;
}
Set it to 50%:
.col-xs-5 {
width: 50%;
}
Related
I have 3 div in my html. div1, div2,div3. Now in mobile version I want to change the alignment of those div. I have given in below images.
HTML Code
<div class="row">
<div class="col-md-12">
Div1
</div>
<div class="col-md-9" style="float:right;">
Div3
</div>
<div class="col-md-3" style="float:left;">
Div2
/div>
</div>
But didn't solved.
How to do that?
Anybody help please ?
Looks like you are using bootstrap. If you re using Bootstrap 4 you can use the ordering feature to easily achieve this.
<div class="row">
<div class="col-md-12 order-md-1 order-sm-1">
Div1
</div>
<div class="col-md-3 order-md-2 order-sm-3">
Div2
</div>
<div class="col-md-9 order-md-3 order-sm-2">
Div3
</div>
</div>
Fiddle
EDIT
Since you are using bootstrap 3, reordering col-12 are not possible (e.g. col- * -push / col- * -pull). As alternative you can use flex-box or grid to achieve this easily. See example below.
<div class="row reordered">
<div class="col-md-12">
Div1
</div>
<div class="col-md-3">
Div2
</div>
<div class="col-md-9">
Div3
</div>
</div>
CSS - Reordered using grid
#media screen and (max-width: 992px) { //992 is the breakpoint of col-md
.reordered {
display: grid;
}
.col-md-3 {
order: 2;
}
.col-md-9 {
order: 1;
}
}
Fiddle
<div class="row">
<div class="col-md-12 col-12">
Div1
</div>
<div class="col-md-12 col-12">
<div class="row flex-row-reverse flex-column-reverse">
<div class="col-md-3 col-12">
Div2
</div>
<div class="col-md-9 col-12">
Div3
</div>
</div>
</div>
</div>
If I understand correctly, you're using the Bootstrap framework in which case you can use the "responsive utility classes" which are part of the framework's grid system to achieve what you require. To control the ordering of elements on the mobile version, you will also need to add some additional CSS.
The following changes to your HTML, along with the added CSS of .order-row etc, should achieve this for you:
#media (max-width: 768px) {
.order-row {
display: flex;
flex-direction: column;
}
.order-0 {
order: 0;
}
.order-1 {
order: 1;
}
}
<link href="https://cdn.usebootstrap.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
Div1
</div>
</div>
<div class="row order-row">
<div class="col-md-3 col-sm-12 order-1">
Div2
</div>
<div class="col-md-9 col-sm-12 order-0">
Div3
</div>
</div>
</div>
For more information on how to use bootstraps responsive grid classes, see this documentation
Div1
Div2
Div3
if you use bootstrap 4, you can use order
<div class="row">
<div class="col-md-12">
Div1
</div>
<div class="col-md-9 order-md-0 order-1">
Div2
</div>
<div class="col-md-3 order-md-1 order-0">
Div3
/div>
</div>
Explanation
the Div2 will show on the left on viewport md and bigger, and it will shown under Div3 if the viewport is smaller than md
I have 2 columns and on the left and the right side, When I open the web page on a small or xs screen the two columns overlap. I would like for the other column to go below the other.
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9 area-style"></div>
</div>
</div>
CSS:
.area-style {
border: 1px solid #ccc;
padding-top: 2em;
background: #fafafa;
height: 500px;
}
Please check if you have given floats to the elements inside any of the "col-md-3" or "col-md-9" divs. The Overlapping 99% occurs If the floats are not cleared.
If you are using Bootstrap4 try this.
<div class="container">
<div class="row">
<div class="col-12 col-md-3"></div>
<div class="col-12 col-md-9 area-style"></div>
</div>
</div>
Try this.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-3"></div>
<div class="col-xs-12 col-md-9 area-style"></div>
</div>
</div>
Please tell me if this helps you.
I'm trying to get the right div to be on top when viewed on a mobile device using Bootstrap, as explained and answered in this thread, meaning I want my desktop layout to look as follows:
A | B
And my mobile layout as follows:
B
A
However, the proposed following solution isn't working for me:
<div class="row">
<div class="col-md-6 col-md-push-6">B</div>
<div class="col-md-6 col-md-pull-6">A</div>
</div>
My code looks as follows:
<section id="kalender" class="kalender-section content-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-push-8 mx-auto">
B
</div>
<div class="col-lg-8 col-lg-push-4 mx-auto">
A
</div>
</div>
</div>
</section>
But B is still shown on the left on a desktop view.
Any ideas on what I'm doing wrong, and how to fix this? Thank you in advance.
You are using col-lg-push on both div. Use col-lg-pull-4 on your second div "A"
So your new code is:
<section id="kalender" class="kalender-section content-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-push-8 mx-auto">
B
</div>
<div class="col-lg-8 col-lg-pull-4 mx-auto">
A
</div>
</div>
</div>
</section>
Working JSFiddle: https://jsfiddle.net/v5a7ommf/1/
Follow below code:
https://codepen.io/hardiksolanki/pen/GOKGOx
Desktop view: A | B
Mobile view:
B
A
This can also possible with out boo-trap.
.desktop-left{
background: red;
float: right;
}
.desktop-right{
background: green;
float: left;
}
#media only screen and (max-width:980px) {
.desktop-right, .desktop-left{
float: none;
}
}
Looking at other SO questions, I managed to get the left divs span the whole page, but not the right divs. How do I fix this problem?
HTML:
<div class="container-fluid">
<div class="row col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div id="kpop" class="selection">
</div>
<div id="fashion" class="selection">
</div>
</div>
<div class="row col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div id="martialarts" class="selection">
</div>
<div id="nature" class="selection">
</div>
</div>
</div>
CSS:
body .container-fluid {
padding-left: 0;
padding-right: 0;
}
.selection {
height: 50vh;
}
Here's a demo:
http://codepen.io/davegumba/pen/QNzpey
You didn't wrap your col classes in a row tag. Also you don't need to specify all the viewport sizes if they are all 6, for example. Col-xs-6 alone will apply to all sizes higher if you don't specify.
http://codepen.io/ruchiccio/pen/oxJWLQ
<div class="container-fluid">
<div class="row">
<div id="kpop" class="selection col-xs-6">
</div>
<!--kpop-->
<div id="fashion" class="col-xs-6 selection">
</div>
<!--fashion-->
</div>
<!--first column-->
<div class="row">
<div id="martialarts" class="col-xs-6 selection">
</div>
<!--martial arts-->
<div id="nature" class="selection col-xs-6"> </div>
<!--nature-->
</div>
<!--second column-->
</div>
<!--container-->
You should not use a twitter bootstrap's "row" in a col. Row class was ment and built to rows not columns. So it has a negative margin on each side. That's what is making your 50% return a lower value.
Get rid of the class row and it will be fixed. Or if you want to preserve it remove the negative margin on both sides of both columns
You can fix this by removing the "row" class from your columns, then removing the padding on the columns. The "row" class should be used as a container for the columns. Although I find that not even using it works fine at times, but it isn't proper. Also, like some others have said, you don't need to use multiple column sizes. You need to choose a size based on what you want your content to do at smaller viewport widths.
<div class="container-fluid">
<div class="col-xs-6">
<div id="kpop" class="selection">
</div>
<!--kpop-->
<div id="fashion" class="selection">
</div>
<!--fashion-->
</div>
<!--first column-->
<div class="col-xs-6">
<div id="martialarts" class="selection">
</div>
<!--martial arts-->
<div id="nature" class="selection">
</div>
<!--nature-->
</div>
<!--second column-->
</div>
<!--container-->
Styles:
.col-lg-6, col-md-6, col-sm-6, col-xs-5 {
margin: 0;
padding: 0;
}
The problem isn't with the code itself, it's with the structure of the HTML. In order to properly use Bootstrap, you need a row to wrap the columns. What you have right now is the rows and columns all in the same. Also, just as a side note, it's considered best practice to define starting at the smallest screen and work your way up to larger screens since the framework is mobile-first.
Here is how you could rewrite your code with the suggested changes:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div id="kpop" class="selection">
</div>
<div id="fashion" class="selection">
</div>
</div>
<!-- End col -->
<div class="col-xs-6">
<div id="martialarts" class="selection">
</div>
<div id="nature" class="selection">
</div>
</div>
<!-- End col -->
</div>
<!-- End row -->
</div>
<!-- End container-fluid -->
Another thing you should keep in mind is that since Bootstrap is mobile-first, you don't need to repeat column definitions, as they automatically ripple up. For example, you defined 6-block columns for xs, s, m, and l screens, but you only need to define it for xs since it will automatically apply to all larger screens (s, m, l) unless it gets overwritten.
Inspecting the code seems the problem is related to the fact you have the class row .row with margin-right and margin left = -15px;
set both to 0
.row {
margin-right: 0px;
margin-left: 0px;
}
I did this:
Basically, removed row class and added no-padding class to all column classes.
http://codepen.io/anon/pen/mPamEZ
<div class="container-fluid">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding">
<div id="kpop" class="selection">
</div>
<!--kpop-->
<div id="fashion" class="selection">
</div>
<!--fashion-->
</div>
<!--first column-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding">
<div id="martialarts" class="selection">
</div>
<!--martial arts-->
<div id="nature" class="selection">
</div>
<!--nature-->
</div>
<!--second column-->
</div>
<!--container-->
body .container-fluid {
padding-left: 0;
padding-right: 0;
background-color:#ccc
}
.selection {
height: 50vh;
}
#kpop {
background: #7BECED;
}
#fashion {
background: #FFB5A7;
}
#martialarts {
background: #F3BB72;
}
#nature {
background: #B1DC76;
}
.no-padding{ padding-left: 0;
padding-right: 0;}
You can simply reset your margin and padding in .col-xs-6 to 0. Also, I dixed your markup - .row class should wrap .col-s classes. Take a look to Bootstrap documentation of grid system.
Here it is.
body .container-fluid {
padding-left: 0;
padding-right: 0;
}
.full-width {
margin: 0;
padding: 0;
}
.selection {
height: 50vh;
}
#kpop {
background: #7BECED;
}
#fashion {
background: #FFB5A7;
}
#martialarts {
background: #F3BB72;
}
#nature {
background: #B1DC76;
}
<div class="container-fluid">
<div class="row">
<div class="full-width col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div id="kpop" class="selection">
</div>
<!--kpop-->
<div id="fashion" class="selection">
</div>
<!--fashion-->
</div>
<!--first column-->
<div class="full-width col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div id="martialarts" class="selection">
</div>
<!--martial arts-->
<div id="nature" class="selection">
</div>
<!--nature-->
</div>
<!--second column-->
</div>
</div>
<!--container-->
Be careful, this changes can touch other divs in your page.
P.S It's better to create new class, for example full-width and give to it same rules. This will not broke your page. JSFiddle.
I have two groups, A & B. On mobile view, A sidebar will stack on top of A content. Likewise for group B. However, I'm encountering two issues w/ my two column Bootstrap layout.
Issue #1
On mobile view, Content A get's stuck behind Sidebar B. I've tried adding float classes and clearing the floats, z-index, positioning, etc., and I'm just unable to get them to stack A,B,A,B =/
Issue #2
...is that I do want the max-height to be 100%, but what I'm getting is 100% height just for group A. What methods could I use to get both groups A & B to fit (together) 100% on the page?
My code is as follows; I appreciate any and all help! Thanks a ton.
HTML
<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4 a">
Sidebar content A
</div>
<div class="col-sm-8">
Body content A
</div>
</div> <!-- end row -->
</div> <!-- end col-sm-12 -->
</div> <!-- end container-fluid -->
<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4 b">
Sidebar content B
</div>
<div class="col-sm-8">
Body content B
</div>
</div> <!-- end row -->
</div> <!-- end col-sm-12 -->
</div> <!-- end container-fluid -->
CSS
html,body,.col-sm-12,.container-fluid, .row {
height:100%;
}
.row > div {
height:100%;
}
.a, .b {
background-color:#e5e5e5;
}
JSFiddle
Please let me know what I'm missing.
You could just add
col-xs-12
to your divs to stop the weird overlap- so your html would read
<div class="col-sm-4 col-xs-12 a">
Sidebar content A
</div>
<div class="col-sm-8 col-xs-12">
Body content A
</div>
Regarding the height issue you can apply a new class to your rows and update your css as follows:
html,
body {
height: 100%;
}
.container-fluid {
height: 50%;
}
.col-sm-12,
.fullheight {
height: 100%;
}
.a,
.b {
background-color: #e5e5e5;
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="col-sm-12">
<div class="row fullheight">
<div class="col-sm-4 col-xs-12 fullheight a">Sidebar content A</div>
<div class="col-sm-8 col-xs-12 fullheight">Body content A</div>
</div>
<!-- end row -->
</div>
<!-- end col-sm-12 -->
</div>
<!-- end container-fluid -->
<div class="container-fluid">
<div class="col-sm-12">
<div class="row fullheight">
<div class="col-sm-4 col-xs-12 fullheight b">Sidebar content B</div>
<div class="col-sm-8 col-xs-12 fullheight">Body content B</div>
</div>
<!-- end row -->
</div>
<!-- end col-sm-12 -->
</div>
<!-- end container-fluid -->