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!
Related
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.
I would like to know how I can adjust the .row width of Bootstrap, that the col grid still work as used to, but just particular .rows are tighter as in default.
Thanks
To adjust the row width, you can add the following statement in an internal style sheet: .row {width:90%;}, where you can replace 90% with any percentage value desired. This will still preserve the grid layout and responsive design while giving you control on the row widths.
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 just want to clear out one thing. If I am using "container-fluid" class, it means I can not have something like this in bootstrap.css:
.container-fluid{
width: 1170px;
}
I tried to set in pixels and the responsive nature simply switched off. While setting in % it works. In other words, my question is like this:
How can I set the fixed width of container-fluid? Or was it simply not meant by default by bootstrap developers?
I already read this link:
Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap
But simply can not find anything there regarding the responsive nature and fixed width with container-fluid.
setting a px width is making it static, you would have to employ a different technique to make it responsive after that like javascript that is why a % is used.
If you are wanting to make the container not go wider than 1170px use
.container-fluid {
max-width:1170px;
}
max-width will make it so if the users screen is wider than 1170px the container will go only up to 1170px wide. This will make it so the responsive mechanisms will still work.
Of course using .container-fluid as the selector will change how all container-fluid elements act so think about adding a second class to that element and setting the style to it.
html
<div class="container-fluid maxWidth"></div>
css
.maxWidth {
max-width:1170px;
}
If you are wanting the container to be fixed no matter what, that will make the contents inside non-responsive as they would not be able to tell when the screen has changed size as the container would not change size.