Correct way to create rounded corners in Twitter Bootstrap
Twitter BootstrapLessCssTwitter Bootstrap Problem Overview
I've just started with Twitter Bootstrap and here is one question.
I am creating custom <header>
block, and I want it's bottom corners to be rounded.
Is there any "correct" way to do this by using predefined classes, or I have to specify it manually like:
border-radius: 10px; // and all that cross-browser trumpery
For now, I'm using css
styles. Maybe it will be better to use less
for that issue?
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
<div class="img-rounded">
will give you rounded corners.
Solution 2 - Twitter Bootstrap
I guess it is what you are looking for: http://blogsh.de/tag/bootstrap-less/
@import 'bootstrap.less';
div.my-class {
.border-radius( 5px );
}
You can use it because there is a mixin:
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
For Bootstrap 3, there are 4 mixins you can use...
.border-top-radius(@radius);
.border-right-radius(@radius);
.border-bottom-radius(@radius);
.border-left-radius(@radius);
or you can make your own mixin using the top 4 to do it in one shot.
.border-radius(@radius){
.border-top-radius(@radius);
.border-right-radius(@radius);
.border-bottom-radius(@radius);
.border-left-radius(@radius);
}
Solution 3 - Twitter Bootstrap
Bootstrap is just a big, useful, yet simple CSS file - not a framework or anything you can't override. I say this because I've noticed many developers got stick with BS classes and became lazy "I-can't-write-CSS-code-anymore" coders [this not being your case of course!].
If it features something you need, go with Bootstrap classes - if not, go write your additional code in good ol' style.css
.
To have best of both worlds, you may write your own declarations in LESS and recompile the whole thing upon your needs, minimizing server request as a bonus.
Solution 4 - Twitter Bootstrap
As per bootstrap 3.0 documentation. there is no rounded corners class or id for div tag.
you can use circle behavior for image by using
<img class="img-circle">
or just use custom border-radius
css3 property in css
for only bottom rounded coner use following
border-bottom-left-radius:25%; // i use percentage u can use pix.
border-bottom-right-radius:25%;// i use percentage u can use pix.
if you want responsive circular div then try this
referred from Responsive CSS Circles
Solution 5 - Twitter Bootstrap
What you want is a Bootstrap panel. Just add the panel
class, and your header will look uniform. You can also add classes panel panel-info
, panel panel-success
, etc. It works for pretty much any block element, and should work with <header>
, but I expect it would be used mostly with <div>
s.
Solution 6 - Twitter Bootstrap
Without less, ans simply for a given div :
In a css :
.footer {
background-color: #ab0000;
padding-top: 40px;
padding-bottom: 10px;
border-radius:5px;
}
In html :
<div class="footer">
<p>blablabla</p>
</div>
Solution 7 - Twitter Bootstrap
With bootstrap4 you can easily do it like this :-
class="rounded"
or
class="rounded-circle"
Solution 8 - Twitter Bootstrap
If you're using Bootstrap Sass, here's another way that avoids having to add extra classes to your element markup:
@import "bootstrap/mixins/_border-radius";
@import "bootstrap/_variables";
.your-class {
$r: $border-radius-base; // or $border-radius-large, $border-radius-small, ...
@include border-top-radius($r);
@include border-bottom-radius($r);
}
Solution 9 - Twitter Bootstrap
In Bootstrap 4, the correct way to border your elements is to name them as follows in the class list of your elements:
For a slight rounding effect on all corners; class="rounded"
For a slight rounding on the left; class="rounded-left"
For a slight rounding on the top; class="rounded-top"
For a slight rounding on the right; class="rounded-right"
For a slight rounding on the bottom; class="rounded-bottom"
For a circle rounding, i.e. your element is made circular; class="rounded-circle"
And to remove rounding effects; class="rounded-0"
To use Bootstrap 4 css files, you can simply use the CDN, and use the following link in the of your HTML file:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
This will provided you with the basics of Bootstrap 4. However if you would like to use the majority of Bootstrap 4 components, including tooltips, popovers, and dropdowns, then you are best to use the following code instead:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Alternatively, you can install Bootstrap using NPM, or Bower, and link to the files there.
*Note that the bottom