7

I am just having fun building my own stuff with bootstrap. I am wondering what is the best way to add a border to a container with Bootstrap 3? I am having a hard time finding built in functionality in bootstrap and I am wondering what the best way to do it is for the code below if I want the text to be enclosed in a border.

<div class="container-fluid">
    <div class="row">
      <div class="col-md-12"><p class="text-center">Welcome.</p></div>
    </div>
</div>
Dave
  • 89
  • 1
  • 1
  • 6
  • What have you tried? (Your question will get closed because it doesn't show any research effort) – random_user_name Dec 19 '17 at 02:23
  • I ended up getting it to work. My other solutions were breaking the fluid nature of the containers. Not even sure why it was breaking honestly.

    Welcome.

    This was a fully working solution. I now regret even asking, when it was that simple. You can close this if you want to, but I do like the style sheet solution.     – Dave Dec 19 '17 at 02:34

1 Answers1

10

Well you could add the below to your css 

 .container-border{
 border: 1px solid #ccc;
 border-radius: 15px;  
 }

<div class="container-fluid container-border">
<div class="row">
  <div class="col-md-12"><p class="text-center">Welcome.</p></div>
</div>

And this would create a border around the text as desired.

Alternatively you could use .panel in Bootstrap (assuming you are using 3.x)

 <div class="panel panel-default">
  <div class="panel-body">
    <p class="text-center">Welcome.</p>
  </div>
 </div

https://jsfiddle.net/3wcvf8t4/4/

hylian
  • 550
  • 1
  • 4
  • 19