I have two main divs on page and I want to hide on of them in case user comes from tablet / phone.
Based on documentation I tried something like:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="contrainer row">
<div class="col-lg-6 col-md-12">
SHOW ME ALWAYS!
</div>
<div class="col-lg-6 hidden-md-down">
HIDE ME ON SMALL
</div>
</div>
Unfortunately it doesn't work. Second div will display all the time. Any idea what I'm doing wrong?
4.0.0-beta no longer has hidden-*, see Migrating to v4:
Our responsive utility classes have largely been removed in favor of explicit display utilities.
The .hidden and .show classes have been removed because they conflicted with jQuery’s $(...).hide() and $(...).show() methods. Instead, try toggling the [hidden] attribute or use inline styles like style="display: none;" and style="display: block;".
Related
Is there a way to tell Tailwind: If a parent has a certain class then show a certain HTML element, if not hide it? Or can this not be done in Tailwind?
<body>
<div class="hidden">Hello</div>
</body>
<body class="show">
<div class="block">Hello</div>
</body>
Yes!
You can use and arbitrary value on the parent, if you conditionally add the class it will show the children like so:
Demo: https://play.tailwindcss.com/0pCtnVrAh7
<!-- hidden -->
<div class="">
<div class="hidden item">Hey!</div>
</div>
<!-- Show if class "[&_.item]:flex" is added-->
<div class="[&_.item]:flex">
<div class="hidden item">Hey!</div>
</div>
<!-- Coming soon -->
<div class="group should-show">
<div class="hidden group-[&.should-show]:block">Hey!</div>
</div>
In a future update, hopefully tailwind will allow us to use the group modifier to style based on if the group has an additional class.
No. Tailwind is a css framework. To use conditional statements, you can either use Tailwind with javascript or php or any other languages.
Actually, there is.This is a css solution, but it can be achieved in tailwind as well:
.hidden {
display:none
}
.parent .hidden {
display:block
}
<div class="hidden">Text that doesn't show up</div>
<div class="parent">
<div class="hidden">
Text is visible
</div>
</div>
html
I am using bootstrap visibility classes as follows on my webpage:
<div class="hidden-sm">
<div id="lrg-div-A"></div>
</div>
<div class="hidden-lrg">
<div id="lrg-div-B"></div>
</div>
<div class="hidden-md">
<div id="lrg-div-C"></div>
</div>
The visibility classes work and are hidden in the viewport where required. But, when I look at the markup in the browser's developer tools, I still see the markup for the hidden divs. For example, on large screens, "lrg-div-B" is not seen in the viewport, but the markup is still seen in the HTML tab. Is there anyway to remove it from the markup as well, similar to what 'dispaly: none' does?
display: none doesn't remove it from the markup, but it does remove it from the document flow so that it doesn't take up space. You can remove a node with javascript using remove() or removeChild() but mind you can't get it back again (unless you store it and re-append it later).
console.log('Hidden node: ', document.querySelector('.hidden-sm'));
//Hidden node: <div class="hidden-sm">…</div>
console.log('Before remove(): ', document.getElementById('lrg-div-B'));
// Before remove(): <div id="lrg-div-B">large B</div>
document.getElementById('lrg-div-B').remove();
console.log('Removed node: ', document.getElementById('lrg-div-B'));
// Removed node: null
.hidden-sm {
display: none;
}
<div class="hidden-sm"> <!-- hidden but still in markup -->
<div id="lrg-div-A">large A</div>
</div>
<div class="hidden-lrg">
<div id="lrg-div-B">large B</div> <!-- removed from markup -->
</div>
<div class="hidden-md">
<div id="lrg-div-C">large C</div>
</div>
It is not supposed to remove the elements from markup. CSS handles how DOM looks not its structure. You need to use a bit of Javascript if you actually want to remove the DOM elements.
I know there is a few ways to do this, but I want to put this out there to see if there are any clean / good examples of ways to do this as I haven't had any luck searching.
So in Bootstrap, I basically have an aside that goes full width under 780px. Just thinking about that aside, it is a unique situation where that section actually gets larger as the viewport gets smaller.
Let me try to clarify... say the entire page width is 1200px and I am using a container -> row -> col-md-9 & a col-md-3. The col-md-3 is the aside. Inside the col-md-3 is a form with a nested grid of 2x col-sm-6 divs. So as the page drops through the break points, when it gets under 980px, the aside becomes full width and thus wider than it was at 1200px.
Bootstrap is setup so if you use col-sm-6 that column goes from 50% width to 100% width under 780px. I need to figure out how to do the opposite of that.
I need col-sm-6 (or however I need to custom tag, etc.) to go from 100% length to 50% length under 780px.
How can I do this? Thanks in advance!
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-6">Box 1</div>
<div class="col-sm-6">Box 2</div>
</div>
<div>
So in the example above... Box 1 and Box 2 stay next to each other until the viewport width is below 768px.
What would be the best way to write this so Box 1 and Box 2 were stacked until the viewport went below 768px wide... then they go on the same line / inline / whatever?
You can use multiple col-*-* classes on any columns within a bootstrap row. In your case, you would use col-xs-6 col-sm-12 to make any columns appear side-by-side on the smallest layout, but stacked on anything above:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-12">
Box 1
</div>
<div class="col-xs-6 col-sm-12">
Box 2
</div>
</div>
</div>
And here is a Bootply demonstrating this behaviour.
It seems as though angular-ui tooltips are easily mangled when used in conjunction with bootstrap's grid. Here is a plunker illustrating the behavior:
http://plnkr.co/edit/gVekao4JCdC5O91RCoiW?p=preview
<!doctype html>
<html ng-app="tooltip_app">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script>
angular.module('tooltip_app', ['ui.bootstrap']);
</script>
</head>
<body>
<br/><br/><br/><br/><br/>
<div class='container'>
<!--Row 1 - bad tooltip -->
<div class="row">
<div class="col-md-2">2 <span tooltip="This is a real long tooltip designed to show you how tooltips have funny behaivior depending on bootstrap column width">bad</span>
</div>
<div class="col-md-2">2</div>
<div class="col-md-8">8</div>
</div>
<hr>
<!--Row 2 - good tooltip -->
<div class="row">
<div class="col-md-8">8 <span tooltip="This is a real long tooltip designed to show you how tooltips have funny behaivior depending on bootstrap column width">good</span>
</div>
<div class="col-md-2">2</div>
<div class="col-md-2">2</div>
</div>
<hr>
<!--Row 3 - egregious tooltip -->
<div class="row">
<div class="col-md-9">9
<div class="row">
<div class="col-md-2">2 (nested)
<span tooltip="This is a real long tooltip designed to show you how tooltips have funny behaivior depending on bootstrap column width">worst</span>
</div>
<div class="col-md-10">10 (nested)</div>
</div>
</div>
<div class="col-md-3">3</div>
</div>
</div> <!--End Container-->
</body>
</html>
Notice how, when the viewport is small, everything works ok, but as you make the viewport more and more wide the tooltips start becoming compressed and misaligned. Is this behavior expected? If so, how can I ensure my tooltips stay aligned with the things they are supposed to be pointing to?
I had this exact same thing happen to me. I would encourage you to double check the bootstrapped portions of your controllers and your CSS for code that is attempting to to align the same elements. By default, these data displaying grids will align things pretty well. Usually bootstrap allows you to place some layout configuration within your controller, AND because we are creatures of habit we will do the same in our CSS. Try to define as much of the layout of the grid as you can within the controller. I checked the documentation and followed the alignment rules to the t, assigning how I wanted everything to look to a variable, $scope.MyDefs and concentrated on definitions within the ui-grid portion of my controller, I could shrink and grow my screen and everything would stay in place. It was a really easy fix that drove me nuts for days on end.
I am new to Bootstrap and was trying my hands on 12 column layout. Looking at the tutorials it should just happen out of box, but for some reason the Divs are stacking one below another rather than arranging themselves in row layout with spans. Its baffling can someone help?
<body>
<div class="row">
<div class="span6">Text 123456</div>
<div class="span6">Text 123456</div>
</div>
</body>
Here is is the fiddle - I am using Chrome and Firefox.
http://jsfiddle.net/vshtmczf/
Well, you have to got parent element with class container and instead of span6 use col-xs-6, because you are using Bootstrap 3.2. documentation
look here:
<body class="container">
<div class="row">
<div class="col-xs-6">Text 123456</div>
<div class="col-xs-6">Text 123456</div>
</div>
</body>
jsFiddle