CSS template not applying to my page - html

Question

I am making a blog-type page to practice some web.py. I made a rough html file and I tried to apply a CSS bootstrapper/template but it is not working for me anymore. This is the HTML of the home page, in essence.
`
Home Feed
Profile
Messages
Friends
Communities
<li><span class="mdi mdi-bell"> </span> Notifications</li>
<li class="seperator"></li>
<li><span class="mdi mdi-settings"> </span> Settings</li>
<li><span class="mdi mdi-help-circle"> </span> Help</li>
</ul>
<div class="col-md-6">
<div class="post-box">
<form id="post-activity">
<textarea name="content" class="post-input" placeholder="What's new, $session['user']['name']?"></textarea>
<button id="post-button" class="btn btn-info btn-raised waves-effect" type="submit"><span class="mdi mdi-send"></span> Post</button>
</form>
</div>
<div class="post-card">
<div class="header">
<div class="avatar"></div>
Adrian Bernat
</div>
<div class="content">
Test Content
</div>
<div class="footer">
<button class="btn btn-round waves-effect btn-default btn-raised btn-like"><span class="mdi mdi-thumb-up-outline"></span> Like</button>
<button class="btn btn-round waves-effect btn-default btn-raised btn-comment"><span class="mdi mdi-comment-text-outline"></span> Comment</button>
</div>
</div>
</div>
</div>`
I'm not sure that pasted correctly, but the should apply those CSS profiles that I have, but when I run the cope, the HTML shows up raw and un-styled. Does anyone know why?
EDIT: here is what I am getting, and here is what it SHOULD look like.

Answer 1

Did you make sure to include the CSS files for bootstrap?
Even if you give the html elements bootstrap classes you still need to load bootstrap in order for the styling to work.
In the example below I loaded bootstrap using this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
You may or may not want to do the same.
There many ways to include bootstrap files with your html.
I didn't edit your html. I only loaded bootstrap at the top.
Is this what you wanted?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul>
<li><span class="mdi mdi-bell"></span> Notifications</li>
<li class="seperator"></li>
<li><span class="mdi mdi-settings"></span> Settings</li>
<li><span class="mdi mdi-help-circle"></span> Help</li>
</ul>
<div class="col-md-6">
<div class="post-box">
<form id="post-activity">
<textarea name="content" class="post-input" placeholder="What's new, $session['user']['name']?"></textarea>
<button id="post-button" class="btn btn-info btn-raised waves-effect" type="submit"><span class="mdi mdi-send"></span> Post</button>
</form>
</div>
<div class="post-card">
<div class="header">
<div class="avatar"></div>
Adrian Bernat
</div>
<div class="content">
Test Content
</div>
<div class="footer">
<button class="btn btn-round waves-effect btn-default btn-raised btn-like"><span class="mdi mdi-thumb-up-outline"></span> Like
</button>
<button class="btn btn-round waves-effect btn-default btn-raised btn-comment"><span class="mdi mdi-comment-text-outline"></span> Comment
</button>
</div>
</div>