I am using Bootstrap 5.2, I am using the CSS Grid, because I want to use the gap property.
How do I make the css grid columns auto at larger breakpoint only?
<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
<div class="g-col-5 g-col-lg-auto g-0">
</div>
</div>
of course "g-col-lg-auto" doesn't exist, but hopefully those of you who use bootstrap enough know what I am trying to achieve, and can help me do so. I've read the docs and cannot find the solution.
Thanks
Related
My custom vertical-side-navigation bar works fine by itself.
Here's a plnkr:
http://plnkr.co/edit/pLXogXuPiYwulcuzExMh
However when introduced within a bootstrap grid, the same navbar breaks. Plnkr here:
http://plnkr.co/edit/50G3o3ekNMR8qx2Be3rG
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-1">
<ng-include src="'nav.html'"></ng-include>
</div>
<div class="col-lg-11 col-md-11">
This is content section
</div>
</div>
I can fix this using some hacks like adding min-height property to the class
.vertical-side-bar
However, I do not believe that is the right way to do it. I am missing something here conceptually.
Could anyone please point out what's wrong?
The most obvious issue in your Plunk is that you are not calling the nav.css file.
<link rel="stylesheet" href="nav.css" />
Try this minor update to your Plunk here.
Now all that is missing is the background color and such. That shouldn't be difficult to add back. Your layout is basically working, though you need to make it fill the container width instead of being fixed width (I added that in my plunk).
But bear in mind that you can't get a fixed width column in Bootstrap 3 like you seem to be expecting. A column will always be 1/12th of the width of the screen. Also, you should start with columns defined for xs and then specify sm, md, or lg if they need to be different.
For example, you might need 3 xs columns to fit your content (col-xs-3), but only 1 in a large device (col-lg-1).
I just started to use angular ui-layout to allow splitting panes in a UI.
I'm trying to create a sidebar that has this blue element on the bottom
Is there a way to trick the ui-layout directive to achieve this? I tried doing size, but that just does absolute sizing, I want the bluebox just take up some space (showing 100% of its content) and the element above it needs to scroll and take up the rest of the vertical space.
EDIT: added the HTML
<ui-layout options="{ flow: 'row' }">
<div ui-layout-container> top part </div>
<div ui-layout-container> blue box</div>
</ui-layout>
I don't know why you want to use ui.layout, but I would not recommend to use it to achieve what you want.
ui.layout uses flex box model and you can use it by yourself without using another invasive javascript layout. You can fully achieve what you want using css only.
This is what I did to achieve what you want only using CSS. http://plnkr.co/edit/0mSxkNC5wl6WTbWc81z6?p=preview.
<div class="container flex flex-column">
<div class="top flex flex-row flex-auto flex-stretch">
<div class="flex-auto">Top</div>
<div class="sidebar">sidebar</div>
</div>
<div style="background:blue">Bottom</div>
</div>
If you are very interested in using Flex layout, I would recommend to use Angular Material Design, and it is advanced and makes more sense than ui.layout.
To know more about flex box, you can see this example.
http://plnkr.co/edit/lxx7QCwZbeZyyUtwiCym?p=preview.
I have created a grid of images using Bootstrap 3's .thumbnail class. Everything seems to be working great with regards to the images resizing, and the columns changing depending on the window size. The only problem is the images are all different sizes, and both portrait/landscape orientation. This causes awkward breaks and "pile-ups" with the thumbnail divs…
I was hoping to find a way to create a grid of SQUARE responsive divs using the .thumbnail class. So in other words, the width determined by Bootstrap would be mirrored in the div's height. E.g. the thumbnail image is scaled to 220px so the height of the div containing it would be set to 220px as well (and the thumbnail image inside scales up to 100% of eight the height or width, depending on orientation). Sort of like this:
Here is the basic code I'm using:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="<?php echo $image->url() ?>">
</div>
</div>
</div>
Thanks so much for any help you might be able to offer. I'm also open to suggestions for other approaches. I even tried using jquery Isotope's masonry setting to solve the pile up problem but couldn't get it to work :(
You could try a CSS only approach like this this..
http://bootply.com/85737
However, this is not cross-browser compatible so you still may want to use the Isotope plugin. Here is a working example that uses Isotope + Bootstrap..
http://bootply.com/61482
I have created a small plugin for bootstrap, called bootstrap-grid-h. You can try using it. It is css only solution. You can find it here: bootstrap-grid-h
For something like this I would recommend using masonry which will give you a pinterest effect where images will fit in a block style without breaks.
such as: http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
The question is very simple: how to PROPERLY avoid table for layout.
Problems: DIV layout with float:left is not always useful because often at browser stretch all divs pile one over the other...
I have a container div
<div id="container">
<div id="child1"> </div>
<div id="child2"> </div>
<div id="child3"> <div>
</div>
Container 100% page.
child 1, 2 width fixed width ( exampe 300px) and the 3rd width variable width 30%
I whant them not to pile one over the other on browser stretch.
Is it posible ? Thank you
http://thoughtsandideas.wordpress.com/2010/07/15/introduction-to-div-based-layout/
don't use tables for layouts. maybe the link can help you.
You should ALWAYS avoid using <table> for layout. <table> is made to display tabular data. That is it's purpose. If you use it outside of that purpose, then you are using it wrong. Additionally, if you can't achieve the layout you want using float's or display: inline, then you are most likely doing it wrong, or need a little bit of javascript to help you out until the flexbox functionality is fully implemented and supported.
See this post here for further explanation: Why not use tables for layout in HTML?
I have a website. Can I convert my website into a fluid grid layout? Are there any tools to automate this or do I have to create a fluid grid (in Dreamweaver) and insert <div> tags and insert my styles into it which will finally resemble my website.
There is no tool that I know of which will create a fluid grid layout out of the box to a existing one. This is probably due to the fact that such a tool would have difficulty to decide which kind of grid structure should be used. Always remember that when using grids, the size of a column is fixed and therefore might not resemble the css that you have created using pixel-accurate css styles.
What I would recommend though is looking at the many frameworks out there. They are really easy to use and the only that you have to do is add class names to your div tags.
List of Fluid Grid Frameworks
Fluid 960
CSSGrid
Bootstrap
FluidBaseline
There are like a million more of those. If you are just looking for a grid system that can be easily implemented without any hassle just use Fluid960.
edit
Lets say you had the following structure
<div style="width:100%">
<div style="width:20%>First div</div>
<div style="width:30%>Second div</div>
<div style="width:50%>Third div</div>
</div>
In case of the 16 grid 960 framework you would need to take the 100% as all 16 columns. Therefore 20% (so your first div) will need to be a 3 grid column, your 30% a 5 grid column and your 50% a 8 grid column. Now you have 3 + 5 + 8 = 16 columns. In HTML you just end up writing
<div id="grid">
<div class="grid_3"></div>
<div class="grid_5"></div>
<div class="grid_8"></div>
</div>
And you are done!