I use
<div id="windows">
<div class="row-fluid">
<div class="span4 mywindow">Text</div>
<div class="span4 mywindow">Text</div>
<div class="span4 mywindow">Text</div>
</div>
</div>
within a div #windows of a special width.
I want to reduce the default 20px space between these three blocks.
these css code
#windows .span4
{
margin-right:-10px;
}
sets up a proper space between blocks, but each block keep the same width so the total width is less than 100% of the parent div (there is a right space).
I can fix it by changing the width of the blocks using !important. So the fix is
#windows .span4
{
margin-right:-10px;
width:180px !important;
}
The question then is: does it make sense to use Twitter Bootstrap span4 class for my windows if I have to fix it so hard?
I mean, is it a good practice to fix both margin-right and width for Twitter Bootstrap span classes or there is a simplier and a better solution to fix blocks?
P.S. Twitter Bootstrap is used for another purposes on the page as well (so span4 is not the only reason to use Twitter Bootstrap in my case).
You are triyng to change gutter width between the columns. The easiest way to do this is to customize BS build before the download:
http://twitter.github.com/bootstrap/customize.html#variables
Change #gridGutterWidth value there (for fixed layout), then download your build.
This might help people with the same issue using bootstrap as a gem in a rails app.
If your using bootstrap along with the gem 'bootstrap-sass' you can directly over write this default as follows:
.span{
margin-left:0px;
}
This overrides the default margin given by the gem.
Related
I'm creating a page where I have a parent div which encapsulates multiple child divs from different components in a NextJs project.
I have a preview option where my customers can preview their changes in mobile and desktop view.
I'm able to switch to mobile view using iframe. I want to achieve this without using an iframe.
Even though I change the parent div max width, because the rest of components have sm md lg xl which are taking the values from the view port instead of the parent div I'm unable to solve it.
What should be the approach to solve this?
The simplest way to access children in Tailwindcss is to class [&>] to the parent div. For example, let's say you have 5 child divs. If you want to give an attribute to the last of them [&>div:last-child]:bg-blue-500 , if you want to make it responsive, max-md:[&>div:last-child]:bg-blue-500 you have to express. I have prepared a demo for you to make it more meaningful, you can check it from the link below. If you expand the preview screen on the right a little, you will see that the colors have disappeared. I hope it can solve your problem.
Demo Code
Not sure what you meant complelty
<div class="max-w-full sm:max-w-full md:max-w-3xl lg:max-w-4xl xl:max-w-5xl">
<div class="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl">
For small screen sizes
</div>
<div class="flex-sm-row sm:flex-row md:flex-col lg:flex-col xl:flex-col">
<div class="w-sm sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
This for 50% width
</div>
<div class="w-sm sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
This for 50% width
</div>
</div>
<div class="hidden sm:hidden md:block lg:block xl:block">
For large and extra-large screen sizes.
</div>
</div>
Media breakpoints allows you to change content appearance based on viewport size. Tailwind's media variants like md:, lg: etc based on them. In order to change content based on parent's size you should use CSS Container Queries. Be aware - they are not production ready - about 75% browser support (actual at December 2022)
Container queries allow us to look at a container size and apply styles to the contents based on the size of their container rather than the viewport or other device characteristics.
Tailwind has official plugin which may help you with it. Install it configure within tailwind.config.js
module.exports = {
plugins: [
require('#tailwindcss/container-queries'),
],
}
You need to add #container class to a parent container and use size modifiers on element you need like #md:bg-blue-500.
<div class="#container max-w-full resize-x overflow-auto">
<div class="p-16 #md:bg-blue-500 bg-amber-400">
Resize me
</div>
</div>
This way element should be yellow unless container size is bigger than 28rem and it will become blue no matter viewport size
Produced CSS is
#container (min-width: 28rem) {
.\#md\:bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
}
Check other modifiers here. Please note md:flex and #md:flex are different sizes which may confuse at first
#containers supports labels so you can name containers and specify different CSS for them. Let's say you have reusable component (common situation) you include within loop
<div class="#4xl/aside:bg-red-500 #3xl/primary:bg-yellow-500">
</div>
So within #container/aside element your card will be red after #4xl (56rem) size, while within #container/primary - yellow after #3xl (48rem).
<div class="#container/aside">
<div class="#4xl/aside:bg-red-500 #3xl/primary:bg-yellow-500">
YELLOW
</div>
</div>
<div class="#container/aside">
<div class="#4xl/aside:bg-red-500 #3xl/primary:bg-yellow-500">
RED
</div>
</div>
As I said it's not production ready. The way you want to handle unsupported browsers is up to you. First one - use polyfill. Just add
<script src="https://cdn.jsdelivr.net/npm/container-query-polyfill#1/dist/container-query-polyfill.modern.js"></script>
and it should be enough. However read full docs to improve user experience. I didn't fully tested it myself so cannot guarantee it is 100% solution
Second way is to check does browser supports container queries or not. You can check it via JS
if (!("container" in document.documentElement.style)) {
console.log('No support')
// Do something in that case
}
Another way - via CSS #supports rule
#supports (container-type:inline-size) {
/** Container queries supported */
}
Tailwind has supports: variant for that needs so something like this would work
<div class="supports-[container-type:inline-size]:hidden">
Your browser does not support container queries
Maybe show iframe element as backup (?)
</div>
<div class="supports-[container-type:inline-size]:block hidden">
Here is my cool feature which will be hidden if browser does not supports container queries
</div>
I've created this demo playground without polyfill to check different cases depends on container and window size plus different types of container and browser support
A solution to this can be adding a w-screen to parent div.
Use w-screen to make an element span the entire width of the viewport.
Documentation
I have the following code:
<div>
<my-custom-component></my-custom-component>
<div>
Inside MyCustomComponent's template, I use mat-card similar to this:
<mat-card>
<mat-card-header>
<mat-card-title>{{ name }}</mat-card-title>
</mat-card-header>
<mat-card-content>{{ description }}</mat-card-content>
</mat-card>
When it renders, I notice that there is a 16px margin that's given using angular material generated code that looks similar to this:
<mat-card>
<mat-card-header>
<div class="mat-card-header-text"> <<< ******** This is the div I am asking about
<mat-card-title>{{ name }}</mat-card-title>
</div>
</mat-card-header>
<mat-card-content>{{ description }}</mat-card-content>
</mat-card>
That div adds 16px of margin on top of the 16px of padding that the mat-card supplies, which pushes the title away from the border of the card by 32 pixels.
The specs of my design say that the title should stay 16px away from the border not 32px.
What's the best practice way of how to accomplish this?
Relaying on a div that appears there and styling something like mat-card-header > div seems wrong since I would be styling this particular implementation of the material card. Next version, this div may end up being some other element.
I could do:
mat-card-header mat-card-title {
margin-left: -16px;
margin-right: -16px;
}
But that again seems kind of hacky to me.
What's the intended way of overriding the internal styles of these components?
Two ways that i know
Global level:- If you want the style to be applied to all cards in your app, add a
style in your styles.scss / css removing the padding / margin to get the required
effect.
Component level:- If you want this style only inside a particular component where the mat-card is used, add a the style in the component.scss / css file.
But make sure you use the shadow piercing operator to make the style work.
This approach can be used in other scenarios too. Hope it helps.
I want to have 2 buttons groups in one row like this:
[a|b|c] [d|e|f|g|h]
Currently the right button group is a pull-right bootstrap class. Works fine.
But this looks horrible on xs devices - since it's in a new row but still pulled to the right, like this:
[a|b|c]
[d|e|f|g|h]
So what I basically want to do is to combine pull- classes.
pull-right pull-left-xs
Well this example don't work. Is there something similiar? Otherwise: how can I align my content right on md and xl devices and left on all other devices?
Twitter bootstrap has helper classes that could work for what you are trying to do, try with offset .pull and .push classes, something like col-md-push-3 will push your 3 columns only for .md and .lg classes, if you want a different behavior on mobile just reset it to col-xs-push-0.
Check this link for reference http://getbootstrap.com/css/#grid-column-ordering
Why do you need a pull-right. Can't you get the same effect using offset. http://getbootstrap.com/css/#grid-offsetting
So for example you could have
<div class="row">
<div class="col-sm-3 col-xs-4">[a|b|c]</div>
<div class="col-sm-5 col-sm-offset-4 col-xs-8">[d|e|f|g|h]</div>
</div>
For sm screens it will have the offset spacing in between, then for xs it will put it next to each other.
You could use media query and custom class like this..
#media (min-width: 992px) {
.pull-right-sm {
float: right;
}
}
http://bootply.com/i145F3q1Ji
I would steer clear of modifying Bootstrap classes because it will potentially affect other parts of the site where you need the styles to work as originally intended. You will likely also be creating a maintainability challenge for yourself or others in the future. Furthermore, the push and offset does not right align, so it would only get close to what you want.
Bootstrap 4 includes responsive classes that use the same breakpoints as the grid system (e.g. .text-sm-right, .text-md-left etc) that can be used in conjunction with one another as a solution to this. https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment
Old post but as it was the top answer in google for my search...
Using Bootstrap v4 you can use the float-* classes.
<div class="row">
<div class="col-md-6">
Always left aligned
</div>
<div class="col-md-6 float-md-right">
Right aligned for medium+, left aligned otherwise
</div>
</div>
https://getbootstrap.com/docs/4.1/utilities/float/#responsive
This may seem like a dumb question, but is there an official bootstrap class reference? I looked on the website and was unable to find one.
I'm looking though some of the examples and I'll see stuff like:
<div class="container-fluid">
How am I supposed to figure out what all the contain-fluid tag does? Am I expected to dig through the css for every class to look at the rules and then divine how it will affect my page? That seems like a quick way to make assumptions and run into problems later.
Is there an official reference somewhere that I'm missing? I've seen some class lists compiled by third parties, but it seems like those are always going to lag behind new changes and may contain assumptions of intensions.
Not official but current as of 2/2016 https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/
Printable pdf and a sortable table with descriptions to help sort through the list of classes.
http://www.tutorialspoint.com/bootstrap/bootstrap_quick_guide.htm contains a very good reference for many of the bootstrap layout and css components.
Bootstrap 3 moved to a "mobile first" approach. .container is really only there in instances where you need/want a boxy layout. but, if you exempt the div.container-fluid entirely, you're left with a fluid layout by default.
for example, to have a two-column fluid layout, simply use:
<body>
<header>...</header>
<div style="padding:0 15px;"><!-- offset row negative padding -->
<div class="row">
<div class="col-md-6">50%</div>
<div class="col-md-6">50%</div>
</div>
</div>
<footer>...</footer>
</body>
The 2.x .container-fluid was replaced by .container in Bootstrap 3.x (http://getbootstrap.com/getting-started/#migration), so the .container is fluid, but it's not full width.
You can use the row as a fluid container, but you must tweak it a little to avoid a horizontal scroll bar. Excerpt from the docs (http://getbootstrap.com/css/#grid)..
"Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows."
More on changes in 3.x: http://bootply.com/bootstrap-3-migration-guide
Demo: http://bootply.com/91948
UPDATE for Bootstrap 3.1
container-fluid has returned again in Bootstrap 3.1. Now container-fluid can be used to create a full width layout: http://www.bootply.com/116382
I am trying to create an accordion menu with multiple floated elements. I want all of the inactive menu items to collapse to a small fixed width (40px or so) and the active item to expand to the remaining width. I want the menu to be responsive/elastic, so only the inactive menu items will have fixed widths.
Below is an example of what I want my menu to look/function like (without using jQuery to set the widths)...
Accordionza - CodeCanyon.com
I was able to accomplish the desired effect when only two menu items are displayed by floating one of the elements and giving it a fixed width, while NOT floating the elastic item and giving it a width of 100%.
Two Columns (Works)
<style type="text/css">
#one {
float:left;
width:40px;
}
#two {
width:100%;
}
</style>
<div class="row">
<div class="col" id="one">One</div>
<div class="col elastic" id="two">Two</div>
</div>
Four Columns - Elastic In Between (Does Not Work)
<style type="text/css">
#one, #three, #four {
float:left;
width:40px;
}
#two {
width:100%;
}
</style>
<div class="row">
<div class="col" id="one">One</div>
<div class="col elastic" id="two">Two</div>
<div class="col" id="three">Three</div>
<div class="col" id="four">Four</div>
</div>
Please note: applying float:right; to the elements to the right of the elastic item did not work either...
The problem is that if the elastic element is NOT on the end of the row, then the menu items do not remain on a single row. Please examine the fiddle below to see what I mean...
jsfiddle
So how do I apply this desired elasticity to the elements that reside in between their siblings? I really really want to keep the markup as simple as possible. Thanks in advance!
Update: I am getting close to a solution, however there is a slight problem with every method I've attempted. I will break them down, along with the issues I'm running into with each one.
METHOD 1: display: table-cell; (Suggested by onetrickpony)
Seemed like the answer, however there will not always be contents (text or html) inside the slide elements, and elements formatted with the display: table-cell; property do not recognize applied widths unless there is content inside of them. So this only works if I have content inside the slide... (I could modify the markup of my slider, but I would like to keep it the way I have it).
METHOD 2: CSS calc() (Also suggested by onetrickpony)
Not supported by some of the browsers I would like it to be... CaniIUse.com Browser Support Chart for calc(). Another excellent possibilty! One I did not know existed, and could be utilized if I made a fallback JS script for older browsers (want to avoid).
METHOD 3: Flexbox (Also suggested by onetrickpony)
Probably my favorite solution, but limited support is making me timid. Also could be used along with a fallback script. I learned about this a while back, and this is the future of CSS and layouts. Our salvation! Can't wait for full support...
METHOD 4: jQuery (Suggested by Tomasz Golinski)
What I was originally going to use, but decided I wanted to see if there was a CSS method that could be used instead. I have had some issues when using jQuery to set the width of elements. Mainly when the container is resized, and the script calculates the appropriate width while the container is resized.
So, the kind people who responded to my question have provided me with viable solutions to this issue. Any of the below is certainly an acceptable method to do what I am asking. I am simply seeking an answer that is more of a common CSS method. I am hoping that it is possible to accomplish this with some combination of styles I have not tried. I will admit I think Tomasz is correct- it cannot be done. I am leaving this question open just in case someone has a solution for me. Both Tomasz and onetrickpony have given me great answers. But I am still seeking a CSS-only solution that is widely supported by older browsers- and new, that I do not need to include a secondary script for, and that works without the need for characters inside the elements. Just want to see someone prove us wrong (that it is possible with good old fashioned CSS). If this magic answer does not come, I will be marking onetrickpony's answer as the best solution due to the fact it is CSS based, and he provided multiple solutions that are clean and simple. A combination of his flexbox CSS and Tomasz jQuery (as the secondary script) will most likely be what I use. Thanks!
If you're set to use floats, calculate the width of your "elastic" column by subtracting the widths of other columns from 100%. Example:
<div class="row cols-4">
<div class="col" id="one">One</div>
<div class="col" id="two">Two</div>
<div class="col elastic" id="three">Three</div>
<div class="col" id="four">Four</div>
</div>
CSS:
.cols-4 .elastic{
width: calc(100% - 45px * 3);
}
/* add more rules for other possible variations here */
http://jsfiddle.net/QM4LZ/
But a cleaner and easier approach is to use flexible boxes. This is exactly what they were designed for.
.row{
display: flex;
}
.col{
flex: none; /* <- don't flex */
width: 45px;
}
.elastic{
flex: auto; /* <- flex */
width: 100%;
}
http://jsfiddle.net/F7sxU/
It's also possible to achieve this with tables (fiddle), but you'll most likely run into some limitations when adding the real content and you need more wrapper elements.
the previous answer does resolve the issue however there are some problems with #onetrickpony's solution
example #1 will not work properly with dynamic number of items.
example #2 in most browsers it will work but not all browsers do support flexible boxes.
here is simple javascript code
jsFiddle: http://jsfiddle.net/aQEt3/5/
var count = $('.row').children().length; // counts how many items are in the entire row
var totWidth = $('.row').width(); // checks total width of the row
var elWidth = totWidth - ((count - 1) * 45); // counts how wide should be the elastic it
$(document).ready(function () {
$('.elastic').css('width', elWidth); // when document is ready, apply the new width to the elastic
});
beware, this is very simple code and there will be some issues if:
*there are 2 or more .row items
*you have more than one elastic class