Search⌘ K
Home/
Courses/
Web Development with Golang and Beego

Add Bootstrap to a Beego Project

Learn to structure the view templates and integrate Bootstrap into an existing Beego project.

We'll cover the following...

Before we add bootstrap to the project we need to do a little restructuring of the view code.

Here is the current notes application:

appname = beego_notes
httpport = 8080
runmode = dev
mysqlDataSource = "beego_notes:tmp_pwd@tcp(127.0.0.1:3306)/beego_notes?charset=utf8"
Notes app

Restructuring the view code

In the existing code, each view in the /views/notes directory is a complete HTML template itself. If we add Bootstrap to this project, we will have to add Bootstrap CSS and JavaScript to each view template. Here is an example of one of the files /views/notes/index.tpl with Bootstrap integrated. We add the head tag in lines 3–11. The head tag includes the definition of Bootstrap stylesheets and JavaScript.

C++
<!DOCTYPE html>
<html>
  <head>
    <!-- ... other meta tags and title ... -->
    <!-- Include Bootstrap CSS locally -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <!-- Include Bootstrap JavaScript locally (optional) -->
    <script src="/static/js/bootstrap.min.js"></script>
  </head>
<body>
<h2>All notes</h2>
<dl>
  {{ range $index, $note := .notes }}
    <dt><a href="/notes/{{ $note.Id }}">{{ $note.Name }}</a></dt>
    <dd>- {{ $note.Content }}</dd>
  {{ end }}
</dl>
<a href="/notes/new">New Note</a>
</body>
</html>

Similarly, we will have to add this head tag in all view templates to use Bootstrap. This is why we will restructure the views to have a set of layout files that will define the head of the HTML file.

The view layouts

In web applications, headers and footers are vital in ensuring consistency and efficiency. By separating these sections into their own layouts, we ...