84

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?

2
  • check this recently i tried left squared right rounded , hope helps someone
    – Shaiju T
    Feb 28, 2015 at 11:48
  • I'm assuming that by 'predefined classes', you just want to add a class to your <header> and give it rounded corners, and generally make it look bootstrappy. Here's how: stackoverflow.com/a/29383075/1450294 Apr 1, 2015 at 4:53

9 Answers 9

94

<div class="img-rounded"> will give you rounded corners.

2
  • 15
    @EdwardRuchevits No. It works just fine on divs too. I don't like using it because it's a bit confusing, but it does work. Mar 12, 2014 at 11:24
  • If it's not an image, it's likely a panel, and there's a syntactically correct class for that, too: stackoverflow.com/a/29383075/1450294 Sep 8, 2016 at 17:23
68

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);
}
5
  • 6
    So, I have to use less for that and it's impossible with bootstrap.css? Aug 23, 2012 at 3:06
  • Bootstrap3 does not have such a mixin.
    – Kolyunya
    May 23, 2014 at 19:57
  • 1
    The question asked for 'predefined classes'—you're creating classes here. See this answer for the predefined classes: stackoverflow.com/a/29383075/1450294 Apr 1, 2015 at 4:52
  • Each of the Bootstrap 3 shortcut mixins (.border-top-radius, .border-right-radius, etc.) round 2 corners, so you can round all 4 via a .border-radius mixin using only left and right, or top and bottom. You can also round 3 corners via the appropriate combination, e.g. top and left will round bottom-left, top-left, and top-right. Jun 4, 2015 at 7:56
  • Chrome gives a malware warning for that blogsh.de site
    – stef
    Aug 24, 2017 at 19:35
17

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.

6
  • 8
    Yes, sure. :) Just don't want to invent bicycle. Aug 23, 2012 at 4:13
  • 8
    you mean re-invent the wheel :) Feb 12, 2013 at 13:55
  • 53
    Inventing the bicycle would be awesome.
    – OpenCoderX
    May 8, 2013 at 0:31
  • 3
    Is this bike-shedding about bike wheel analogies? #humour
    – fcar
    Sep 18, 2014 at 8:25
  • I think the concern is what happens when the bicycle gets pimped up—he wants his widget to still fit. (I mean this in all seriousness, even though it may sound a bit sus. 😏) The problem with directly manipulating CSS is that it might not suit the overall theme, especially if the theme changes, e.g. with a plug-in or Bootstrap update. I would argue that using an appropriate CSS class is no more 'lazy' than using an appropriate constant in code, instead of typing a magic number. Sep 8, 2016 at 17:22
10

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

10

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.

8

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>
6

With bootstrap4 you can easily do it like this :-

class="rounded" 

or

class="rounded-circle"
0

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);
}
0

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 tag of the three is the same as the first tag in the first link path.

A full working example, could be :

<img src="path/to/my/image/image.jpg" width="150" height="150" class="rounded-circle mx-auto">

In the above example, the image is centered by using the Bootstrap auto margin on left and right.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.