The buttons disappear from the vision of the mobile phone.

Bootstrap Studio Help
1

Hi, can anyone explain to me why the buttons disappear when I look at the result of my work from a smartphone?

All buttons are visible on tablets and PCs.

2

Not without looking at your site or project files.

3

Here is the page code. There are two buttons: "Inserisci" and "Annulla ultima azione"

<!DOCTYPE html>

<html>

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <title>Test</title> <meta name="description" content="Gestionale immobiliare"> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"> <link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css"> </head>

<body id="page-top"> <div id="wrapper"> <nav class="navbar navbar-dark align-items-start sidebar sidebar-dark accordion bg-gradient-primary p-0"> <div class="container-fluid d-flex flex-column p-0"> <div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-house-damage"></i></div> <div class="sidebar-brand-text mx-3">Test todo</div> <hr class="sidebar-divider my-0"> <ul class="nav navbar-nav text-light" id="accordionSidebar"> <li class="nav-item" role="presentation"><i class="fas fa-tachometer-alt"></i>Dashboard<i class="far fa-calendar-alt"></i>Appuntamenti <li class="nav-item" role="presentation"><i class="fas fa-check"></i>To-do list <li class="nav-item" role="presentation"><i class="far fa-user"></i>Clienti<i class="fas fa-house-damage"></i>Immobili<i class="fas fa-user"></i>Profilo <li class="nav-item" role="presentation"> <div class="text-center d-none d-md-inline"><button class="btn rounded-circle border-0" id="sidebarToggle" type="button"></button></div> </div> </nav> <div class="d-flex flex-column" id="content-wrapper"> <div id="content"> <nav class="navbar navbar-light navbar-expand bg-white shadow mb-4 topbar static-top"> <div class="container-fluid"><button class="btn btn-link d-md-none rounded-circle mr-3" id="sidebarToggleTop" type="button"><i class="fas fa-bars"></i></button> <form class="form-inline d-none d-sm-inline-block mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search"> <div class="input-group"></div> </form> <ul class="nav navbar-nav flex-nowrap ml-auto"> <li class="nav-item dropdown no-arrow mx-1" role="presentation"> <div class="shadow dropdown-list dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown"></div> <div class="d-none d-sm-block topbar-divider"></div> <li class="nav-item dropdown no-arrow" role="presentation"> <div class="nav-item dropdown no-arrow"> <div class="dropdown-menu shadow dropdown-menu-right animated--grow-in" role="menu"><i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i> Profile <div class="dropdown-divider"></div><i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> Logout</div> </div> </div> </nav> <div class="container-fluid"> <div class="d-sm-flex justify-content-between align-items-center mb-4"> <h3 class="text-dark mb-0">To-do list</h3> </div><button class="btn btn-primary btn-sm d-none d-sm-inline-block" type="button" data-toggle="modal" data-target="#modal_form"><i class="fas fa-plus fa-sm text-white-50"></i> Inserisci</button><a class="btn btn-warning btn-sm d-none d-sm-inline-block" role="button" href="#"><i class="fas fa-check-square fa-sm text-white-50"></i> Annulla ultima azione <div class="card shadow mb-4"> <div class="card-header py-3"> <h6 class="text-primary font-weight-bold m-0">Lista di cose da fare</h6> </div> <ul class="list-group list-group-flush"> <li class="list-group-item"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <h6 class="mb-0">Lunch meeting</h6>10:30 AM</div> <div class="col-auto"> <div class="custom-control custom-checkbox"><input class="custom-control-input" type="checkbox" id="formCheck-1"><label class="custom-control-label" for="formCheck-1"></label></div> </div> </div> <li class="list-group-item"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <h6 class="mb-0">Lunch meeting</h6>11:30 AM</div> <div class="col-auto"> <div class="custom-control custom-checkbox"><input class="custom-control-input" type="checkbox" id="formCheck-2"><label class="custom-control-label" for="formCheck-2"></label></div> </div> </div> <li class="list-group-item"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <h6 class="mb-0">Lunch meeting</h6>12:30 AM</div> <div class="col-auto"> <div class="custom-control custom-checkbox"><input class="custom-control-input" type="checkbox" id="formCheck-3"><label class="custom-control-label" for="formCheck-3"></label></div> </div> </div> </div> </div> <div class="modal fade" role="dialog" tabindex="-1" id="modal_form"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Voce</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button></div> <div class="modal-body"> <div class="card"> <div class="card-body"> <h6 class="text-muted card-subtitle mb-2">Titolo</h6><input type="text">

