I am trying to use this grid/Bootstrap example as my grid layout for alot of charts I want to plot.
This is my FIDDLE. In this example I am just using placeholders that would represent my charts. My qustion is how do I make the charts fit into these slots correctly?
I understand I could just change the size of the chart({width: 300, height: 240}) or placeholder in this example. But I would like to do the opposite and be able to change the div container width <div class="container"> to accomadate the size of the chart.
There is also the problem that this html/css adapts(is responsive) to the screen size, in that the placeholders would become stacked if the screen size gets narrower.
I understand this question may be a bit broad, But I would appreciate some pointers in this area if possible.
If you are using bootstrap4 add .img-fluid or .img-responsive for bootstrap3 class for img
Fiddle
To make the columns stack at different breakpoints you can use the relevant modifying class.
For example:
<div class="col-12 col-sm-6 col-m-4">
<a href="https://placeholder.com">
<img src="">
</a>
</div>
This creates a column that will default to 12 column widths (i.e the full width of the grid). At small screen sizes, columns become 6 column widths, at medium sizes 4... You can choose different numbers as you need. You can also add a class for larger screens, e.g. col-lg-3 (Grid docs)
The second thing you need to do is make the images responsive. You should be able to add the class .img-responsive to your images. (From the docs). However this class doesn't seem to be in the CSS you've provided. I've added it manually to the fiddle.
Apply style="max-width:100%;" in your all image tag. That will fit your image in proper column of bootstrap grid.
Related
I'm using bootstrap 3 I want to use col-xs-12 on an element but on all other displays I want the element and any following elements to use auto width on any larger displays.
I think the answer is media queries but I couldn't find any answers on this issue.
maybe something like col-sm-auto
EDIT: I hope I can properly explains this.
Let's say you have an input and a couple of labels on the page
Now in xs view I want the labels to drop to a new line, to do that I can set the input to col-xs-12 but that will not give the required results on large displays
Can you see how the width of the input is auto in the first image
You could try to add something like
#media (min-width: #screen-sm-min){
.col-sm-auto {
display: inline-block;
width: auto;
}
}
and then add this class to you element.
Or the second approach would be to have two different placeholders for different kind of screens.
For example:
<div class="col-xs-12 visible-xs-block">Some content for extra small screens</div>
<span class="hidden-xs">Some content for small, medium and large screens</div>
I have a container of rows that I'd like to make the container bigger. By default, bootstrap has it at 1200px. I thought that by changing col-md-4 to something like col-lg-4, it would expand the grid but it doesn't for me. Is there a way to expand the grid?
If you don't want to mess around with less variables and just want to increase your container size...make sure your custom css style sheet is called after your bootstrap css so that it isn't overridden and then use a simple css markup in your style sheet such as
#media (min-width: 1200px) {
.container{
width: 1400px;
}
You could even use min-width/max-width properties, or as benja pointed out you could also use container-fluid to maximize your container to the full width of the viewport.
You can use <div class="container-fluid"> for a container that will take the full width of your viewport.
Go to the Customize menu on Bootstrap website and choose your preferred size. In Less Variables -> Grid system you can find a form to input your preferred sizes. Then you can easily download the preferred grid. Hope this will help.
The middle term in col-XX-num corresponds to the screen size that will cause a "break" in your grid so that the items in the grid are responsive. For example, a div with a class of col-sm-4 will take up 4 of the 12 grid cells in a default Bootstrap row until the "small" screen size is noted (in Bootstrap "small" is defined as 750px). Read more about the Bootstrap grid.
If you want to change the width of the Bootstrap container, use this CSS:
.container{
max-width: 1900px;
}
This will make the container wider but will not make your grid bigger. The Bootstrap grid is locked at 12 cells per row. When you use the class col-md-4 as you gave in your example, you are telling Bootstrap to make this element take up 4 out of a possible 12 cells in this row.
Perhaps you will achieve your desired result making your columns take up less cells. Something like col-md-2 then you can use something like col-md-offset-2 to position the column within the row if needed.
Hope this helps!
So i have an website using a three column lay-out with a fixed width of 1000px. I want to convert this to an bootstrap responsive lay-out. What i did was the following:
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-push-2">Main</div>
<div class="col-lg-2 col-lg-pull-8">Left</div>
<div class="col-lg-2">Right</div>
</div>
</div>
I've set the container width for #media (min-width: 1200px) to width : 1000px. The problem i have now is that my sidebars are to small and the middle column is too wide. Changing the left and right col to col-lg-3 makes the colum to wide and the center column to small. I know bootstrap works with percentage so my question is, is this just how bootstrap works and i have to deal with it? Or is it somehow possible to set an fixed width to the sidebars? or is there an other way to make this happen?
thanks
This is how Bootstrap works. If you want to adapt it to your own liking, you should give your Main, Left and Right divs a class of their own and just adapt the % in your CSS.
Just be aware that creating your own %-width DOES NOT make it responsive! What I mean to say is that your divs will resize according to the browser-width, resulting in a very skinny website on mobile phones. Best is to combine this solution with Bootstrap, so Bootstrap takes over whenever your browser gets under X pixels wide, or to write your own #media and change the look of your website according to the width of the page.
Edit: Of course you could also try and override the bootstrap width in your own CSS, but this might result in some weird things when you use the same col-width again on another page.
So basically I am building a full screen food image grid using bootstrap 3. I have used container-fluid and the appropriate columns to define the width of my rows and breakpoints. Each of the columns contains a food image and uses the class - col-lg-2 col-md-3 col-sm-4 col-xs-4
I didn't want a gutter between the images so I removed the left and right padding assigned to the column class which gives me the exact look I want. Now when I resize the grid, it all works fine. However in between screen widths 950px and 980px, the images have a gutter between them vertically. I am unsure whats causing this. Does anyone have an idea?
I have attached a few pictures to illustrate along with bootply
http://www.bootply.com/xXaaLRWKTL . It happens in this example around the tablet screen break point. Resize the window and take a look, you will see the gutter comes back at the break point
http://imgur.com/a/ACSwA
Thanks
In the case of the example, it's because of the images.
The images have the class img-responsive, which sets the property max-width: 100%. Since that particular image's max width is 320px, the images itself stop at 320px (the actual div is acting as it should). Either use a bigger image, or remove the max-width property and set width: 100%.
I'm getting started on Bootstrap 3 and I'm having some trouble understanding how the grid classes are meant to be used.
Here's what I've figured out so far:
It appears that the classes col-sm-# and col-lg-# differ from plain old col-# in that they will only apply when screens are above a certain size (768px and 992px respectively). If you omit the -sm- or -lg- the divs will never collapse into one column.
However, when I create two divs inside a row that are both col-sm-6 it seems they are only side by side when the window is between 768px and 992px wide. In other words, if I shrink the window all the way down and then slowly widen it, the layout is single column, then two columns, then back to single column again.
Is this the intended behavior?
If I want two columns for anything over 768px, should I apply both classes? (<div class="col-sm-6 col-lg-6">)
Should col-6 also be included? <div class="col-6 col-sm-6 col-lg-6">
[UPDATE BELOW]
I took another look at the docs and it appears I overlooked a section which talks specifically about this.
The answers to my questions:
Yes, they are meant to apply only to specific ranges, rather than everything above a certain width.
Yes, the classes are meant to be combined.
It appears that this is appropriate in certain cases but not others because the col-# classes are basically equivalent to col-xsm-# or, widths above 0px (all widths).
Other than reading the docs too quickly, I think I was confused because I came into Bootstrap 3 with a "Bootstrap 2 mentality". Specifically, I was using the (optional) responsive styles (bootstrap-responsive.css) in v2 and v3 is quite different (for the better IMO).
UPDATE for stable release:
This question was originally written when RC1 was out. They made some major changes in RC2 so for anyone reading this now, not everything mentioned above still applies.
As of when I'm currently writing this, the col-*-# classes DO seem to apply upwards. So for example, if you want an element to be 12 columns (full width) for phones, but two 6 columns (half page) for tablets and up, you would do something like this:
<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6
(They also added an additional xs break point after this question was written.)
Here you have a very good tutorial, that explains, how to use the new grid classes in Bootstrap 3.
It also covers mixins etc.
"If I want two columns for anything over 768px, should I apply both classes?"
This should be as simple as:
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
No need to add the col-lg-6 too.
Demo: http://www.bootply.com/73119
The best way to understand is to simply think from top to bottom ( Large Desktops to Mobile Phones)
Firstly, as B3 is mobile first so if you use xs then the columns will be same from Large desktops to xs ( i recommend using xs or sm as this will keep everything the way you want on every screen size )
Secondly if you want to give different width to columns on different devices or resolutions, than you can add multiple classes e.g
the above will change the width according to the screen resolutions, REMEMBER i am keeping the total columns in each class = 12
I hope my answer would help!
To amend SDP's answer above, you do NOT need to declarecol-xs-12 in <div class="col-xs-12 col-sm-6">. Bootstrap 3 is mobile-first, so every div column is assumed to be a 100% width div by default - which means at the "xs" size it is 100% width, it will always default to that behavior regardless of what you set at sm, md, lg. If you want your xs columns to be not 100%, then you normally do a col-xs-(1-11).
This might be late as I think most of us are using BS4. This article explained all the questions you asked in a detailed and simple manner also includes what to do when. The detailed guide to use bs4 or bootstrap
https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7