Correct way to create rounded corners in Twitter Bootstrap

Question

I ve just started with Twitter Bootstrap and here is one question   I am creating custom  lt header gt  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

User · Answer

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

User · Answer

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  lt header gt   but I expect it would be used mostly with  lt div gt s

User · Answer

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

User · Answer

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      lt div class  footer  gt           lt p gt blablabla lt  p gt         lt  div gt

User · Answer

lt div class  img-rounded  gt  will give you rounded corners

User · Answer

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    lt script src  https   stackpath bootstrapcdn com bootstrap 4 1 3 js bootstrap min js  integrity  sha384-ChfqqxuZUCnJSK3 MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW JmZQ5stwEULTy  crossorigin  anonymous  gt  lt  script gt    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    lt script src  https   code jquery com jquery-3 3 1 slim min js  integrity  sha384-q8i X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo  crossorigin  anonymous  gt  lt  script gt   lt 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  gt  lt  script gt   lt script src  https   stackpath bootstrapcdn com bootstrap 4 1 3 js bootstrap min js  integrity  sha384-ChfqqxuZUCnJSK3 MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW JmZQ5stwEULTy  crossorigin  anonymous  gt  lt  script gt    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     lt img src  path to my image image jpg  width  150  height  150  class  rounded-circle mx-auto  gt    In the above example  the image is centered by using the Bootstrap auto margin on left and right

User · Answer

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

User · Answer

With bootstrap4 you can easily do it like this  - class  quot rounded quot    or class  quot rounded-circle quot

User · Answer

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       lt img class  img-circle  gt     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

[twitter-bootstrap] Correct way to create rounded corners in Twitter Bootstrap

Examples related to twitter-bootstrap

Examples related to less

Examples related to css