I want to place 3 d3 charts in a row I tried doing it using bootstrap fro html but it does not help id there a better way to do this
My current code
<div class="row">
<div class="span4" id="chart_1">23</div>
<div class="span4" id="chart_2">45</div>
<div class="span4" id="chart_3">34</div>
</div>
Fiddle: https://jsfiddle.net/r2qepmk0/3/
If I change bootstrap class to col-xs-4 which otherwise place divs in row but somehow the charts do not render.
js fiddle with the col-xs-4 class https://jsfiddle.net/r2qepmk0/4/
I have updated your https://jsfiddle.net/r2qepmk0/5/ have a look.
<div class="row">
<div class="col-xs-4">
<div class="span4" id="chart_1">23</div>
</div>
<div class="col-xs-4">
<div class="span4" id="chart_2">45</div>
</div>
<div class="col-xs-4">
<div class="span4" id="chart_3">34</div>
</div>
</div>
Just in case if you want remove white space between columns you can try this link
Related
I want to use a push, pull in Bootstrap v5.0.0-beta2, but how?
In Bootstrap 3, I'm using it like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
I tried. But I can't. Here is my JSFiddle
In Bootstrap V5, how can I use push and pull?
Please help.
Thanks in advance.
Push/pull is a grid technique. That's now deprecated in favour of flex.
For flex the helper classes are .order-. See BS5 Columns documentation.
You can use global ordering:
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Or screen size specific ... i.e. .order-sm-*, .order-lg-*, and so on.
If you just want to shift, then use Offsetting Columns
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
EDIT:
In your case you can use:
<div class="row">
<div class="col-md-9 order-last">.col-md-9 <del>.col-md-push-3</del><ins>order-last</ins></div>
<div class="col-md-3 order-first">.col-md-3 <del>.col-md-pull-9</del><ins>order-first</ins></div>
</div>
or:
<div class="row">
<div class="col-md-9 order-2">.col-md-9 <del>.col-md-push-3</del><ins>order-2</ins></div>
<div class="col-md-3 order-1">.col-md-3 <del>.col-md-pull-9</del><ins>order-1</ins></div>
</div>
I have a widget like this:
<div class="col-md-12 col-xs-12">
<div class="col-md-4 col-xs-12">
1
</div>
<div class="col-md-4 col-xs-12">
2
</div>
<div class="col-md-4 col-xs-12">
3
</div>
<div class="col-md-4 col-xs-12">
4
</div>
</div>
I am embedding the above widget like this
<div class="container">
<div class="col-md-12">
<div class="col-md-3 embedWidget">
<!-- embeeded-widget-comes-here -->
</div>
<div class="col-md-9">
<!-- some other imp content here -->
</div>
</div>
</div>
When I do this my widget is showing as 4 column grid, But I want it to be stacked format (mobile view col-xs), for all responsive widths
how can I achieve it
I tried with width 100% to embedWidget (content is fixing in that area as 4 col grid)
Why don't you put 100% width on embedWidget for media query for smaller devices.
I got this:
<div class="col-lg-3">
<div class="visibleContent">
</div>
<div class="expandibleContent">
</div>
</div>
<div class="col-lg-3">
<div class="visibleContent">
</div>
<div class="expandibleContent">
</div>
</div>
<div class="col-lg-3">
<div class="visibleContent">
</div>
<div class="expandibleContent">
</div>
</div>
<div class="col-lg-3">
<div class="visibleContent">
</div>
<div class="expandibleContent">
</div>
</div>
I want .visibleContent to be clickable to expand the .exandibleContent like Google Images with triangle pointer.
Correct Example: LINK
I'm trying to deeply understand that code but I can't.
Can you write a code with the same functionality but only with four images?
I only need a grid of 4 images with the same slidetoggle function.
Check this out
https://codepen.io/anon/pen/owbebY
change
$('.image-grid').empty().html(cells(50));
to
$('.image-grid').empty().html(cells(4));
do you need like this
I have 3 divs in a row, I need 3 divs should be aligned in the center.
<div class="row">
<div class="center">
<div class="col-sm-4" id="ph-container"></div>
<div class="col-sm-4" id="do-container"></div>
<div class="col-sm-4" id="water-temperature-container"></div>
</div>
</div>
Use text-center instead of center.
<div class="row">
<div class="text-center">
<div class="col-sm-4 col-sm-offset-1" id="ph-container"></div>
<div class="col-sm-4" id="do-container"></div>
<div class="col-sm-4" id="water-temperature-container"></div>
</div>
</div>
Adding an offset will help you in making the view better.
the total number of cols is 12, if you use 12 cols (4+4+4=12) it will be not in center cose they wil be take all with of parent block.
So you must use less cols
<div class="row">
<div class="col-sm-pull-1 col-sm-3" id="ph-container"></div>
<div class="col-sm-3" id="do-container"></div>
<div class="col-sm-3" id="water-temperature-container"></div>
</div>
<div class="row">
<div class="col-sm-offset-1 col-sm-3" id="ph-container"></div>
<div class="col-sm-3" id="do-container"></div>
<div class="col-sm-3" id="water-temperature-container"></div>
</div>
This makes the three divs slightly narrower, and pushes them from the left, making them appear in the centre of the page.
Bear in mind, by making the divs narrower, your graphs may not look correct, so you'll need to correct your styling to adapt into the new div sizes.
This might help you actually: Bootstrap 3 1.5 column offset
How to combine JQuery.show() whit mine working animation so I can display text.
I would like to achieve the same effect like here on this working example .But I don't want to use "data" prefix for displaying text, I want to use jquery.show(). I am having trouble understanding where and how to put mine text for each button and showing it on the middleBubble.
Only difference between mine example and this one, is that mine middleBubble is toggling.
How can I make this work's and implement jquery show() library in working animation?
HTML for mine example:
<section class='circle-animation'>
<div class="container-fluid">
<div class="row">
<div class="hidden-xs hidden-sm">
<div class="col-sm-6 col-sm-offset-3 col-sm-pull-1">
<div id="middlepapir" class="jumbotron">
<div class="row">
<img class="papir img-responsive" src="img/circle/11.png" alt="">
<div class="row">
<div class="move1 col-sm-4 col-xs-4 col-md-push-4">
<img class="position1 round" src="img/circle/off/home-all-icon-off.png">
</div>
</div>
<div class="row">
<div class="move2 col-sm-4 col-xs-4 col-md-push-1">
<img class="position2 round" src="img/circle/off/home-cover-icon-off.png">
</div>
</div>
<div class="row">
<div class="move3 col-sm-4 col-xs-4 col-md-push-7">
<img class="position3 round" src="img/circle/off/home-design-icon-off.png">
</div>
</div>
<div class="row">
<div class="move4 col-sm-4 col-xs-4">
<img class="position4 round" src="img/circle/off/home-diy-icon-off.png">
</div>
</div>
<div class="row">
<div class="move5 col-sm-4 col-xs-4 col-md-push-8">
<img class="position5 round" src="img/circle/off/home-marketing-icon-off.png">
</div>
</div>
<div class="row">
<div class="move6 col-sm-4 col-xs-4 col-md-push-1">
<img class="position6 round" src="img/circle/off/home-other-icon-off.png">
</div>
</div>
<div class="row">
<div class="move7 col-sm-4 col-xs-4 col-md-push-4">
<img class="position7 round" src="img/circle/off/home-special-icon-off.png">
</div>
</div>
<div class="row">
<div class="move8 col-sm-4 col-xs-4 col-md-push-7">
<img class="position8 round" src="img/circle/off/home-vip-icon-off.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Jquery for HTML section:
// jQuery script for are Circle div whit Scroll Reveal Script
$(document).ready(function(){
/*==========================================
SCROLL REVEL SCRIPTS
=====================================================*/
window.scrollReveal = new scrollReveal();
/*==========================================
WRITE YOUR SCRIPTS BELOW
=====================================================*/
$('.round').click(function(){
$('.papir').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
});
});
});
This is more difficult to examine without your CSS, however, it seems that you missed the layout that your example used. They have a separate area for the main text called id="middleBubble". This is the area that the text is being replaced in.
They are performing the replacement here:
$("#middleBubble").html("<p><b>" + $(this).data("bubble1") + "</b><br />" + $(this).data("bubble2") + "</p>");
where "this" is the element (in this case the image) that has been hovered over. The data is stored in the data-bubble1 and data-bubble2 attributes. You could store it there (the replacement text for each section) or you could store it as a keyed JSON object and use the id of the image to key which values to use. I would recommend the later, but to each their own.