Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap Basics Building Forms With Bootstrap Custom Form Controls for Cross-Browser Consistency

Stefan Cutajar
Stefan Cutajar
7,747 Points
Posted by Stefan Cutajar
Stefan Cutajar
7,747 Points

Why I have around 1px white gutter in my modal header background?

For some reason I have around 1px of white background on the right side near the close button of the form modal that looks like it's coming from the parent div background. You can find my work space here -> https://w.trhou.se/2506req1un and click register now to lunch the modal. Any help will be appreciated thanks.

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Stefan Cutajar! The bottom line is, it's supposed to be that way. If you take a look at the Bootstrap source code available here you can take a look at their CSS. Inside the CSS file you will find this rule for the class "modal-content" (I'm adding comments to mark it):

.modal-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;

  /* this the line causing it */
  border: 1px solid rgba(0, 0, 0, 0.2);
  /*                                     */

  border-radius: 0.3rem;
  outline: 0;
}

This rule gives a border of white with an opacity of 0.2 where 0 is completely transparent and 1 is entirely opaque.

Hope this helps! :sparkles:

Stefan Cutajar
Stefan Cutajar
7,747 Points
Stefan Cutajar
Stefan Cutajar
7,747 Points

Thanks a lot very well explained I understand now.