CODEWITHSUNDEEP
htmlcssbootstrap-4
Clueless
Clueless

Reputation: 71

Bootstrap button padding makes it appear like the button is going past the container border

Why does the "Subscribe now!" button go outside the container in the picture below and how can I make it so that the right edge lines up with the rest of the page? (column 12 in the bootstrap grid)

I have tried box-sizing: border-box but it had no effect.

My HTML code:

.container-fluid {
  padding: 0;
}

.carousel-inner .carousel-item h1 {
  font-weight: bold;
  font-size: 300%;
  /*-webkit-text-stroke:1px black;*/
  font-family: 'Open Sans', sans-serif;
  /*text-align:right;*/
}

.carousel-inner .carousel-item img {
  filter: brightness(50%);
}

#paddingrow {
  padding: 25px;
}

#paddingrowLarge {
  padding: 100px;
}

#accordionRightalign {
  float: right;
}

#mycard {
  float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row" id="paddingrow"></div>
  <div class="row">
    <div class="col-sm-12">
      <h1 style="text-align:center">SUBSCRIBE TO OUR NEWSLETTER</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <form>
        <div class="row">
          <div class="col">
            <input type="text" class="form-control" placeholder="Enter your email">
          </div>
          <button class="btn btn-primary" style="box-sizing: border-box" type="submit">Subscribe now!</button>
        </div>
      </form>
    </div>
  </div>
</div>
</div>

enter image description here

enter image description here

Upvotes: 0

Views: 1903

Answers (3)

Mrvs
Mrvs

Reputation: 94

Bootstrap rows have margin-right: -15px; margin-left: -15px; that's why the right edge doesn't lined up. Try to add mx-0 = margin-left:0 and margin-right: 0, a bootstrap class. In your nested row form.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row" id="paddingrow"></div>
  <div class="row">
    <div class="col-sm-12">
      <h1 style="text-align:center">SUBSCRIBE TO OUR NEWSLETTER</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <form>
        <div class="row mx-0">
          <div class="col pl-0 pr-3">
            <input type="text" class="form-control" placeholder="Enter your email">
          </div>
          <button class="btn btn-primary" style="box-sizing: border-box" type="submit">Subscribe now!</button>
        </div>
      </form>
    </div>
  </div>
</div>
</div>

Upvotes: 2

Clueless
Clueless

Reputation: 71

I noticed my button wasn't in the column div, so I made two column div's, one size 10 and one size 2, put input in the first, put the button in the second, and it seems to work now.

Here is the fixed code:

<div class="container">
           <div class="row" id="paddingrow"></div>
           <div class="row">
             <div class="col-sm-12">
               <h1 style="text-align:center">SUBSCRIBE TO OUR NEWSLETTER</h1>
             </div>
           </div>
           <div class="row">
              <div class="col-sm-12">
                <form class="form">
                  <div class="row">
                    <div class="col-sm-10">
                      <input type="text" class="form-control" placeholder="Enter your email">
                    </div>
                    <div class="col-sm-2">
                      <button class="btn btn-primary w-100" type="submit">Subscribe now!</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>

Upvotes: 0

hery
hery

Reputation: 32

Make sure col in the container with margin and padding to zero. Put your image into container with the width not greather than 100%.

Upvotes: 0

Related Questions