Imposta le note:

<textarea></textarea></div> </div> </div> <div class="modal-footer"><button class="btn btn-light" type="button" data-dismiss="modal">Close</button><button class="btn btn-primary" type="button">Save</button></div> </div> </div> </div> </div> <footer class="bg-white sticky-footer"> <div class="container my-auto"> <div class="text-center my-auto copyright">Copyright © IMMOGEST ERP 2020</div> </div> </footer> </div><i class="fas fa-angle-up"></i></div> <script src="assets/js/jquery.min.js"></script> <script src="assets/bootstrap/js/bootstrap.min.js"></script> <script src="assets/js/chart.min.js"></script> <script src="assets/js/bs-init.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script> <script src="assets/js/theme.js"></script> </body>

</html>

4

Hi, I tried to post the code above. But it does not appear. And it seems that I can't even attach files. It seems absurd to me.

5

You need to use the backtick character before and after your code. Example: .myborder { border: 1px solid black; }

This forum software does not support file attachments. You'd have to post it somewhere in the cloud and provide a link.

6

Here is the page code. There are two buttons: "Inserisci" and "Annulla ultima azione"

`</p>

<div id=“wrapper”>
<nav class=“navbar navbar-dark align-items-start sidebar sidebar-dark accordion bg-gradient-primary p-0”> <div class=“container-fluid d-flex flex-column p-0”>
<a class=“navbar-brand d-flex justify-content-center align-items-center sidebar-brand m-0” href="#"> <div class=“sidebar-brand-icon rotate-n-15”>
<i class=“fas fa-house-damage”></i>
</div>

&lt;div class="sidebar-brand-text mx-3"&gt;
  &lt;span&gt;Test todo&lt;/span&gt;
&lt;/div&gt;&lt;/a&gt; 

&lt;hr class="sidebar-divider my-0" /&gt;

&lt;ul class="nav navbar-nav text-light" id="accordionSidebar"&gt;
  &lt;li class="nav-item" role="presentation"&gt;
    &lt;a class="nav-link" href="index.html"&gt;&lt;i class="fas fa-tachometer-alt"&gt;&lt;/i&gt;&lt;span&gt;Dashboard&lt;/span&gt;&lt;/a&gt;&lt;a class="nav-link" href="appuntamenti.html"&gt;&lt;i class="far fa-calendar-alt"&gt;&lt;/i&gt;&lt;span&gt;Appuntamenti&lt;/span&gt;&lt;/a&gt;
  &lt;/li&gt;&lt;li class="nav-item" role="presentation"&gt;
  &lt;a class="nav-link active" href="todolist.html"&gt;&lt;i class="fas fa-check"&gt;&lt;/i&gt;&lt;span&gt;To-do list&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="nav-item" role="presentation"&gt;
    &lt;a class="nav-link" href="clienti.html"&gt;&lt;i class="far fa-user"&gt;&lt;/i&gt;&lt;span&gt;Clienti&lt;/span&gt;&lt;/a&gt;&lt;a class="nav-link" href="immobili.html"&gt;&lt;i class="fas fa-house-damage"&gt;&lt;/i&gt;&lt;span&gt;Immobili&lt;/span&gt;&lt;/a&gt;&lt;a class="nav-link" href="profile.html"&gt;&lt;i class="fas fa-user"&gt;&lt;/i&gt;&lt;span&gt;Profilo&lt;/span&gt;&lt;/a&gt;
  &lt;/li&gt;&lt;li class="nav-item" role="presentation"&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="text-center d-none d-md-inline"&gt;
  &lt;button class="btn rounded-circle border-0" id="sidebarToggle" type="button"&gt;&lt;/button&gt;
&lt;/div&gt;

</div></nav>

<div class=“d-flex flex-column” id=“content-wrapper”>
<div id=“content”>
<nav class=“navbar navbar-light navbar-expand bg-white shadow mb-4 topbar static-top”> <div class=“container-fluid”>
<button class=“btn btn-link d-md-none rounded-circle mr-3” id=“sidebarToggleTop” type=“button”><i class=“fas fa-bars”></i></button> <ul class=“nav navbar-nav flex-nowrap ml-auto”>
<li class=“nav-item dropdown no-arrow mx-1” role=“presentation”>
<div class=“shadow dropdown-list dropdown-menu dropdown-menu-right” aria-labelledby=“alertsDropdown”>
</div>
</li>

      &lt;div class="d-none d-sm-block topbar-divider"&gt;
      &lt;/div&gt;
      
      &lt;li class="nav-item dropdown no-arrow" role="presentation"&gt;
        &lt;div class="nav-item dropdown no-arrow"&gt;
          &lt;a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#"&gt;&lt;img class="border rounded-circle img-profile" src="assets/img/transparent-avatar-icon-businessman-icon-clothing-icon-5d73c8b2654d27.4968889415678691064149.jpg" /&gt;&lt;/a&gt; &lt;div class="dropdown-menu shadow dropdown-menu-right animated--grow-in" role="menu"&gt;&lt;a class="dropdown-item" role="presentation" href="profile.html"&gt;&lt;i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"&gt;&lt;/i&gt; Profile&lt;/a&gt; &lt;div class="dropdown-divider"&gt;
          &lt;/div&gt;
          
          &lt;a class="dropdown-item" role="presentation" href="logout.html"&gt;&lt;i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"&gt;&lt;/i&gt; Logout&lt;/a&gt;
        &lt;/div&gt;&lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;&lt;/nav&gt; 
  
  &lt;div class="container-fluid"&gt;
    &lt;div class="d-sm-flex justify-content-between align-items-center mb-4"&gt;
      &lt;h3 class="text-dark mb-0"&gt;
        To-do list
      &lt;/h3&gt;
    &lt;/div&gt;
    
    &lt;button class="btn btn-primary btn-sm d-none d-sm-inline-block" type="button" data-toggle="modal" data-target="#modal_form"&gt;&lt;i class="fas fa-plus fa-sm text-white-50"&gt;&lt;/i&gt; Inserisci&lt;/button&gt;&lt;a class="btn btn-warning btn-sm d-none d-sm-inline-block" role="button" href="#"&gt;&lt;i class="fas fa-check-square fa-sm text-white-50"&gt;&lt;/i&gt; Annulla ultima azione&lt;/a&gt; &lt;div class="card shadow mb-4"&gt;
      &lt;div class="card-header py-3"&gt;
        &lt;h6 class="text-primary font-weight-bold m-0"&gt;
          Lista di cose da fare
        &lt;/h6&gt;
      &lt;/div&gt;
      
      &lt;ul class="list-group list-group-flush"&gt;
        &lt;li class="list-group-item"&gt;
          &lt;div class="row align-items-center no-gutters"&gt;
            &lt;div class="col mr-2"&gt;
              &lt;h6 class="mb-0"&gt;
                &lt;strong&gt;Lunch meeting&lt;/strong&gt;
              &lt;/h6&gt;
              
              &lt;span class="text-xs"&gt;10:30 AM&lt;/span&gt;
            &lt;/div&gt;
            
            &lt;div class="col-auto"&gt;
              &lt;div class="custom-control custom-checkbox"&gt;
                &lt;input class="custom-control-input" type="checkbox" id="formCheck-1" /&gt;&lt;label class="custom-control-label" for="formCheck-1"&gt;&lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        
        &lt;li class="list-group-item"&gt;
          &lt;div class="row align-items-center no-gutters"&gt;
            &lt;div class="col mr-2"&gt;
              &lt;h6 class="mb-0"&gt;
                &lt;strong&gt;Lunch meeting&lt;/strong&gt;
              &lt;/h6&gt;
              
              &lt;span class="text-xs"&gt;11:30 AM&lt;/span&gt;
            &lt;/div&gt;
            
            &lt;div class="col-auto"&gt;
              &lt;div class="custom-control custom-checkbox"&gt;
                &lt;input class="custom-control-input" type="checkbox" id="formCheck-2" /&gt;&lt;label class="custom-control-label" for="formCheck-2"&gt;&lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        
        &lt;li class="list-group-item"&gt;
          &lt;div class="row align-items-center no-gutters"&gt;
            &lt;div class="col mr-2"&gt;
              &lt;h6 class="mb-0"&gt;
                &lt;strong&gt;Lunch meeting&lt;/strong&gt;
              &lt;/h6&gt;
              
              &lt;span class="text-xs"&gt;12:30 AM&lt;/span&gt;
            &lt;/div&gt;
            
            &lt;div class="col-auto"&gt;
              &lt;div class="custom-control custom-checkbox"&gt;
                &lt;input class="custom-control-input" type="checkbox" id="formCheck-3" /&gt;&lt;label class="custom-control-label" for="formCheck-3"&gt;&lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="modal fade" role="dialog" tabindex="-1" id="modal_form"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title"&gt;
            Voce
          &lt;/h4&gt;
          
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class="modal-body"&gt;
          &lt;div class="card"&gt;
            &lt;div class="card-body"&gt;
              &lt;h6 class="text-muted card-subtitle mb-2"&gt;
                Titolo
              &lt;/h6&gt;
              
              &lt;input type="text" /&gt; &lt;p class="card-text"&gt;
                Imposta le note:
              &lt;/p&gt;
              
              &lt;textarea&gt;&lt;/textarea&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-light" type="button" data-dismiss="modal"&gt;Close&lt;/button&gt;&lt;button class="btn btn-primary" type="button"&gt;Save&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;&lt;footer class="bg-white sticky-footer"&gt; 

&lt;div class="container my-auto"&gt;
  &lt;div class="text-center my-auto copyright"&gt;
    &lt;span&gt;Copyright © IMMOGEST ERP 2020&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;&lt;/footer&gt;

</div>

<a class=“border rounded d-inline scroll-to-top” href="#page-top"><i class=“fas fa-angle-up”></i></a>
</div>

<p><script src=“assets/js/jquery.min.js”></script> <script src=“assets/bootstrap/js/bootstrap.min.js”></script> <script src=“assets/js/chart.min.js”></script> <script src=“assets/js/bs-init.js”></script> <script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js”></script> <script src=“assets/js/theme.js”></script>`

7

For some reason your use of the backtick character didn't work correctly, however I believe your problem is evident in this code...

<button class=”btn btn-primary btn-sm d-none d-sm-inline-block” type=”button” data-toggle=”modal” data-target=”#modal_form”><i class=”fas fa-plus fa-sm text-white-50″></i> Inserisci</button><a href="”#”"><i class=”fas fa-check-square fa-sm text-white-50″></i> Annulla ultima azione</a> <div class=”card shadow mb-4″>

Your buttons have the class d-none and then d-sm-inline-block. This would cause the button to not display on mobile sizes, and display on small size and up. Check your Responsive Display settings in the Options tab.

8

Thank you. Now run correctly

9

Paste code, highlight pasted code, click curly brackets on toolbar is another way to show code.

.mycode {

something: css;

}