3

I want to change the border radius of the first div container that has class .container-fluid , how I can do that using bootstrap body's border radius in Bootstrap

payloc91
  • 3,724
  • 1
  • 17
  • 45
Manaf
  • 41
  • 1
  • 3
  • Since we can't debug the image you posted, post a minimal code snippet. (btw, I just tried with boostrap 3.3.7 and it works just fine) – Asons Jul 09 '17 at 11:10
  • i posted in a the comment below , here it is https://codepen.io/manafnn/pen/JJmMWG?editors=1100 – Manaf Jul 09 '17 at 17:20
  • Here it is with rounded corner: https://codepen.io/anon/pen/EXdGPq – Asons Jul 09 '17 at 18:12

2 Answers2

1

Wrap your content in <div> and apply border-radius to wrapper

UPD: Add following to your css code

body > .container-fluid:first-child {
    border-radius: 20px; //for example
}
Skribja
  • 161
  • 1
  • 5
  • Could you add a fiddle with an example please or at least edit you post with some code. – Core972 Jul 09 '17 at 09:42
  • hey thanks for the replay, I already had everything in devs i tried that with main one but unfortunately it dosen't work, i will put it – Manaf Jul 09 '17 at 09:43
  • With @Skribja code the `border-radius` apply right https://codepen.io/anon/pen/jwexrv?editors=1100 – Core972 Jul 09 '17 at 10:20
  • I tried to do all things with html and bootstrap and use a lettal of html but it seams that i cant do it with bootstrap. so thanks for the helping i apreceat it – Manaf Jul 09 '17 at 10:26
  • @Manaf https://v4-alpha.getbootstrap.com/utilities/borders/, but this is v4 – Skribja Jul 09 '17 at 10:28
0

Add this class to your custom css:

.rounded-xl {
  border-radius: 1.5rem;
}

and use it on your <row> elements in place of the usual bootstrap border class.

Example

<div class="row rounded-xl">
<div>
stevec
  • 41,291
  • 27
  • 223
  • 311