Search code examples
javascripthtmltwitter-bootstrapkanban

Responsive <div> with bootstrap

I wanna make "kanban" style div section.. so div section have to be responsive and continue to right with sliding.But as picture each time I push "istasyon ekle" div section goes down to continue..

what I want is in the second picture...

and what I tried is :

function addrow(id) {
  divarea = document.getElementById("kanbanrow");
  var btn = document.createElement("DIV");
  btn.className = "col";

  btn.innerHTML = "CLICK ME";
  divarea.appendChild(btn);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>


<button class="btn btn-outline-success float-end" onclick="addrow(this.id)" id="addstation" type="button">İSTASYON EKLE</button>

<div class="container container-fluid" id="mainpage">

  <div class="row float-xl-start row-cols-auto table-responsive" id="kanbanrow">

    <div class="col-sm">
      <button class="btn btn-outline-success" onclick="addtodo(this.id)" id="addtodo" type="button">KART EKLE</button>
    </div>
    <div class="col-sm">
      <button class="btn btn-outline-success" onclick="addtodo(this.id)" id="addtodo" type="button">KART EKLE</button>
    </div>

  </div>

</div>

Solution

  • Moving from left to right in more the 12 columns is going to be a problem it is possible but it is going to lose form. The best way to keep form is to add code to scroll.

    <!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
div.scrollmenu {
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
 
}


</style>
</head>
<body>

<div class="scrollmenu">

    <a class="col-sm">
      <button class="btn btn-outline-success" onclick="addtodo(this.id)" id="addtodo" type="button">KART EKLE</button>
    </a>
    <a class="col-sm">
      <button class="btn btn-outline-success" onclick="addtodo(this.id)" id="addtodo" type="button">KART EKLE</button>
       <a class="col-sm">
      <a class="row float-xl-start row-cols-auto table-responsive" id="kanbanrow">
      </a>
      </div>
      <a class="col-sm">
    <button class="btn btn-outline-success float-end" onclick="addrow(this.id)" id="addstation" type="button">İSTASYON EKLE</button>
</a>
  </a>



</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<script>
function addrow(id) {
  divarea = document.getElementById("kanbanrow");
  var btn = document.createElement("A");
  btn.className = "col";

  btn.innerHTML = "CLICK ME";
  divarea.appendChild(btn);
}
</script>