In tailwind we can write xl:hidden to hide element from xl screen size. But what happens if I want to have more than two different screen sizes. For example I want to be have page fit laptop, tablet and phone screens. How should I make sure there is min-width and max-width for screen sizes between the largest and smallest screen size. So I don't show content meant for tablet screens when the user is using a phone.
<div class="xl:hidden">a</div>
<div class="lg:hidden">b</div>
<div class="sm:hidden">c</div>
I figured it out, used hidden and block together to make the element hide at smaller screen sizes. The hidden attribute hides the element unless the screen width is reached causing it to become display:block. Thus, only showing at the element at the given screen size.
<div class="hidden xl:block">a</div>
<div class="hidden xl:hidden sm:block">b</div>
<div class="sm:hidden">c</div>
Related
When showing the element in fullscreen mode, I need the element (highlighted with the red rectangle) to be centered if the width is smaller than the screen(container). To achieve this, I used tailwindcss flex overflow-x-scroll justify-center (item 1).
If the width is bigger than the screen(container), we want the element to be aligned at the left edge. To achieve this, I need to remove flex from classes (item 2).
My question is how can I make it work for both cases: narrow and wide.
Your question is not clear but if you want to center the element in whatever the size of the container, just follow this code it may help:
<div class="lg:w-[85%] md:w-[90%] sm:w-[95%] mx-auto">
<div class=""></div>
</div>
it means on the large screen the width of the div is 85% of the body & the margin in the x-direction is auto or you can apply those classes directly to the targeted element and so on for the medium & small screen sizes. it's a basic CSS fundamentals but applied with tailwindcss
Scenario
Let's say I have two divs, side by side.
div1: 500px wide
div2: taking up the remaining width
I want the items in div2 to be responsive using bootstrap so that I can leverage xs, sm, lg, xl respectively eg mt-sm-3 which specifies the margin top ONLY for the small sizes.
Furthermore, I don't want the bootstrap sizing to trigger based on browser window width but instead the width of the containing parent div.
Question
Is this possible with bootstrap? If so, how?
Thoughts
Spoofing classes for div2 eg. have javascript attach, as classnames, custom-[xs,sm,lg,xl] depending on the size. This would be a ridiculous amount of busy work and kind of defeats the purpose of using such a widely adopted css library.
Put an iframe inside of the div which has bootstrap loaded into it. I don't necessarily like this one because I'm working with a react/redux project and it becomes a bit of a nuisance to pull this off.
Try the below structure
<div class="d-flex">
<div style="width:500px;"></div>
<div class="w-100"></div>
</div>
I ended up writing my own solution. It works by checking target div size every 100ms then attaches a size to it: xs, sm, md, lg, xl and will work with custom sizing metrics. I put a couple examples in my basic index.html
https://github.com/jacksonkr/substrap/tree/dev
I want my Navbar breakpoint after it comes from large to
medium screens. Could anyone explain to me how to exactly do so in code?
This is mentioned on bootstrap site on Overflowing Content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
This is mentioned on Bootstrap for mobile navbar breakpoint
Changing the collapsed mobile navbar breakpoint. The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
I am using a container class around my bootstrap 3 layout so that it has proper width for medium and large screens. However, it also affects small screens. I'd like to have a width of 100% for small screens (sm) and not only for extra small screens (xs). In other words I'd like to suppress the effect of the container for small screens. Is there a simple way to achieve this without defining my own container classes and media queries?
I think only way to get exactly what you want is to define your own container.
Another option is to use col-sm-12 as a full width wrapper instead. However, this will also be wide on md and lg
Or, you could use col-md-10 for a narrower wrap on md and lg, then switch to col-sm-12 for full width sm and xs
See demo: http://bootply.com/111713
Twitter bootstrap 3.x changes the grid model so that you set grid cell width and which media size to apply it to:
e.g. col-md-4, col-lg-12 (previously span4, span5)
Is there some short hand to specify the same cell size for any media size? So I don't have to do this to get the item to be a 4 grid cell across all media sizes:
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">...</div>
Yes! there's absolutely no need to use it as you shown.
You can use <div class="col-xs-4"> for all grid sizes. Bootstrap Grid use the smaller for all the grid up.
also you can use <div class="col-md-4"> to apply 4 for md and lg size but block on lower media size.
Bootstrap is smart enough to understand that if at a smaller XS size the column should be of size 4 to apply to the rest of greater width size with no problem. (you can, of course, override specifying each grid size)
hope it's clear enough :D