I'm just starting on bootstrap and trying to understand how the grid works exactly
HTML:
<div class="row">
<div class="leftContainer col-md-6">
A
</div>
<div class="rightContainer col-md-6">
B
</div>
</div>
CSS:
.leftcontainer{
float:left;
}
.rightcontainer{
float:right;
}
I don't want scroll bar at the bottom on the mobile devices. My output is of this format on mobile
A
B
Instead I want
A
B
but A B on desktop
Any help is much appreciated. Thanks!
<div class="row">
<div class="leftContainer col-xs-12 col-md-6">
A
</div>
<div class="rightContainer col-xs-12 col-md-6">
B
</div>
</div>
and remove your CSS. You don't need to add the floats to any of this.
Also, please read up on the grid system in the Bootstrap documentation. It has whatever you need. http://getbootstrap.com/css/#grid
Related
Hey guys I am trying to create a 50:50 ration on my split screen layout.Text on one side and picture on the other I was able to get this far.
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<div class="clearfix"></div>
<h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
<p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img" src="assets/img/prg.jpg">
</div>
</div>
</div>
CSS
.img {
width: auto;
height: 250px;
}
Try using Bootstrap's grid system. Here's some example HTML you could use:
<div class="row">
<div class="col-md-6">
<h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
<p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
</div>
<div class="col-md-6">put your images in this section<img class="img" src="assets/img/prg.jpg"></div>
</div>
This will put the text section on the left side of the page and the responsive image on the right. If the page is collapsed so it can't fit both horizontally they will stack. You can change this if you like. For more information see Bootstrap's guide on the Grid System. http://getbootstrap.com/css/#grid
What you should use is col-xs-6 instead of col-sm-6 because col-sm-x is used for screens with min-width: 768px or higher.
You may be seeing it showing at the bottom because your using sm instead of xs and the screen resolution is below 768px.
I have some html content that I want to align and distribute as two columns beneath each other, of equal content.
But on mobile divices, I'd like the content to be stacked as one column.
How could I achieve this using bootstrap css?
I tried as follows, which did not work:
<div class="row">
<div class="col-lg-2">
//the content to distribute
</div>
</div>
Additionally, I cannot use css columns as I have to support IE8+9.
<div class="row">
<div class="col-xs-12 col-sm-6">
//first half
</div>
<div class="col-xs-12 col-sm-6">
//second half
</div>
</div>
The col-xs-12 tell the column to be at full screen when using mobile phones (or small screens).
The col-sm-6 tell the column to be at half size of the row when using any higher size devices.
I suggest reading bootstrap docs
----Edit----
If you want to use columns css- also for ie8,9 you can check this js plug in:
http://welcome.totheinter.net/columnizer-jquery-plugin/
hi you can use this i think please take a look
.tt{
border : 2px solid grey;
}
<div class="container">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 tt">
first half
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 tt">
second half
</div>
</div>
</div>
and here is the working demo code..
Demo code
Using Twitter Bootstrap 3, I have two colummns, one with an image and the other has text. I'm trying to place the two side by side for desktop view, but then for smaller screens (mobile,tablet) the text has to fall beneath the image. I have tried various float and positions css but unsuccessful.
Code:
<div class="row">
<h2>History</h2>
<div class="col-md-6">
<img class="img-rounded" src="img/fldry-ban.png"/>
</div>
<div class="col-md-6">
<p> text </p>
</div>
</div>
</div>
If anyone has the time to provide some details of what CSS i should be using, I would be greatly appreciated. :-)
By now you're just telling the browser: "Hey, if I am on a medium screen device (col-md-6) let's take 6 out of 12 blocks for displaying!"
You need to add the class for the mobile view too:
<div class="col-md-6 col-sm-12">
So now, the mobile browser also knows, that he should use the full 12 blocks to display.
For further information about how to use the grid system of bootstrap take a look at this.
try this
<img class="img-rounded" src="img/fldry-ban.png" style="width:100%;"/>
//or might be possible
<style>
.custom > img{
width:100%;
}
</style>
<div class="row">
<h2>History</h2>
<div class="col-md-6 col-sm-6 col-lg-6 custom">
<img class="img-rounded" src="img/fldry-ban.png"/>
</div>
<div class="col-md-6 col-sm-6 col-lg-6">
<p> text </p>
</div>
</div>
I am new to the bootstrap grid system, and I want to reorder the <div> regions for mobiles.
This is the layout I have for the desktop view:
And this is what I want for mobile phones:
My current HTML code:
<div class="col-md-3">
<div id="A"> A </div>
<div id="B"> B </div>
</div>
<div class="col-md-9">
C
</div>
Currently, if I view the page on a mobile phone the order is A->B->C because A & B are both inside the first column. But I don't know how to achieve the A->C->B order. So how do I do this?
This probably isn't the most elegant way to go about it, but you could just hide element B when switching to mobile and show a different element B with the same content that's below element C in the dom by using bootstrap's "hidden-xs" and "visible-xs" classes. Something like this...
<div class="row">
<div class="col-md-3 col-xs-12">
<div id="A"> A </div>
<div id="B" class="hidden-xs"> B </div>
</div>
<div class="col-md-9 col-xs-12">
C
</div>
<div id="B" class="col-xs-12 visible-xs"> B </div>
</div>
I'd also recommend referring to the the official bootstrap documentation for more info
The md in col-md-9 stands for medum devices, which means all devices with a screen resulution up to 992px.
Here you will find a table with col-xs, col-sm. col-md and col-lg resultions.
You can use them to define col-xs-12 to your elements. This will tell the browser that on devices which apply to the xs definition the column takes all the 12 grid parts. You can apply several rules like for example:
<div class="col-xs-12 col-md-6">foo</div>
This means the element is 12 on xs and 6 on md devices.
I have a Bootstrap Page like this:
<div class="row">
<div class="col-md-6">
A
</div>
<div class="col-md-6">
B
</div>
</div>
Looks like:
-----
|A|B|
-----
So if I look at it on a mobile Device, the Column A is on top, but I want the B on top.
Is this possible?
I tried it with push an pull, but it didn't work.
Use Column ordering to accomplish this.
col-md-push-6 will "push" the column to the right 6 and col-md-pull-6 will "pull" the column to the left on "md" or greater view-ports. On any smaller view-ports the columns will be in normal order again.
I think what throws people off, is that you have to put B above A in your HTML. There may be a different way to do this where A can go above B in the HTML, but I'm not sure how to do it...
DEMO
<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>
view-port >= md
|A|B|
view-port < md
|B|
|A|
It's worth noting that if you are using columns that are not both equal to 6, then the push amount will not equal the initial column size.
If you have 2 columns (A & B) and wish for column A to be smaller and to the right on "sm" or greater viewports, but atop a mobile (xs) viewport, you would use the following:
<div class="row">
<div class="col-sm-4 col-sm-push-8">A</div>
<div class="col-sm-8 col-sm-pull-4">B</div>
</div>
Otherwise, the alignment of the columns will appear off.
Flexbox Direction
For Bootstrap 4, apply one of the following to your .row div:
.flex-row-reverse
For responsive settings:
.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse
In Bootstrap 4, let's say you want to have one order for large screens and a different order for smaller screens:
<div class="container">
<div class="row">
<div class="col-6 order-1 order-lg-2">
This column will be ordered second on large to extra large screens
</div>
<div class="col-6 order-2 order-lg-1">
This column will be ordered first on large to extra large screens
</div>
</div>
</div>
You can omit order-1 and order-2 above. Just added for clarity. Default order will be the order the columns appear in the html.
For more info https://getbootstrap.com/docs/4.1/layout/grid/#reordering
The below code work for me
.row {
display: flex;
flex-direction: column-reverse;
}
This is now done (in Bootstrap v4) by adding order-# classes.
See https://getbootstrap.com/docs/4.1/migration/#grid-system-1
Like this:
<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>
I have three bootstrap 4 columns of different sizes. As the screen gets smaller the third column is hidden, then when the screen gets smaller still and the divs are stacked the order changes so that column 2 is at the top.
<div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
<h3>LEFT HAND SECTION</h3>
<p>For news, links photos or comments.</p>
</div>
<div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
<h3>MAIN SECTION</h3>
<p>The main content for the page.</p>
</div>
<div class="col-xs-12 col-md-4 d-none d-md-block order-last">
<h3>BLANK SECTION</h3>
<p>Will usually just be blank.</p>
</div>
I hope this helps. I found it difficult to understand this but finally got there with the help of this thread, but it was a bit hit and miss.
I used:
.row {
display: flex;
flex-direction: row-reverse;
}
This worked for me on Bootstrap 4:
<div class="container-fluid">
<div class="row">
<div class="col-md-4 order-md-last">
<%= render 'form'%>
</div>
<div class="col-md-8 order-md-first">
CONTENT
</div>
</div>
</div>
Bootstrap 4 includes classes for flex.
See: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/
<div class="row flex-column-reverse flex-md-row">
<div class="col-sm-10">
Col 1
</div>
<div class="col-sm-2">
Col 2
</div>
</div>
In Bootstrap V4 (Released January 18, 2018) You can use Reordering Classes. Info here under Reordering tab.
https://getbootstrap.com/docs/4.0/layout/grid/