Categories Index Example

index.slim.erb

.d-flex.align-items-center.justify-content-space-between
  h3
    |  Listando categorias
  = button_to 'Nova Categoria', new_category_path, method: :get, class: 'btn btn-primary'

table.table.table-hover
  thead
    tr
      th
        | Descrição
      th
  tbody
    - @categories.each do |category|
      tr
        td
          = category.desc
        td
          .d-flex.align-items-center.justify-content-center
            = button_to 'Mostrar', category_path(category), method: :get, class: 'btn btn-success'
            = button_to 'Editar', edit_category_path(category), method: :get, class: 'btn btn-warning'
            = button_to 'Excluir', category_path(category), method: :delete, class: 'btn btn-danger btn-sm confirm', data: { confirm: 'Você tem certeza que deseja excluir essa categoria?'}

index_text_align.slim.erb

.d-flex.align-items-center.justify-content-space-between
  h3
    |  Listando categorias
  = button_to 'Nova Categoria', new_category_path, method: :get, class: 'btn btn-primary'

table.table.table-hover
  thead
    tr
      th
        | Descrição
      th
  tbody
    - @categories.each do |category|
      tr
        td
          = category.desc
        td.text-align-right
          = button_to 'Mostrar', category_path(category), method: :get, class: 'btn btn-success'
          = button_to 'Editar', edit_category_path(category), method: :get, class: 'btn btn-warning'
          = button_to 'Excluir', category_path(category), method: :delete, class: 'btn btn-danger btn-sm confirm', data: { confirm: 'Você tem certeza que deseja excluir essa categoria?'}

utilities.css

.d-flex {
  display: flex;
}

.align-items-center: {
  align-items: center;
}

.justify-content-end {
  justify-content: end;
}

.justify-content-space-between {
  justify-content: space-between;
}

.text-align-right {
  text-align: right;
}