New to Bootstrap and trying to figure out something simple:
For tablet and desktop viewports, I want a fixed-width table to be used as a calendar: no relative sizing (percentages), just fixed width and heights.
For mobile, all the 'cells' in this table should stack. So far I have the basic bootstrap setup:
<div class="container-fluid">
<div class="row">
<div class="col-xs-1">Sunday</div>
<div class="col-xs-1">Monday</div>
<div class="col-xs-1">Tuesday</div>
<div class="col-xs-1">Wednesday</div>
<div class="col-xs-1">Thursday</div>
<div class="col-xs-1">Friday</div>
<div class="col-xs-1">Saturday</div>
</div>
...
Questions/Problems:
1) This only stacks if I use "col-sm-1", but then that stacks too 'soon' on a desktop browser; I'd rather use xs but I'm not sure how to make that stack.
2) Is there any canonical way to make the 'cells' fixed-width and height without breaking the bootstrap model?
Related
In my bootstrap web page i have a left sidebar and besides it i have the page content. The HTML code is:
<div class="col-sm-3">Sidebar</div>
<div class="col-sm-9">Content</div>
I like the view for laptops and bigger screens but on screens <768 px wide (tablets and smartphones). The divs slack and the sidebar comes on top of content div.
I know this is a bootstrap feature but i want it to slack another way- i want the content to be at top of sidebar on screens <768 px wide.
You can view this thing on the jQuery page. Opening the page on smaller browser view will show what i mean.
Can this be done in bootstrap? I definitely want to the design to remain same for laptop and bigger screen.
And i don't want to apply any custom media query for this. Can bootstrap provides a solution for things like this? Please help. thanks
Push and Pull solution
If you can reorder the divs in your html you can utilize the push and pull from bootstrap.
<div class="col-sm-9 col-sm-push-3">Content</div>
<div class="col-sm-3 col-sm-pull-9">Sidebar</div>
Update Bootstrap V4 Alpha
Change the order of your grid columns using the push-md-* and the pull-md-* modifier classes.
Example
<div class="row">
<div class="col-md-9 push-md-3">Right Content</div>
<div class="col-md-3 pull-md-9">Left Sidebar</div>
</div>
You can use direction: rtl; on you container, and direction: ltr; on your columns, with the appropriate media queries.
HTML:
<div class="row-rtl">
<div class="col-ltr">Main</div>
<div class="col-ltr">Sidebar</div>
</div>
CSS:
.row-rtl {
direction: rtl;
}
.col-ltr {
direction: ltr;
}
I solved it using the col-md-push-*, i also changed the order of my columns first then applied the push. This is the final code.
<div class="col-sm-9 col-sm-push-3">Content</div>
<div class="col-sm-3 col-sm-pull-9">Sidebar</div>
What is is doing with push and pull is that when the screen size is greater than sm meaning in md-* and lg-* then is is pushing the content div and pulling the sidebar - meaning for screen size ≥992px sidebar div comes first then comes the content div.
For in sm screen size (<768px) it behaves normally based on what the order is specified in the html.
I'm making a responsive web page using bootstrap. It works as intended when the browser window is >= 50% of the screen size. I have some column elements nested inside of a column element, which is nested inside a row element. So, there are 3 children columns of each row, and then 4 children columns for each column. The problem may be occurring because I have a column nested inside of a column, but if that were the case then wouldn't it display incorrectly when the browser is full screen, too?
When the window shrinks to less than 50% of the screen size, the most nested columns display as rows. I don't understand why this is happening.
<div class="row foo" ng-repeat="foo in fooCtrl.foos">
<h4>{{foo.name}}</h4>
<div class="col-md-4 fuzz">
<h5>{{foo.type[0].fuzz}}</h5>
<!-- START BAR DISPLAY -->
<div class="col-md-3 bar" ng-repeat="bar in barCtrl.bars">
<h6>{{bar.name}}</h6>
</div>
<!-- END BAR DISPLAY -->
</div>
<!-- More columns -->
</div>
In simpler terms, the bars aren't being displayed as columns when the window size is < 50% of the screen.
The col-md-* bootstrap classes only apply at a media query breakpoint where the window width is greater than or equal to 992px. As others have stated, you will need to use col-xs-* as that is the default class used.
You can read more here: http://getbootstrap.com/css/#grid. As a best practice, you would typically wrap the maximum number of columns that could constitute a row in a div with the class row; however, that may not be your specific problem in this case. In most cases this is the set of elements with the lowest number (n) (col-*-n) that add up to 12 if you are using the default grid settings.
Some examples using your .bar classed elements:
4 columns of .bar elements on all devices:
<div class="col-xs-3 col-md-3 bar">
3 columns of .bar elements on extra small devices up to medium devices (992px in width) at which point 4 columns will display:
<div class="col-xs-4 col-md-3 bar">
2 columns of .bar elements up to medium devices, then 4 columns per row:
<div class="col-xs-6 col-md-3 bar">
And finally 1 .bar element per row up to medium devices, then 4 columns per row:
<div class="col-xs-12 col-md-3 bar">
You need to have a div within the larger column with class row. Then you need to know that if you are going to subdivide the larger columns, the way bootstrap works is that you would have up to 12 subdivisions, but with a smaller col, something like col-sm-12. But I am not too sure on all this. I have read and reread those bootstrap grid descriptions, and I am still trying to make sense of them.
<div class="row">
<div class="col-md-4>
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div class="col-md-4>
</div>
<div class="col-md-4>
</div>
</div>
You've set the size only for md. You haven't set xs/sm/lg.
The default breakpoints for bootstrap are 768px, 992px and 1200px.
I suppose you have a HD Monitor the md-breakpoint is about half the screensize and the view will swith to sm ignoring col-md-x and using col-sm-x
Note: If nothing else set also set col-xs-12 to prevent weird behavior
I'm wondering what the best way is to accomplish the below responsive design using Bootstrap 3. I have only been able to get it to look somewhat like my goal, which is the following:
REGULAR-SIZED MONITOR GOAL:
MOBILE DEVICE GOAL:
What I have tried so far: Here is the best I can do to accomplish the above.
HTML:
CSS:
300px is just going off of what looks decent on my screen, but I would prefer the responsive design to control the page shrinking and growing rather than this number. What would work perfectly is to simply use text-align:left and text-align:right, but the problem with that is when the responsive design kicks in, the mobile device still has them on the left and right side instead of both of them on the left side. I want them both on the left side stacked on top of each other. My code works above, but I am pretty sure there is a better way. Thanks for your help.
first and foremost bootstrap has an offset kind of thing where instead of creating the space, or the pads_to_right you can just call a class in the grid system. offset sets the responsive margin with left element. Your code should look like this:
<div class="container">
<div class="row"><!--rows help in the order of the div and positioning-->
<div class="col-md-4">left text</div>
<div class="col-md-4 col-md-offset-4">right text</div>
</div>
</div>
the grid system has md for medium, lg for Large, xs for extra-small and sm for small. All these are breakpoints for screen sizes so setting your code to column of md-4 sets your div to a specific dimension on the medium size screen. So if you want to set something like that for mobile you have to also use col-xs-dimension(1-12). The numbers that follow the screen size have to sum up to 12 . Read more about the grid system here.
<div class="container">
<div class="row"><!--rows help in the order of the div and positioning-->
<div class="col-md-4 col-xs-12">left text</div>
<div class="col-md-4 col-md-offset-4 col-xs-12">right text</div>
</div>
</div>
So here i set the xs to 12 so it occupies the whole space and pushes the next div to the next line.
Im a new user to bootstrap and trying to use the grid system for my needs.
I find it very annoying that sometimes the column width is too long, and the spacing between the columns (as a result of the 12 columns grid system) is too much.
Since the page is responsive it makes it even harder to find a workaround.
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">A</div>
<div class="col-xs-1"><img src="..." class="img-responsive" /></div>
<div class="col-xs-9">C</div>
</div>
</div>
I am mocking out a site in bootstrap 3.1, and I think I am doing something wrong. The following html, I am under the impression that col-xs-2 (with: some content) should fall to the bottom of the screen under col-xs-8, How ever the actual case is that col-xs-2 shrinks as much as possible and then col-xs-8 sits on top of it.`
<div class="row">
<div class="col-xs-2"> some content </div>
<div class="col-xs-8"> Main Content </div>
<div class="col-xs-2"></div>
</div>
Use col-md-8+col-md-2 or col-lg-8+col-lg-2 for the desired effect.
Actually col-xs-# is a class which maintains the layout in smaller screens too. For the grid layout to work as desired, col-lg-# or col-md-# is used.
Here's the table from the website of Bootstrap that depicts the grid systems:
Read more about the grid system here.