CODEWITHSUNDEEP
twitter-bootstrapborderrounded-corners
Zohar Chiprut
Zohar Chiprut

Reputation: 908

how to create borders with bootstrap 3 border class

I use the class border-* of bootstrap, but can't see the borders. 1. What am I missing ? 2. Where do I change the thikness of the border ? 3. Why there is a silght gap, the white spot between the cells in the outcoume result of the following code ? 4. I used the class rounded-0 and it still seams to be exists, why ?

Thanks un advance for any help.

div {
height: 50px;
}
    <!-- Jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- BootStrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!-------------------------------------------------------------------------->
    <div class="container-fluid row">
      <h1 class = 'page-header'>
      Why the borders are not visible ?
      </h1>
      <h5>And why the radius box is still rounded if the class is rounded-0 ?</h5>
    		<div class='btn btn-primary rounded-0 col-xs-4'></div>
    		<div class='btn btn-primary rounded-0 col-xs-4 border-top-0'></div>
    		<div class='btn btn-primary rounded-0 col-xs-4 '></div>
    		<div class='btn btn-primary rounded-0 col-xs-4 border-left-0'></div>
    		<div class='btn btn-primary rounded-0 col-xs-4 '></div>
    		<div class='btn btn-primary rounded-0 col-xs-4  border-right-0'></div>
    		<div class='btn btn-primary rounded-0 col-xs-4'></div>
    		<div class='btn btn-primary rounded-0 col-xs-4 border-bottom-0'></div>
    		<div class='btn btn-primary rounded-0 col-xs-4'></div>
    	</div>

Upvotes: 2

Views: 15903

Answers (2)

Nielsvh
Nielsvh

Reputation: 1219

The documentation you're looking at appears to be version 4.0+, but the version of bootstrap included in your example is 3.3.7. Those utility types are not available in version 3. If you were to upgrade your reference, you'd be able to use those utilities.

This appears to be the documentation you are using: https://getbootstrap.com/docs/4.0/utilities/borders/

This is the documentation for your version: https://getbootstrap.com/docs/3.3/components/

Upvotes: 3

Dominik
Dominik

Reputation: 87

I just looked in file Bootstrap.css for 'border-top-0', 'border-right-0' ... Those classes are not given in Bootstrap although it is written in Bootstrap docu. But maybe you could create those classes by yourself.

for example:

.border-top-0{
    border-style: solid;
    border-top: none;
}

and to set the border width: border-width: 1px;

Upvotes: 1

Related Questions