Introducción a Alpine.js - Configurar Bootstrap 5 - 21
Vamos a configurar Bootstrap 5 en Alpine.js
La siguiente operación que vamos a realizar es la de instalar y configurar Bootstrap 5 en nuestro pequeño proyecto.
Bootstrap 5
Por aquí tienes más información en caso de que no hayas conocido sobre este framework que tal cual indica por acá es un framework basado en componentes por lo tanto ya tenemos elementos htmls listos para utilizar por ejemplo botones por ejemplo grillas containers formularios y un largo etcétera simplemente referenciamos una clase y poco más es un framework basado en ccs y también en js es decir en javascript pero la parte js se pudiera considerar opcional en caso de que no vayas a utilizar los mismos:
Configurar nuestra aplicación
Ahora, vamos a implementar el CSS de Bootstrap 5 en el proyecto de to do; para esto, solamente es necesario usar solamente el CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
Puedes usar cualquier otro framework CSS como Bulma o Tailwind pero, por la sencillez de este framework, se decidió utilizar Bootstrap gracias a que para poder usar sus componentes principales, es netamente definir clases y una estructura HTML fija:
<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>
- Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter