CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
MK-DK
MK-DK

Reputation: 1085

Position og bootstrap buttons in gridblocks

I am making a website there is built up in blocks. The block elements is updated with different content every day. On the previous website I used so much time position buttons everytime I made a new block (website not made with bootstrap).

I would now like to have the possibility to position a button much more faster. The button should have the possibility be positioned 4 places. Example in column 5:

Example image

Is it possible to make 4 different css classes, so when I make a new block I can call fx the class: btn-right, btn-middle, btn-left, btn-middle-up - no matter how big the block element is? On the above picture, a block can have a lot of different sizes, and there is more to come.

Link to the whole code

I tried to place the button, but I can see this is not correct?

<div class="row">
    <div class="col-sm-4 small-padding right">
        <div class="content">
            <button type="button" class="btn btn-success fixed-bottom" id="right-panel-link">Read more</button>
        </div>
    </div>
    <div class="col-sm-8 small-padding left">
        <div class="content"></div>
    </div>
</div>

button {
        margin-top: 250px;
        margin-left: 260px; 
    }

Upvotes: 1

Views: 811

Answers (2)

fnostro
fnostro

Reputation: 4591

One solution would be to style content and the sidebar-* divs as position: relative; and style the buttons using relative positioning. Container size should not matter this way.

EDIT

I modified the snippet to use (most) of your bootply html and css.
I don't know if you are using BS3 or 4 so I'm using 4 and as such removed all your margins and replaced with BS4 spacing classes.

I also removed the specialized margins so you can see how the relative button positions work before you alter the default BS margins. You may need to adjust the relative positioning accordingly for your needs.

.btn-bottom-left,
.btn-bottom-right,
.btn-bottom-center,
.btn-center {
  position: absolute;
  margin: 5px;
}

.btn-bottom-left {
  bottom: 0;
  left: 0
}

.btn-bottom-right {
  bottom: 0;
  right: 0
}

.btn-bottom-center {
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

.btn-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* Global CSS*/

.content,
.sidebar,
.sidebar-top,
.sidebar-bottom {
  position: relative;
  background: #b4bac0;
  height: 300px;
}


/* When there is 2 columns on top of eachother */

.sidebar-top,
.sidebar-bottom {
  height: 150px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-4 small-padding right">
      <div class="content">
        <button class="btn btn-success btn-sm btn-bottom-right">Read more</button>
      </div>
    </div>
    <div class="col-sm-8 small-padding left">
      <div class="content">
        <button class="btn btn-success btn-sm btn-bottom-right">Read more</button>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-7 mt-4">
      <div class="content">
        <button class="btn btn-success btn-sm btn-bottom-left">Read more</button>
        <button class="btn btn-success btn-sm btn-bottom-center">Read more</button>
        <button class="btn btn-success btn-sm btn-bottom-right">Read more</button>
        <button class="btn btn-success btn-sm btn-center">Read more</button>
      </div>
    </div>
    <div class="col-sm-5 mt-4">
      <div class="row">
        <div class="col-sm-12">
          <div class="sidebar-top">
            <button class="btn btn-success btn-sm btn-bottom-right">Read more</button>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 mt-4">
          <div class="sidebar-bottom">
            <button class="btn btn-success btn-sm btn-bottom-right">Read more</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Jon Luke
Jon Luke

Reputation: 31

An option that you have is to wrap the button in a div and position them using display:flex;

.button-wrapper { display:flex;min-height:inherit;width:100%; }
.button-wrapper.left { justify-content:left;align-items:flex-end;padding:10px; }
.button-wrapper.center { justify-content:center;align-items:center;}

<div class="button-wrapper left">
    <button type="button" class="btn btn-success fixed-left" id="right-panel-link">Read more</button>
</div>

https://codepen.io/donjuantonxv/pen/vaEvjG

You can read more on positioning items here.

Upvotes: 1

Related Questions