In my website, I have a box that's not sizing like I want.
<div class=" col-md-12">...</div>
I get too few padding than I want while the windows is monitor-screens.
The padding's fine when in phone-screens.
<div class=" col-md-10 col-md-offset-1">...</div>
It's fine padding in monitor-screens but too small with the phone-screens.
Why is this happening?
And how can I make it work on both?
Have you even read the documentation of Bootstrap?
http://getbootstrap.com/css/#grid
Bootstrap is designed for this, however, you need to tell your classes it. MD stands for medium device ... you also have sm which is the phone. So if you want 10 colums on a phone, make your class as followed.
<div class="col-md-12 col-sm-10 col-sm-offset-1">...</div>
if this isn't getting you there (the sm range is between 991 pixels till 768px), use the XS class.
<div class="col-md-12 col-xs-10 col-xs-offset-1">...</div>
That influences the devices with a resolution of 767 pixels or less.
So to come back to your question: are they combineable? Yes, they are
The combination sets you can make you can make up from 1 class to.. i dont know how many, because bootstrap will select the class it needs depending on the size of the screen. So you can add also classes to it how it should behave on large screens (col-lg) to supersmall (col-xs). I refer you further to the documentation with examples on the bootstrap website.
Happy HTML'ing!
.col-md-12 with no other classes is full width at all viewport sizes. To make the padding and margin work correctly, you need a .row around it so that the padding of the column class is adjusted by the surrounding .row (with negative L and R margin) and then outside of that you need either the .container or .container-fluid class to prevent the horizontal scrollbars.
HOWEVER, if this "Big Rectangle" is full width all the time, as it is with .col-md-12, you absolutely do not need to use any grid classes. If you want it contained within the max-width of your .container, put it directly inside the .container without surrounding grid classes, or you can put it in a .container-fluid to just get the left and right 15px (default padding) or put it inside nothing (leave it all by itself) and it will hit the edges of your viewport without any padding/gutter.
If you don't use any grid classes you can make your rectangle a percentage width with max-width (if you desire) and put the class .center-block
Related
Fairly new to Bootstrap, attempting to convert an existing page into bootstrap tags.
My question relates to grids. On this page http://blog.codeply.com/2016/04/06/how-the-bootstrap-grid-really-works/ it says that you only need to use the class for the smallest device width you want to support.
So, if I want to support mobile devices, tablets, medium sized screen and large screens, I only need to type col-sm-xx?
If I set a div to
<div class="col-sm-6">...</div>
I understand that this will take up half the screen size, but will it do the same when col-md-xx and col-lg-xx breakpoint is hit?
And if so why bother having those md and lg classes?
The element with col-6 class will take a half of screen, it doesn't matter, on mobile or on desktop: on every screen. And Bootstrap provides custom breakpoints, so you can write the class like col-sm-6, and this rule will be applied only for small devices. Look at the custom Bootstrap's breakpoints and resolutions:
This option was created to allow developers to change their grid in every breakpoint.
The answer is yes. But, additionally, you'd use md or lg breakpoints depending on how you want to show the grid. Example, let say you have 3 columns that is big enough to be seen on both the tablet (maybe iPad) and desktop Like three photos. But then it wouldn't make sense to show three columns on mobile phone, which should adjust 1 photo on a column. So you'd tell Bootstrap to to show a grid col-md-4 on each photo but col-sm-12.
<div class="row">
<div class="col-xs-12 col-md-4">photo here</div>
<div class="col-xs-12 col-md-4">photo here</div>
<div class="col-xs-12 col-md-4">photo here</div>
</div>
I will answer your question based on your example; before doing so, it has to be noted that by default a div element has a width of 100% or in case of the bootstrap classes, is equal to all col-XX-12 classes, each one at its responsive tier.
When using the col-sm-6 on its own and based on the the way the bootstrap grid system works, here is what happens:
a) Since there is no col-xs-XX class, the width of the column will default to a normal div's, aka 100%
b) Starting from the sm resolution tier - 768px and above - the column would be 6/12 or 50% of the parent width.
c) If there are no other classes for higher resolution tiers, then the 50% width will pass on to all resolutions upwards.
To answer your question, why you should need the rest of the classes used for higher resolution tiers, eg 'col-md-6' or 'col-lg-6'.. you don't, UNLESS of course you want to change the column width to a different width at those resolution tiers.
Moreover, you can also skip classes of intermediate resolution tiers, if the column width remains the same for those resolutions, eg. if you require a column to have a 50% width from 768px and up to 1199px and then have the column consume 66% you would use classes col-sm-6 col-lg-9 skipping the intermediate col-md-6 since the value is carried on from the small resolution tier.
As a sidenote, the breakpoints I am referring to are from Bootstrap 3 - are changed for Bootstrap 4 - however, usage remains the same.
Here is a challenge for bootstrap wizards: how to have my layout swap between .container and .container-fluid depending on the screen size. I.e. on mobile I want fluid, else use the regular container.
<!-- pseudo class definition to exemplify -->
<div class="container-fluid-xs-only container-sm-and-up">
<div class="row">
...
</div>
</div>
Disclaimer: the workaround I'm doing right now is tweaking the margins using media query. I.e. using .container and adding negative margins on mobile. Wondering if there is a better way of achieving this.
Requirements: Ideally I want a purely css-based solution, if really not possible, please consider that I'm using angular 1.x.
PS: I do not want to duplicate whats inside "row", in other words, I'm not interested in doing .visible-xs and .hidden-xs with duplicated content...
Thanks!
The only difference between the container and container-fluid is width so the child elements (rows, cols, etc..) will behave the same in either.
The container becomes full-width (100%) on xs screens by default, so at screen widths less than 768px, the container and container-fluid behave exactly the same. You shouldn't need to make any changes, and you can simply use container.
http://codeply.com/go/8ei2hMKBKd
Does Twitter Bootstrap 3 provide a built-in way to "simulate" a smaller screen by adding a css class to grid container?
My use case is that I want to display an section of html using bootstrap's grid normally on a large screen, but I want to reuse the same snippet for displaying in a modal (which is much narrower). For example, say I have this html:
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">One</div>
<div class="col-md-6 col-sm-12">Two</div>
</div>
</div>
Is there a built-in class I can add to the .container element (like .simulate-sm) to force the columns to display using the sm grid definition, even if it's on md screen? The html above is just an example: my real-world html has a large number of rows and more varied column combinations, which makes me hesitant to try to massage the column classes individually.
Thanks for your help!
There is nothing built in, but with the right CSS (including descendant classes), you can make a single added custom class do all the work for you. In your specific example, you would add .simulate-sm to the .modal-body div like so:
<div class="modal-body simulate-sm">
<div class="col-md-6 col-sm-12">One</div>
....
and some custom CSS:
.simulate-sm .col-sm-12{width:100%}
.simulate-sm .col-sm-8{width:75%}
.simulate-sm .col-sm-6{width:50%}
.simulate-sm .col-sm-4{width:25%} /* extrapolate as needed */
Do this for whatever column classes you've used in your original code, doing the basic math to figure out % width. (i.e. the same as Bootstrap's).
The combination of descendant specificity and using this on the modal-body means it ONLY overrides Bootstrap's styling when within a modal (to which you've added the .simulate-* class).
Here is an example: http://www.bootply.com/KhNbrdUzoE
I can't quite visualize your problem, and I've never had to do this myself, but I feel like this snippet from the documentation is relevant to your need:
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
If you remove the col-md-6 class definition it sounds like the col-sm-12 definition will take effect for all form factors equal to or larger than the small screen.
Apologies if the answer is irrelevant. Was a complete shot in the dark.
If you are looking to emulate what it would look like on a mobile device, most browsers have emulators. For example in chrome, you would inspect an element and there is an emulator option on the bottom near the console. In terms of emulating a screen "bigger" than yours, there are websites that allow you to view your webpage from a different resolution. With a quick google search here is an emulator: http://quirktools.com/screenfly/
I'm using the 960 Smart Grid to design a website. It's a mobile first grid system, and I'm having a bit of trouble. In order for the grid system to work, the padding-left element cannot change or it breaks, except in the default layout when everything is a single column.
I needed to adjust the padding for an element in the mobile view, which screws up the element when it's larger than the single-column view width (so greater than 768 px). I need to change the padding back to what the original smart-grid style sheet says, but I'm not sure how to do that.
I'm fairly new to this, I don't have the site live at the moment but I can share any code needed. I'm adjusting the padding on a paragraph element, set inside of a div element.
<div id="intro" class="columns twelve" class="row">
<p id="tagline" class="columns eight offset-two">Sample Text.</p>
</div>
Essentially, I need to set a 6% padding for the paragraph element in the mobile view. Once it reaches a minimu width of 768 pixels, I need to eliminate the 6% padding because it breaks the offset-two portion of the tag. The offset is achieved in the smart grid style sheet using a padding-left value based upon the screen size. I'd like to switch back to the default padding from the smart grid style sheet for all of the media queries, if possible. You can check out the basic grid documentation on the site I linked to at the beginning of the question.
Thanks for the help.
I'm not sure if I understood your problem, but it looks like you just need to overwrite the padding for when the browser is less than 768 pixels.
To do this, you just need to add, at the end of your main css (or in a new one, but called after the other one):
#media screen and (max-width: 768px) {
.columns.eight.offset-two {
padding: 6%;
}
}
This means that this style will only be applied if the browser is smaller than 768px, and once it gets bigger, it will bring back the 'default' padding for your element. You don't need to specify the padding again for bigger resolutions,l because the second the browser gets past the number, it completely forgets about the media query (it's like it doesn't exist anymore). The only thing you need to keep in mind is, unless you set another smaller media query after this one, it will apply the 6% to all smaller sizes.
It's important that you keep your media queries at the end, because css is read from top to bottom, and the last style read will be the last applied.
I'm building a site which makes use of the popular 960.gs 16 column grid system. Here's a screenshot of the relevant part of the design, with the grid columns overlaid on top:
The issue is the white "popular right now" box. Since this has a white background, I want some padding inside the box. Simple enough: I added a <div> inside the parent one and styled it appropriately with padding: 10px and a white background.
The problem comes when I try to re-use the grid inside an 'inner' <div> like this. for example, inside that white box, I want the link list to be inside a 5 column container, and the image in a 3 column container (sorry, the screenshot doesn't show it at this size).
I tried redefining my grid column sizes inside the .inner class, which partly works - I removed 10 pixels from each column size, since the total width needs to be 20px less than before to account for the margins. This works in the case where there are exactly two child <div>s inside the .inner container, but obviously if there are more or less than 2 then things start to look wrong.
Does anybody have a good strategy for dealing with this kind of thing? I'd be willing to just put the padding on all columns, regardless of background colour, but couldn't get this working like I wanted when hacking the grid.
thanks
Matt
the 960gs has an .alpha and .omega class for allowing nesting. Usually this removes the leading 10px and trailing 10px margin from the elements you apply it to. You might be able to reverse these and misuse them to give you the padding you need - the overall column widths would add up, but the padding would be on the "wrong" side
<div class="container_12">
<div class="grid_12">
<div class="grid_5 omega">...</div>
<div class="grid_3 alpha">...</div>
</div>
</div>
I haven't tested this though so not sure that it would work