Web Development with Golang and Beego/

...

/

Beautifying Beego App With Bootstrap

Beautifying Beego App With Bootstrap

Learn to use Bootstrap CSS in a Beego app to make it look beautiful and responsive.

We'll cover the following...

By the end of this lesson, we will be able to enhance the user interface of a Beego web application by integrating Bootstrap and applying Bootstrap classes for styling.

Applying Bootstrap classes to our project

This app helps the user store a list of notes. The user can create, view, edit, and delete a note. Bootstrap is already a part of the project. We are going to make changes in the views, specifically in the /views/notes directory to use Bootstrap classes.

We have included Bootstrap CDN links in the main layout template file /views/layouts/header.tpl:

Press + to interact
{{ define "layouts/header.tpl"}}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Notes App</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  <!-- Custom fonts for this template -->
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
</head>
<body>
{{ end }}

This layout file is imported into all view templates to include Bootstrap in the view.

Now, we are going to make use of Bootstrap classes in the following view templates to make the application look attractive:

View Templates

Name

Purpose

Path

Index page

Shows list of all existing notes

/views/notes/index.tpl

New note form page

Renders the form that the user can fill and submit to create a new note

/views/notes/new.tpl

Show page

Shows a single note to the user

/views/notes/show.tpl

Edit page

Provides a page to alter the fields of the note

/views/notes/edit.tpl

Index page

We are going to use Bootstrap’s cards to ...