How do I add a new column to a Bootstrap grid? - html

Question

I have the following html for a website page built with Bootstrap:
{{ define "main" }}
{{ $pageurl := .Permalink }}
<div class="col-xs-12 col-sm-8 col-md-9 content-column white-background">
{{ partial "mobile_nav_toggle.html" . }}
<div class="row">
<div class="col-lg-8">
<div class="jumbotron">
<h1 class="display-4">{{ .Title }}</h1>
<p class="lead">
<h3 style="font-weight:100;"> — was made by <i>{{ .Params.author }}</i></h3>
</p>
<hr class="my-4">
<p style="font-size:20px;">Who is a student of <strong>{{ .Params.major }}</strong>, when they were in their year <strong>{{ .Params.year }}.</strong></p>
</div>
<div class="content-column-content">
<br>
<h4>Project Abstract:</h4>
<hr>
<p>{{ .Params.description }}</p>
<hr>
<div class="row" style="padding-top:100px;">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Reach out to them</h5>
<p>Copy a link to this page to save or reach out to them to learn more:</p>
<button type="button" onclick="copyStringToClipboard({{ $pageurl }});
" style="border-radius:2px;padding:10px;" class="btn btn-primary ">Copy Link</button>
Contact Them
</div>
</div>
</div>
<div class="col-sm-6" style="background:#f2f2f2;">
<div class="card">
<div class="card-body">
<h5 class="card-title">Browse More By:</h5>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ .Params.major }} <span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Year {{ .Params.year }} Students <span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ .Params.tools }} <span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<br>
</div>
</div>
</div>
{{ end }}
I don't know how to add a new column to this. I've tried copying <div class="col-xs-12 col-sm-8 col-md-9 content-column white-background"> and adding things inside it, but it just adds it below the existing content. Essentially, I want to have a new sticky column where the 'Browse more` box appears next to the jumbotron.

Answer 1

try this
{{ define "main" }}
{{ $pageurl := .Permalink }}
<div class="col-xs-12 col-sm-8 col-md-9 content-column white-background">
{{ partial "mobile_nav_toggle.html" . }}
<div class="row">
<div class="col-lg-8">
<div class="jumbotron">
<h1 class="display-4">{{ .Title }}</h1>
<p class="lead">
<h3 style="font-weight:100;"> — was made by <i>{{ .Params.author }}</i></h3>
</p>
<hr class="my-4">
<p style="font-size:20px;">Who is a student of <strong>{{ .Params.major }}</strong>, when they were
in their year <strong>{{ .Params.year }}.</strong></p>
</div>
<div class="content-column-content">
<br>
<h4>Project Abstract:</h4>
<hr>
<p>{{ .Params.description }}</p>
<hr>
<div class="row" style="padding-top:100px;">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Reach out to them</h5>
<p>Copy a link to this page to save or reach out to them to learn more:</p>
<button type="button" onclick="copyStringToClipboard({{ $pageurl }});
" style="border-radius:2px;padding:10px;" class="btn btn-primary ">Copy Link</button>
<a href="#" class="btn btn-primary"
style="background:#353535;border-color:#353535;border-radius:2px;padding:10px;">Contact
Them</a>
</div>
</div>
</div>
<div class="col-sm-6" style="background:#f2f2f2;">
</div>
</div>
<br>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Browse More By:</h5>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ .Params.major }} <span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Year {{ .Params.year }} Students <span
class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ .Params.tools }} <span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
</div>
</div>
</div>
{{ end }}
for more info about bootstrap layout grids refer here

Answer 2

You need to manage 12 columns per row. You added this div for the first column
<div class="col-xs-12 col-sm-8 col-md-9 content-column white-background"></div>
Now you need to use this div.
<div class="col-xs-12 col-sm-4 col-md-3 content-column white-background"></div>
If I use "col-md-7" then I will add "col-md-5" for the second column.