1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Floating buttons don't working in my project

Kularathne free asked 6 years ago

I have create page with carousel and cards..also I used floating button in the card.but it is not working..Not only that I tried to set height for carousel images it's not working.   This is my code in here 
Start your code here
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Material Design Bootstrap</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- Your custom styles (optional) --> <link href="css/style.css" rel="stylesheet" href="Home.css"> </head> <body> <!-- Start project here--> <div class="row"> <div class="col-2"></div> <div class="card col-8 mt-3"> <!-- Card image --> <div class="view overlay"> <!--Carousel Wrapper--> <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel"> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <!--First slide--> <div class="carousel-item active"> <img class="d-block w-100" src="B1.jpg" alt="First slide"> </div> <!--/First slide--> <!--Second slide--> <div class="carousel-item"> <img class="d-block w-100" src="s.jpeg" alt="Second slide"> </div> <!--/Second slide--> <!--Third slide--> <div class="carousel-item"> <img class="d-block w-100" src="B3.jpg" alt="Third slide"> </div> <!--/Third slide--> </div> <!--/.Slides--> <!--Controls--> <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <!--/.Controls--> </div> <!--/.Carousel Wrapper--> <a> <div class="mask rgba-white-slight"></div> </a> </div> </div> <div class="col-2"></div> </div> <div class="row"> <div class="col-2 mt-3"></div> <!-- Card --> <div class="card col-4 mt-3"> <!-- Card image --> <div class="view overlay"> <img class="card-img-top" src="S.jpeg" alt="Card image cap"> <a> <div class="mask rgba-white-slight"></div> </a> </div> <!-- Button --> <a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a> <!-- Card content --> <div class="card-body"> <!-- Title --> <h4 class="card-title">Student Profile</h4> <hr> <!-- Text --> <p class="card-text">Create your student profile in here</p> </div> <!-- Card footer --> <div class="rounded-bottom mdb-color lighten-3 text-center pt-3"> </div> </div> <!-- Card --> <div class="card col-4 mt-3"> <!-- Card image --> <div class="view overlay"> <img class="card-img-top" src="B3.jpg" alt="Card image cap"> <a> <div class="mask rgba-white-slight"></div> </a> </div> <!-- Button --> <a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a> <!-- Card content --> <div class="card-body"> <!-- Title --> <h4 class="card-title">Student Marks</h4> <hr> <!-- Text --> <p class="card-text">View your assignment marks and examination marks in here</p> </div> <!-- Card footer --> <div class="rounded-bottom mdb-color lighten-3 text-center pt-3"> </div> </div> <!-- Card --> <div class="col-2 mt-3"></div> </div> <!-- /Start your project here--> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> </body> </html>

Bartłomiej Malanowski staff commented 6 years ago

Do you use MDB Free or MDB Pro?

Kularathne free commented 6 years ago

MDB Free

Piotr Glejzer staff commented 6 years ago

Hi, Floating buttons are MDB Pro component so if you are using free version, you don't have these! If you want have floating buttons and more you have to stock up on a PRO version. Best, Piotr
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Opened

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags
About author
Kularathne
0Support score
1Questions 0Answers 0Snippets