I have a problem at the moment and don't know how to change this. i use a grid. and this works before. but now the grid pulls down with it which i don't want. How can i change this? I use Tailwind
<section class="grid md:grid-cols-4 grid-flow-row-dense gap-4 p-4">
I think you're looking for:
align-items: start;
which, using bootstrap (as it appears you are) would be class align-items-md-start (where md is the usual responsive cutoff).
Related
Is it possible with Angular flex-layout apply responsive api on wrappers not on whole screen?
If I have code:
<div class="main-wrapper" fxLayout.sm="column" fxLayout.gt-sm="row" >
<div>div1</div>
<div>div2</div>
</div>
Flex direction will change only when whole screen is smaller. Is there any way how to change flex dirrection when main-wrapper is small, not the screen?
If not with flex layout, is it possible to do it with css?
There's no way to do what you would like to do. The best that you can do is set your custom breakpoint as said in the official GitHub project here.
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 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
Foundation 4's grid system, with its mobile first approach is a no brainer when it comes to styling the layout of a page when you already use other foundation elements (whether it is textual content, the general layout of images/content on the page like main content and sidebars).
In the following example page, each grey rectangle is made using grids and nested grids:
I often find myself designing "tabular data" which consists of elements and subelements (like individual grey boxes in the center of the previous image) that look a little bit like this:
Some elements like the controls have to be aligned, and when you click on an element it reveals a dropdown menu with more detailed information about the item.
I often use the grid system for this kind of elements during mockup phase, because it's quick to archieve the alignment and try different widths, but when refining the design, the foundation grid gets in the way with its default behavior when resizing the browser, spacing and it produces a lot of grid specific markup making the html code hard to read and understand.
So my question is: do you use foundation grid for these kind of details in a design, and if not, what's your favorite way to get multiple elements on the same line with different alignments, and having certain elements aligned with each other (simple divs with hardcoded width? display: table? something else?).
I know there is a new CSS3 flexbox module coming to allow this kind of display but it looks more to me like a replacement of the foundation grid system than the way to go when styling this level of details in a design.
It looks like the way to go is to use Foundation grid mixins (like explained at the bottom of the page).
It gives you the best of both worlds: the ease of use of the foundation grid while still being able to fine tune the behavior of the grid (space between columns and so on) that could be different for every elements you style.
Another advantage is that you don't need presentational classes. Instead of writing something like
<div class="row">
<div class="large-12 columns">
<div class="myItem">My Item</div>
</div>
</div>
You can go with
<div class="myItemWrapper">
<div class="myItem">My Item</div
</div>
While having in your style.css.scss someting like
#import 'foundation_and_overrides';
.myItemWrapper {#include grid-row(nest-collapse);}
.market_label {#include grid-column($columns: 12);}
I must code an html viewer which take some objects as input and provides a nice html layout. For the layout part I decided to use twitter bootstrap 2.3
prerequisites
The objects are represented as divs of different size
I don't know the number of divs to display in advance
Now, what I want is an "auto-adjusting" layout able to displace in the most convenient way the object in the screen. The concept is sketched in the following image:
on the left you can see the objects, on the right the desired final diplacement.
I nearly get it work in this way:
<div class="row-fluid">
<div class="node span6">a box</div>
<div class="node span6">a second box</div>
<div class="node span6">a third box</div>
<!--as much divs as you want-->
</div>
but in the second line I get a bad "tilted-right" effect due to the margin-left settings of the bootstrap css.
I also tried to override the css specification of the span to adopt a margin-right driven approach but with no luck (if it is interesting I can provide info about this approach).
Any suggestions?
You can do this by using bootstrap and the :nth-child pseudo selector. However, this that you are trying to accomplish will also require that you make CSS changes beyond the simply .span's left margin... You will probably need to re adjust this with smaller #media queries and it's probably outside the scope of this question to show you how to do all that, however... this should get you going:
Here is a jsFiddle
The fiddle above has bootstrap loaded... I'm making a container with the class .row-fluid in which I'm adding many .span6's, but I am also making sure that on the third and then every two more .span6 it's removing the left margin so it stacks two and two .span6 per row.
You can read more about the :nth-child pseudo selector here