In bootstrap nav we can show the menu in collapsing format.
Similary I want to show div in the collasing format. e.g if it is is mobile view then only show the top div and hide all the div in collapse mode . I am aware of the below supports in bootstrap responsive
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
If it is not supported please all share the idea how it can be implemented.
nirajkumar, have a look at this Fiddle.
You can use the .hidden-xsBootstrap class to do what you want here.
Using version 3.3.4.
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-1 col-lg-3 col-lg-offset-1 text-center block2 hidden-xs">
Div #1
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-2 col-lg-3 col-lg-offset-4 text-center block2">
Div #2
</div>
This is listed in the official Bootstrap docs. Here's the link:
http://getbootstrap.com/css/#responsive-utilities-classes
Related
I have two columns, left column is main feed and right column is sidebar.
I want to scroll each columns separately.
In this case left pain scroll works well.
However right pain scroll doesn't works.
Contents in right panel are dynamically generated by javascript,
so it's sometimes getting longer than screen.
<div class="container" style="padding-top: 60px;" >
<div class="row">
<div class="col-6 col-md-6 col-sm-6 col-xs-6">
Main Feed
</div>
<div class="col-6 col-md-6 col-sm-6 col-xs-6"
style="overflow-y: auto;display: block;position:fixed;right:10px;">
sidebar content this contents is generated dynamically by javascript
</div>
</div>
</div>
<div class="col-6 col-md-6 col-sm-6 col-xs-6"
style="overflow-y: auto;
display: block;
max-height:100vh;
right:10px;
position: fixed;">
</div>
Check https://codepen.io/ashishkrtewari/pen/BaaJXWy
I just added some generated content and max-height of 100vh. Without a max height you will not see the scrollbar as there is nothing restricting the height to reveal a scrollbar.
Please check
Currently, I have two divs. When the window is fully expanded, I want it to look like this:
----------------------------------------
| Div-Left | Div-Right |
----------------------------------------
When it is on mobile, I want it to look like this:
---------------
| Div-Right |
---------------
| Div-Left |
---------------
I've been following this example (Bootstrap change div order with pull-right, pull-left on 3 columns and Bootstrap 3: Push/pull columns only on smaller screen sizes), but I can't seem to get it quite right. My code currently looks like this (all of which is within a container):
<div class="row">
<div id="Div-Left" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 col-lg-push-3 col-md-push-3 col-sm-push-6"></div>
<div id="Div-Right" class="col-lg-8 col-md-6 col-sm-6 col-xs-12 col-lg-pull-8 col-md-pull-6 col-sm-pull-6"></div>
</div>
Note that the class "row" in Bootstrap is:
.row {
margin-right: -15px;
margin-left: -15px;
}
It works correctly on mobile/xs up to either small or medium, but something weird happens after. The div starts very far off the left side of the screen and is cut off when it's on desktop with the window fully expanded. Sort of like this:
||
----||----------------------------------------
cut off here| Div-Left | Div-Right |
----||----------------------------------------
||
the screen
I also tried doing this:
<div class="row">
<div id="Div-Left" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 col-lg-push-3 col-md-push-3 col-sm-push-6"></div>
<div class="row">
<div id="Div-Right" class="col-lg-8 col-md-6 col-sm-6 col-xs-12 col-lg-pull-8 col-md-pull-6 col-sm-pull-6"></div>
</div>
</div>
This didn't work either. I'm trying to code "for mobile first" too! The behavior seems strange and inconsistent, so I'm not quite sure why this is happening (especially only for the larger screens). Any advice would be appreciated! Thanks.
SOLVED: One of my friends was helping me and noticed what I was doing incorrectly. I forgot to switch the numbers around:
<div id="Div-Left" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 col-lg-push-8 col-md-push-6 col-sm-push-6"></div>
<div id="Div-Right" class="col-lg-8 col-md-6 col-sm-6 col-xs-12 col-lg-pull-3 col-md-pull-3 col-sm-pull-6"></div>
I think the issue you are seeing is two fold.
First remember that each class scales up so you don't need to explicitly list what they should do at each size, just what they should be doing at each break point. Being too explicit might be making changes happen at different timings.
Second I have seen in my past where not using all of the available 12cols has made some weirdness happen. At md and lg sized screen you are using 9 and 11 cols (total) respectively. Try using the same proportions of 12 cols. Perhaps try something like:
<div id="Div-Left" class="col-md-4...
<div id="Div-Right" class="col-md-8...
I use bootstrap 3.3.7 for its grid and responsiveness in my web app (Flask App). It works pretty well with all the plotly subplots I created except for a single plot. When the browser is in full-page or if I resize a little bit, I don't have any problem :
However, if I resize too much the plot exceeds the section height and generates a white space.
I have tried to add a margin-right, a padding-right, to change the class of the div col-lg-6 col-md-6 col-sm-6 into col-lg-6 col-md-6 col-sm-6 col-xs-6 (the chart become very very small), to change the margin inside the javascript code that produces the plot...
And as you can see the subplots in the below the GREEKS title are well displayed whatever the resize applied...
Here is the html code for this section :
<section id="payoff" class="background-img">
<!-- Table code here -->
<div class="container-fluid" id="results">
<div class="row" style="padding-top: 0px; padding-bottom: 30px;">
<div class="col-lg-6 col-md-6 col-sm-6" style="padding-top:40px;">
<div class="plotly-graph-div" id="plot-payoff"></div>
</div>
</div>
</div>
</section>
Any help would be really appreciated! Thanks a lot
I'm trying to use Packery to build a dashboard with draggable widgets (using Draggabilly for dragging). The widgets have their width determined by Bootstrap classes, as to be responsive over various screen sizes. I'm also using jQuery to grab elements and stuff.
CodePen Link
HTML Snippet
<div class='container'>
<div class='row' id='dashboard-root'>
<div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
Some content</br></br>
</div>
<div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
Some other content<br>
</div>
<div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
Even more content<br><br><br><br>
</div>
<div class='dashboard-item col-xs-12 col-sm-12 col-md-8 col-lg-6'>
Some wide content is super wide, even wider than you even thought possible, like this is so crazy wide you wouldn't believe it.
</div>
</div>
</div>
CSS Snippet
.dashboard-item{
border-style: solid ;
}
.container{
border-style: dashed ;
}
JavaScript Snippet
var $root = $('#dashboard-root') ;
$root.packery({
itemSelector: '.dashboard-item'
});
$root.find('.dashboard-item').each(function(i, itemElem){
var draggie = new Draggabilly(itemElem) ;
$root.packery('bindDraggabillyEvents', draggie);
});
As it stands, the widgets are draggable, but I need them to snap to some sort of grid. Currently, they can be placed anywhere, which makes positioning weird.
I'm trying to figure out how to make them snap to Bootstrap's grid columns. Ideally, I'd want the elements to snap to the nearest col-*-1, I think. Not sure what to do with the height though.
I tried playing with setting the columnWidth to a selector for a dummy element, but I couldn't get it to work.
I've only just started learning so please stick with me and I'll try provide as much info as I can.
Using Bootstrap 3 I have been attempting to adjust a number of content areas so that they have the same height. I have 4 per row with an unspecified amount of columns (I'm looping through a php array to determine this). Essentially no matter how many content areas I need to display they should all use the same height, or at the very least the same height as the other three on it's row.
I have been using this jquery library > https://github.com/mattbanks/jQuery.equalHeights > which works great but whenever I resize the page the heights of the content areas don't update (if I drag the screen to a new size and hit refresh the heights re-adjust to the correct position)
I have also looked at a few other solutions such as > Twitter Bootstrap - Same heights on fluid columns but this doesn't seem to work when I adjust it for multiple rows.
Any help would be appreciated, whether I should be using a javascript solution or if there's anything I can be doing with CSS. Keeping it mind I need the heights to be consistent and for it to re-adjust on screen resize. I would prefer to use Bootstrap 3, but if a solution is available for 2 I will use that version.
<div class = "container">
<div class="row">
<div id="equalheight">
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
</div>
</div>
Above is my html, the second content area has the large amount of copy
<script>
$('#equalheight div').equalHeights();
</script>
<script>
$(window).resize(function(){
$('#equalheight div').equalHeights();
});
$(window).resize();
</script>
Above is my Javascript, calling the before mentioned library.
Thanks for any help / advice
You can try using CSS negative margins (no jQuery needed)..
.demo{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#efefef;
}
#equalheight {
overflow: hidden;
}
http://bootply.com/92230
EDIT - another option
Here is another example using CSS3 flexbox spec: http://www.bootply.com/126437
Bootstrap team developped a CSS class .row-eq-height which is exactly what you need. See here for more.
Just add this class on your current row like this:
<div class="row row-eq-height">
your columns
</div>
Warning: You have to add a new div.row.row-eq-height each 12 columns
You can use this plugin. It works pretty good.