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
Related
guys. I have a little problem here working with bootstrap. I am trying to make a div container with a row containing 3 columns equally proportioned in width :
<div class="row">
<div class="col-md-4" style="background:red;">logo</div>
<div class="col-md-4" style="background:blue;">content</div>
<div class="col-md-4" style="background:yellow;">content+imgs</div>
</div>
</div>
The problem I have is that I want the column with 'logo' to be the second one (after 'content') on xs/sm devices or at resizing the browser window. I tried with push and pull, but I want the columns to be one above each other, not inline, as at the md devices. I have no clue how to do that, any help? :)
Using order classes with bootstrap, you can change the order of the columns responsively.
This example will put the second column first on XS and SM screens.
<!--bootstrap 4-->
<div class="row">
<div class="col-md-4 order-2 order-md-1">first</div>
<div class="col-md-4 order-1 order-md-2">second</div>
<div class="col-md-4 order-3 order-md-3">third</div>
</div>
edit:
For bootstrap 3 (3.3.7) you will need to use push & pull classes. In your case, you would have to make the logo the second column. Mobile counts as the starting point in bootstrap development.
<!-- bootstrap 3 -->
<div class="row">
<div class="col-md-4 col-md-push-4" style="background-color:red;">content</div>
<div class="col-md-4 col-md-pull-4" style="background-color:blue;">logo</div>
<div class="col-md-4" style="background-color:yellow;">content+imgs</div>
</div>
I am a complete beginner and I am learning Bootstrap. I want to know how to determine which column system I need to use in my website. Suppose I have a row with 3 columns. Now I have 3 options.
Option 1:
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
Option 2:
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
</div>
Option 3:
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
Now my question is, As I want my website to be responsive which class I need to apply. I want my website to render properly irrespective of device selected. I understood that they are meant for different devices. Does that mean, I need to write 3 different css style code (I doubt it). So, what shall I put in my code?
P.S: I saw this link SO LINK and I understood it. But still I am confused, what to put in my code? Shall I put sm,lg or md?
These define the width of the screen at which the layout will collapse. For example, in .col-md-, the layout will be horizontal until the screen width is less than 970px, at this point, the layout will collapse. However, if you use .col-lg-, the layout will be horizontal until the screen width is less than 1170px, then it will collapse.
Bootstrap has 4 breakpoints, .col-xs-, .col-sm-, .col-md- and .col-lg-. You should use these depending on the content of the div. The best way to become familiar is to play around with each one and notice that the layout collapses at different points for each one when you decrease the width of your window. So to answer the question, you should choose whichever one collapses correctly for the content of your div. Hope this helps.
For a more detailed guide on the bootstrap grid system, take at look at this: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
I found it helpful to get a good understanding.
I generally use col-md prefix, so I guess your first option would work quite fine: col-md-4.
To add to the other suggestions you've received, remember that you can apply multiple Bootstrap column classes to the same div.
For example say you wanted 3 equal width columns on a wide viewport. Then as the viewport narrows this changes to one full width header with two equal width columns below, and on smartphones all three divs are stacked vertically, then you might use something like
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">column1
</div>
<div class="col-lg-4 col-md-6">colmun2
</div>
<div class="col-lg-4 col-md-6">column3
</div>
</div>
</div>
See this live https://codepen.io/panchroma/pen/EwVwpw
Or you might want to change the relative widths of your 3 columns at different viewports
<div class="row">
<div class="col-lg-6 col-md-4">
</div>
<div class="col-lg-3 col-md-4">
</div>
<div class="col-lg-3 col-md-4">
</div>
</div>
Or you might want to hide one of the columns at narrower viewports
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4 hidden-sm hidden-xs">
</div>
</div>
The important thing is that you can mix and match your classes to achieve the responsive behaviour that you need.
Once you get the hang of the grid sizing options you might also want to check out how to reorder columns. What often happens is that you need to have a different column order on desktop and mobile, and there will probably be times when you want to offset columns as well.
Good luck!
Im making my website responsive for devices but i want to know if i can set a grid or margin/padding property for iphone so i can place it nicely and not 2 paragraphs in eachother.
I already tried to grid some text but it still looks weird in eachother this is my code:
<div class="row">
<div class="col-xs-1 col-lg-12">
Thisismy Test
</div>
</div>
You haven't tagged this as being a Bootstrap grid, but I'm assuming it is because of your grid classes.
You mention that you want to stop the navbar-brand text from wrapping on an iPhone so I'm wondering if there's there a reason why you wouldn't make the navbar-brand parent wider?
It looks to me as if it would need to be minimum col-xs-5
Here's a example showing both your existing HTML and the modification
https://codepen.io/panchroma/pen/OgQxBw
HTML
<div class="row">
<div class="col-xs-5 col-lg-12">
Thisismy Test
</div>
</div>
If you want to show the paragraph in entire row in mobile , use col-xs-12 class which will occupy the entire row space and display everything in one row in all th escreen sizes.
<div class="row">
<div class="col-xs-12">
Thisismy Test
</div>
</div>
If you want to display 2 paragraphs in row side by side use col-xs-6 for each div
<div class="row">
<div class="col-xs-6 col-lg-12">
Thisismy Test
</div>
<div class="col-xs-6 col-lg-12">
Thisismy Test
</div>
</div>
If you want to write your own CSS , you can do that by using media queries to define custom CSS for different screen sizes https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
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>
I have a section that reads left to right in bootstrap step up. What I am trying to do is get the right section to appear ontop of the left one in mobile view. I attempted using the push/pull methods but they seem to just push my content off the page.
Here is what I have
<div class="row process-page wow animated fadeInRightBig animation-delay-2"><!-- Create row col-6 -->
<div class="col-xs-push-12 col-md-6 col-sm-6">
<h3 class="title margin-b-30">Title</h3>
<p>Content</p>
</div> <!-- end col-6 -->
<div class="col-xs-pull-12 col-md-6 col-sm-6 clipB" >
<h3 class="title margin-b-30 margin-l-30"></h3>
</div>
</div> <!-- end Row -->
So it looks fine in large/medium, however mobile I cannot seem to get them to switch places (top to bottom)
Here is what I Mean
Desktop :
[A][B]
to mobile
[B]
[A]
I thought the push/pull would do the trick if i pushed the top one 12 and pulled the bottom one 12, but all it does it push them both off the screen.
You are using push and pull in the wrong way, you need to use that for the sm view. Try this:
First change the order in HTML and then use right the push and pull
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6">
<p>B</p>
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6" >
<p>A</p>
</div>
</div>
Check this Demo
Just push-12 means offsetting by that amount. Use pull-left and pull-right instead.