Introduction to Alpine.js - Setting Up Bootstrap 5 - 21

Let's configure Bootstrap 5 in Alpine.js

The next operation we are going to perform is to install and configure Bootstrap 5 in our small project.

Bootstrap 5

Here you have more information in case you have not heard about this framework, which as indicated here is a component-based framework, therefore we already have html elements ready to use, for example buttons, grids, containers, forms and a long etcetera, we simply reference a class and little else, it is a framework based on ccs and also on js, that is, on javascript, but the js part could be considered optional in case you are not going to use them:

https://getbootstrap.com/

Setting up our application

Now, we are going to implement the Bootstrap 5 CSS in the to do project; for this, it is only necessary to use the CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

You can use any other CSS framework like Bulma or Tailwind but, due to the simplicity of this framework, it was decided to use Bootstrap because in order to use its main components, it is simply a matter of defining classes and a fixed HTML structure:

<div x-data="data()" class="container my-3" style="max-width: 500px;">

   <div class="card">
       <div class="card-header">
           <h4>Total To Dos: <span x-text="totalTodos()"></span></h4>
       </div>
       <div class="card-body">


           <div class="row g-2">
               <div class="col-auto">
                   <label class="col-form-label">
                       Search
                   </label>
               </div>
               <div class="col-auto">
                   <input type="text" x-model="search" class="form-control">
               </div>
           </div>

           <form x-on:submit.prevent="save()" class="row g-2 mt-2">

               <div class="col-auto">
                   <label class="col-form-label">Create</label>
               </div>
               <div class="col-auto">
                   <input type="text" x-model="task" class="form-control">
               </div>
               <div class="col-auto">
                   <button class="btn btn-success" type="submit">Save</button>
               </div>
           </form>



           <ul class="list-group my-3">
               <template x-for="t in filterTodo()">
                   <li class="list-group-item">
                       <template x-if="completed(t)">
                           <span>
                               Completed -
                           </span>
                       </template>
                       <template x-if="!t.completed">
                           <span>
                               Uncompleted -
                           </span>
                       </template>
                       <input type="checkbox" x-model="t.completed">
                       <span x-text="t.task" @click="t.editMode=true" x-show="!t.editMode"></span>
                       <input type="text" @keyup.enter="t.editMode=false" x-model="t.task" x-show="t.editMode" />

                       <button class="btn btn-sm btn-close float-end" @click="remove(t)"></button>
                   </li>
               </template>
           </ul>

           <button class="btn btn-danger" @click="todos = []">Delete All</button>
       </div>
   </div>

</div>

29-01-2025 - Andrés Cruz

En español

• Category
• /
• JavaScript
• /
• Introduction to Alpine.js - Setting Up Bootstrap 5 - 21