Develop Reference

How to use push pull in bootstrap 5?

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>

fixed div inside section of fullpage.js

I have a three section of my page that are inside fullpagejs. The middle page needs to contain a very tall div that is split in two columns. The left is the div that needs to follow right text that takes the entire height of div. But because the way the fullpage.js works(translate with css not actual scrolling i can't make div that is positioned fixed to behave like it should
HTML
<div class="section section-1 show-for-large">
section1 content
</div>
<div class="section section-2">
<div class="row">
<div class="small-12 medium-6 column">
<div class="row" id="pokemon">
<div class="small-5 medium-5 columns">
<img src="/">
</div>
<div class="small-7 medium-7 column">
<span class="title">
title
</span>
</div>
</div>
<div class="row hide-for-large">
<div class="small-12 columns">
<p>
text
</p>
</div>
</div>
</div>
<div class="small-12 medium-5 column">
<div>
<p>text</p>
</div>
</div>
</div>
</div>
<div class="section section-3">
section3 content
</div>
<div class="section section-4 fp-auto-height">
section4 content
</div>
FULLPAGE JS
$('#fullpage').fullpage({
sectionSelector: '.section',
scrollOverflow: true,
verticalCentered: false,
normalScrollElements:'#pokemon',
css3: true,
});
I tried using plugins like http://stickyjs.com/ , and similar like it but the problem is they all work on principle of scrolling.

Use position:absolute instead of fixed. Then use position:relative for the section elements, so the absolute position will be related to the section.

How can I switch items in bootstrap carousel by clicking a hyperlinks on webpage?

I have a fiddle like this http://jsfiddle.net/roxds51h/2/ - there is macbook pro with embedded carousel that contains two pictures. User can switch the pictures by clicking the white dots on the screen. I want to remove the dots and give the possibility of changing pictures by clicking the texts below:
<div class="row">
<div class="col-sm-6">
here is one text //after clicking that
//the first picture should
//appear on macbook
</div>
<div class="col-sm-6">
here is second text //after clicking that
//the second picture should
//appear on macbook
</div>
</div>
How can I do that?
Also, now the pictures are changing automatically every couple seconds - how can I disable it?
Thanks!

You can easily achieve that with this code:
<div class="row">
<div class="col-sm-6" data-target="#17" data-slide-to="0">
here is one text
</div>
<div class="col-sm-6" data-target="#17" data-slide-to="1">
here is second text
</div>
</div>
To disable autoplay change data-interval="5000" to data-interval="false".
<div id="17" class="carousel slide" data-interval="false" data-ride="carousel">
Removing white dots:
Remove them from HTML, I mean this code:
<ol class="carousel-indicators">
<li data-target="#17" data-slide-to="0" class=""></li>
<li data-target="#17" data-slide-to="1" class="active"></li>
</ol>

you need to swap the data target and warp your text in <a></a> tags.
HTML:
<section class="introSection">
<!-- Container -->
<div class="container macbook">
<div class="row">
<div align="center">
<img alt="" src="http://www.proalab.com/assets/macbookpro.png" class="mackbook_image">
</div>
<div class="mackbook">
<div id="17" class="carousel slide" data-interval="5000" data-ride="carousel">
<div class="carousel-inner">
<div class="item">
<img alt="Grey" src="http://www.proalab.com/assets/projects/uanz/uanz1.png" style="display: block;">
</div>
<div class="item active">
<img alt="Grey" src="http://www.proalab.com/assets/projects/uanz/uanz2.png">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
here is one text
</div>
<div class="col-sm-6">
here is second text
</div>
</div>
</section>
CodePen Demo

Bootstrap slider is not moving smoothly

I have created a carousel slider using bootstrap.
Here is my code:
<header id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('http://s1.postimg.org/ndn5u1rf3/home_slider1.jpg one');"></div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://s1.postimg.org/6sk4s4pov/home_slider2.jpg two');"></div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://s1.postimg.org/uktg3nrpr/home_slider3.jpg three');"></div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://s1.postimg.org/uschmfdan/home_slider4.jpg four');"></div>
</div>
</div>
</header>
It works fine, but I need something like this. On this website, the slider moves smoothly.. but in my code it doesn't work like this.
Can anyone help me fix this? Is there a modification I could make to this code?
Thanks.

2 column bootstrap div - left should be fix on top and right should be scrollable

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.