Blog

This blog post will explain how to add borders to columns with Bootstrap. Bootstrap is a framework used for developing responsive web sites. Css code will be used to create a rounded border. Designate an area inside the html file to place custom css in. The css code below is needed. The style tag will be enclosed to contain the custom css code. Css properties such as border and border-radius will be used to create the border. The padding and margin properties position content inside a pane class and space them out when displaying them. The text color will be set to black also.

<!-- Custom CSS -->
<style>
.pane
{
border: 2px solid blue;
border-radius:7px;
padding:10px;
margin:5px;
color:black;
}
</style>

Here is the Bootstrap code. A div element is declared with the class container-fluid. Another div element is declared with the class row. That element will contain three div elements with the class col-sm-4. In each of those, there is a div element with the class pane. That is the element that uses the custom css code. When the page is displayed, there will be three boxes in a row.

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">
	<div class="pane">
      <h3>Column 1</h3>
	</div>
	</div>
	<div class="col-sm-4">
	<div class="pane">
      <h3>Column 2</h3>
	</div>
	</div>
	<div class="col-sm-4">
	<div class="pane">
      <h3>Column 3</h3>
	</div>
	</div>
  </div>
</div>