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>
Related
Actually, my web page has 2 div tags which are vertically separated using col-md values. Its like <div class="col-md-6"> and <div class="col-md-6">. Right now both the divs are aligned side-by-side. .
But when I minimize the browser window, then both the divs are aligned one by one.
Code Snippet here:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title"><strong>Virtual Document 1</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node1" selectionMode="multiple" (onNodeSelect) = "selectedLeftNode($event)">
<ay-column field="name" header="Name" ></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}" ></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title " ><strong>Virtual Document 2</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node2" selectionMode="multiple" (onNodeSelect) = "selectedRightNode($event)" >
<ay-column field="name" header="Name"></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}"></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
</div>
</div>
My question, could anyone suggest me how to retain the position of the divs?
This is your code with the change 'col-md-6' to 'col-6'. I just linked the latest bootstrap css and its working perfect(side by side). Hope this can help you.
.col-6{
border: solid 1px red;
}
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title"><strong>Virtual Document 1</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node1" selectionMode="multiple" (onNodeSelect) = "selectedLeftNode($event)">
<ay-column field="name" header="Name" ></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}" ></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
<div class="col-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title " ><strong>Virtual Document 2</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node2" selectionMode="multiple" (onNodeSelect) = "selectedRightNode($event)" >
<ay-column field="name" header="Name"></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}"></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
</div>
</div>
try this, this will work
<div class="row">
<div class="col col-6">
//first content
</div>
<div class="col col-6">
//second content
</div>
</div>
for more details about this document as #tico suggested.
Edit
Even though this is not a good idea but you said the top one is not working in your case.I know this not suggestible but try this once
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
//first content
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
//second content
</div>
</div>
I'm sorry this is quite a silly question, but maybe it's because of being working for a few hours, but I can't wrap my head around this. I mean, I think I can solve this by manipulating the whole div structure with javascript, but I can't help to feel there has to be a way simpler solution that I'm not thinking of.
Here's a fiddle of what I got right now:
https://jsfiddle.net/aq9Laaew/42687/
<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
<div class="container-fluid colindex">
<div class="row">
<div class="col-md-9 stackem">
<div class="card">
<ol class="breadcrumb">
<li class="breadcrumb-item">Index</li>
<li class="breadcrumb-item active"></li>
</ol>
<h4 class="card-header">Test
<button class="btn btn-primary add" type="button" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" title="test"><i class="material-icons" id="sidebaricons">bookmark</i></button>
</h4>
<div class="card-body">
<div class="container index">
<div class="row py-3 px-4">
<div class="col-md-6">
<p></p>
</div>
<div class="col-md-6">
<p></p>
</div>
</div>
<div class="row py-3 px-4">
<div class="col-md-6">
<p>test</p>
</div>
<div class="col-md-6">
<p>test</p>
</div>
</div>
<div class="row py-3 px-4">
<div class="col-md-6">
<p>test</p>
</div>
<div class="col-md-6">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<p>testlist</p>
</div>
</div>
</div>
</main>
So the div which says "testlist" on the right, I got an include there with a list with links for fast access.
Question: What I'm trying to achieve is adding a button on this list which will toggle it. The thing is, when it's hidden, I want the other divs on the left side to expand and takes up the space on the list. When the list would be toggled again it would become like it is at the moment again.
Again, sorry for the (I'm sure) silly question, and thanks a ton in advance.
Have you tried using <div class="col-md stackem">
instead of <div class="col-md-9 stackem">
to let bootstrap auto-adjust the width?
I use JQuery Smooth Div Scroll. In html
<div id="makeMeScrollable">
<div class="queuenum">10</div>
<div class="queuenum">20</div>
<div class="queuenum">30</div>
<div class="queuenum">40</div>
<div class="queuenum">50</div>
<div class="queuenum">60</div>
<div class="queuenum">70</div>
<div class="queuenum">80</div>
<div ng-show="ishow" class="queuenum">90</div>
<div class="queuenum">10</div>
<div class="queuenum">20</div>
<div class="queuenum">21</div>
<div class="queuenum">12</div>
<div class="queuenum">13</div>
<div class="queuenum">14</div>
<div class="queuenum">15</div>
<div class="queuenum">17</div>
<div class="queuenum">19</div>
<div class="queuenum">14</div>
<div class="queuenum">88</div>
</div>
It work well.
But I load dynamic data by angularjs. It not work
<div id="makeMeScrollable" ng-repeat="order in currentlist1" class="row">
<div class="queuenum">{{order.queue}}</div>
</div>
Please help me.
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.
I am trying to create a layout like this :
I wrote html like this :
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-lg-3 col-md-3">
<div class="row">
<div style="height:400px">
container of menu item, which should be fix on top
<div>
</div>
</div>
<!-- Right side -->
<div class="col-lg-9 col-md-">
<div class="row">
<div class="row">
<div style="height:900px">
Div Scrollable <div>
</div>
</div>
</div>
</div>
</div>
How could i achieve this ?? please help me
The Bootstrap Affix may be what you are looking for. It's what the Bootstrap documentation itself uses to keep the menu fixed to the top while the page scrolls.
One of the possible way:
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-xs-3 clearfix" style="height:400px; background: #f00; position: fixed;">
container of menu item, which should be fix on top
</div>
<!-- Right side -->
<div class="col-xs-offset-3 col-xs-9">
<div style="height:900px">
Div Scrollable
<div>
</div>
</div>
</div>
</div>
</div>
+Fiddle
EDIT
I made just simple demo to keep bootstrap padding you need to add one more container inside of left column.