Here is what I wanted to do in wide screen:
, where buttons are right side and located in one line.
Those are supposed to located in small screen like this:
, where button are separated in each rows
I think that I could implement this with bootstrap grid system, but kinda hard to implement this.
Here is what I tried:
<div class="row">
<div class="col-sm-offset-8 col-sm-2">
주문 취소
</div>
<div class="col-sm-offset-10 col-sm-2">
주문 수정
</div>
</div>
But doesn't work. Need helps. Thanks.
I don't understand what you want, but I guessed what you want.
Do you want to show like this?
You can see here
an example
you need to add change col-sm-2 class to col-sm-12 (will extend on small screen)
and add class col-lg-2
also set offset to lg screen
<div class="row">
<div class="col-lg-offset-8 col-sm-12 col-lg-2">
주문 취소
</div>
<div class="col-sm-12 col-lg-2">
주문 수정
</div>
</div>
Related
I am using the bootstrap to draw my page. I want to put the 'Title' not started with the line. But the col-md-offset-4 does not work.
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Beyond forever</h1>
<h2 class="text-center"><em>My favorite band</em></h2>
<div class="thumbnail text-center"><img src="http://res.cloudinary.com/deqlvmd9w/image/upload/v1494666517/beyond_ihkzoj.jpg"/>
</div>
</div>
<div class="col-md-8 col-md-offset-4">
<h3>Title</h3>
</div>
</div>
Here's the link https://jsfiddle.net/heshijinghuang/opsv0e09/
Thanks for all your reply. The issue has been solved. It is because boostrap 4 using different offset style(offset-sm-2）In bootstrap 3, it's col-offset-sm-2.
It works :) Try to resize JSFiddle result tab. It's size is just to small to be md size. If you want to achieve the same result on small screens, use sm or xs classes, like col-sm-8 col-sm-offset-4 or col-xs-8 col-xs-offset-4.
col-md-offset-4 "does not work" in your jsfiddle because the jsfiddle view area is very small, which makes -md- not work any more.
To make it work in jsfiddle, you need to change it to col-sm-offset-4, and expand the view area a bit.
BTW, If the header need to be centered via col-*-offset-*, I think it is better to use col-sm-offset-2 for your case.
I've made a new jsfiddle. Please check (need to resize the result panel and increase its width).
you are styling medium size screen md, while JSfiddle html renderer falls in small size sm
change your col-md-8 col-md-offset-4 to col-sm-8 col-sm-offset-4 and it will work
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
I have four columns using the Bootstrap column classes
<div class="col-md-3">
#include('schedulizer.classes-panel')
#include('schedulizer.time-span-options-panel')
#include('schedulizer.other-options-panel')
</div>
<div class="col-md-9 col-centered">
#include('schedulizer.schedule-panel')
</div>
They look like this:
In mobile view, the schedule, the main element, is pushed all the way to the bottom like this:
Is there any way to "push" the column to the top when a smaller screen resolution is detected?
Yes. Just rearrange them and use push and pull
<div class="col-md-9 col-centered col-md-push-3">
#include('schedulizer.schedule-panel')
</div>
<div class="col-md-3 col-md-pull-9">
#include('schedulizer.classes-panel')
#include('schedulizer.time-span-options-panel')
#include('schedulizer.other-options-panel')
</div>
demo: http://www.bootply.com/GdWNOo6stu
I have three divs that i need to position based on screensize. Im using bootstrap's grid system on my page, but i have encountered a small issue with the placement
Can anyone help me accomplish this?
Thanks in advance!
PS: let me know if any more details are needed.
Here is the code:
<div class="row">
<div id="div1" class="col-xs-6 col-sm-12 col-md-8"><h2>Some header text here DIV1</h2></div>
<div id="div2" class="col-xs-3 col-sm-6 col-md-2"><span>Some span here DIV2</span></div>
<div id="div3" class="col-xs-3 col-sm-6 col-md-2"><span>Some other span here DIV3</span></div></div>
The fiddle:
Fiddle
And an image of how i want it to work:
To get the layout and order you want, you'll need to use nesting along with push pull like this..
<div class="row">
<div class="col-md-6 col-md-push-6 col-xs-12">
<div class="row">
<div id="div2" class="col-xs-7">div2</div>
<div id="div3" class="col-xs-5">div3</div>
</div>
</div>
<div id="div1" class="col-md-6 col-md-pull-6 col-xs-12">div1</div>
</div>
I used col units col-7 and col-5 for div's 2 and 3 (based on your picture) but you may need to change those to the actual units you want for those columns.
Demo: http://bootply.com/jFfCKhkuR3
You need to use column ordering, see the bootstrap docs here
Using col-xs-push-12 in div1 and pull consequently the other two divs.
Here you have a small snippet showing the effect of the col push and pull
I have html markup like below,
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
Some contents
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-12" >
Some Content
</div>
<div class="col-lg-5 col-md-5 col-sm-4 col-xs-12" >
Some Content
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 text-right" >
<div class="company-add-btn">+ Add more companies</div>
</div>
</div>
In large display's it works fine as single row structuring four divs in columns.
But in small displays I like to re-arrange the layout,
First div will get a complete row with full width
Third div will come before 2nd div and take a complete row with center aligned
2nd and 4th div will take a complete row with 2nd row stays at left, and 4th floated right.
Using bootstrap col-md-pull-* or col-md-push-* will just do the reordering inside a row. So that will not work.
One possible solution will be duplicating the markup for each media break points, but Isn't there any better approach then this ?
Can anyone suggest any way ? or point me a good place to start looking for solution ?
I recommend (even though it's dirty) adding your view twice, once in a
<div class="hidden-lg hidden-md hidden-sm">Your content for the XS-grid.</div>
and for the other 'layout
<div class="hidden-xs">Your content for everything but XS-grid.</div>
Hope that helps (looking forward to a better solution ;)).
what you are talking is placing third column before second column and assign it the complete width, bootstrap will not do this.
This can be done only if these columns are to be shown as a single row with pull-let and pull-right. The only option you have is to duplicate the markup in this case, or write down your own css for placing third column before the second one(but this would be not a good idea).
You could hide the second div on small screens; the third div would then be in second position. You would then have to duplicate just the second div after the third and show on small screens only, then do the pull-left and right on the last two divs. Something similar this might work (this example is for small):
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
Some contents 1
</div>
<div class="col-lg-1 col-md-1 hidden-sm col-xs-12" >
Some Content 2
</div>
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12" >
Some Content 3
</div>
<div class="visible-sm col-sm-9 lefty" >
Some Content 2 - duplicate
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 righty" >
<div class="company-add-btn">+ Add more companies</div>
</div>
</div>
The use of col-xs-12 is really unnecessary in this case, and in most cases, the column will be 100% below the last col class used.
DEMO: https://jsbin.com/nuhoba
It would be better if you had a graphic to describe what you want. If I followed correctly, then you would order your html in the order it is on a small viewport then -- if the column is in the same .row and the .row is no more than 12 columns, you can push and pull left and right. You have to add up to 12 columns per row at any given column class, I've used col-sm-X for simplicity. If you play around with col-md and/or large that means that you have to use those columns on the others but it need to add to 12 at that min-width.
HTML:
<div class="container">
<div class="row">
<div class="col-sm-3">
A
</div>
<div class="col-sm-4 col-sm-push-2 text-center-xs">
C
</div>
<div class="col-sm-2 col-sm-pull-4">
B
</div>
<div class="col-sm-3 text-right">
<div class="company-add-btn">+ D</div>
</div>
</div>
</div>
CSS
#media (max-width:767px) {
.text-center-xs {text-align:center;}
}