CODEWITHSUNDEEP
htmltwitter-bootstrap
Sara1982
Sara1982

Reputation: 3

Adding spacing between buttons in bootstrap on mobile version

I tried to look at other stack questions about adding spacing between columns in bootstrap, but I don't seem to find the right answer to my issue. Basically what i want is to have 2 buttons one at the far right and one at the far left on desktop/tablet (and I managed to do that) but then on mobile the buttons will have to go one below the other, will have to be centered and will need to have some space in between (and that's where I can't find a solution). Please note that I'm using an editor where I can add html and/or bootstrap code only, so any css will have to be in the html.

Here is the code I used so far:

<div class="raw">
<div class="col-md-6 col-sm-6 col-xs-6"><a class="btn btn-primary pull-left" href="">Becoming an au pair</a></div>

<div class="col-md-6 col-sm-6 col-xs-6"><a class="btn btn-primary pull-right" href="">Becoming a host family</a></div>
</div>

Thanks!

Upvotes: 0

Views: 2671

Answers (2)

Bioto
Bioto

Reputation: 1117

https://jsfiddle.net/m00durk3/

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6 col-xs-12 text-left">
            <div class="btn">
                Left Button
            </div>
        </div>
        <div class="col-sm-6 col-xs-12 text-right">
            <div class="btn">
                Right Button
            </div>
        </div>
    </div>
</div>

CSS:

.btn {
    background-color: lightblue;
}
@media screen and (max-width: 767px) {
    .btn {
        width: 100%;
        margin-bottom: 5px;
    }
}

So basically you need to use the grid to wrap the outermost columns. Once thats done you need to add a media query that changes the width of the buttons to fill the screen.

In the jsfiddle link make the html sections width bigger or smaller to see the changes take effect.

Edit: Full code showing how to put styles on the same page as the html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
      .btn {
          background-color: lightblue;
      }
      @media screen and (max-width: 767px) {
        .btn {
            width: 100%;
            margin-bottom: 5px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
          <div class="col-sm-6 col-xs-12 text-left">
              <div class="btn">
                  Left Button
              </div>
          </div>
          <div class="col-sm-6 col-xs-12 text-right">
              <div class="btn">
                  Right Button
              </div>
          </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

Sara1982
Sara1982

Reputation: 3

I actually managed to fix it with the following code. Thanks for putting me on the right track Bioto

<div class="row">
<div class="col-md-6 col-sm-6 text-left">
<div class="col-xs-12 text-center"><a class="btn btn-primary" href="https://kangaroo-staging.devguru.co/en/ireland/au-pair" style="margin-bottom:10px;">Becoming an au pair</a></div>
</div>

<div class="col-md-6 col-sm-6 text-right">
<div class="col-xs-12 text-center"><a class="btn btn-primary" href="https://kangaroo-staging.devguru.co/en/ireland/host-family" style="margin-bottom:10px;">Becoming a host family</a></div>
</div>
</div>

Upvotes: 0

Related Questions