MarcKamm MarcKamm - 3 months ago 8
CSS Question

Bootstrap Align Element

I want to stick an element to the left of its cell in bootstrap but have no idea on how to do it (and tried every possible solution the web offers).
It looks pretty good when the screen is big enough:

big

but the right arrows wont stick to the label left to them when the screen gets smaller:

small



body {
font-size: 13px;
font-family: Lato;
letter-spacing: 0.015em;
word-spacing: 0.03em;
line-height: 1.5em;
background: linear-gradient(rgba(95, 102, 116, 0.8), rgba(73, 80, 95, 0.41)), url("images/carbon_fibre.png");
background-attachment: fixed;
}
.textLabel {
font-size: 15px;
padding: 8px;
background-color: blue;
}
}

<div class="container-fluid">
<div id="row1" class="row text-center">

<!--- Position X--->
<div class="col-md-5 col-md-offset-1 col-sm-5 col-sm-offset-1 col-xs-5 col-xs-offset-1">
<div class="col-md-2 col-sm-2 col-xs-2">
<button id="PositionXdec" class="btn btn-default">&#x276E;</button>
</div>
<div class="col-md-8 col-sm-8 col-xs-8">
<p class="text-center textLabel" id="positionX">X</p>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<button id="PositionXinc" class="btn btn-default">&#x276F;</button>
</div>
</div>

<!--- Rotation X --->
<div class="col-md-5 col-xs-5">
<div class="col-md-2 col-sm-2 col-xs-2">
<button id="RotationXdec" class="btn btn-default">&#x276E;</button>
</div>
<div class="col-md-8 col-sm-8 col-xs-8">
<p class="text-center textLabel" id="RotationX">RX</p>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<button id="RotationXinc" class="btn btn-default text-left">&#x276F;</button>
</div>
</div>

</div>
</div>




Answer

when nesting columns in bootstrap you need to add .row between .col-*-*

EDIT

After adding your CSS, you may need to add col-xs-offset to your middle div

NOTE

if you going to have the same col behavior from xs to md/lg, then you can just use the xs class

body {
  font-size: 13px;
  font-family: Lato;
  letter-spacing: 0.015em;
  word-spacing: 0.03em;
  line-height: 1.5em;
  background: linear-gradient(rgba(95, 102, 116, 0.8), rgba(73, 80, 95, 0.41)), url("images/carbon_fibre.png");
  background-attachment: fixed;
}
.textLabel {
  font-size: 15px;
  padding: 8px;
  background-color: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div id="row1" class="row text-center">

    <!--- Position X--->
    <div class="col-xs-5 col-xs-offset-1">
      <div class="row">
        <div class="col-xs-2">
          <button id="PositionXdec" class="btn btn-default">&#x276E;</button>
        </div>
        <div class="col-xs-offset-1 col-xs-7">
          <p class="text-center textLabel" id="positionX">X</p>
        </div>
        <div class="col-xs-2">
          <button id="PositionXinc" class="btn btn-default">&#x276F;</button>
        </div>
      </div>
    </div>

    <!--- Rotation X --->
    <div class="col-xs-5">
      <div class="row">
        <div class="col-xs-2">
          <button id="RotationXdec" class="btn btn-default">&#x276E;</button>
        </div>
        <div class="col-xs-offset-1 col-xs-7">
          <p class="text-center textLabel" id="RotationX">RX</p>
        </div>
        <div class="col-xs-2">
          <button id="RotationXinc" class="btn btn-default text-left">&#x276F;</button>
        </div>
      </div>
    </div>

  </div>
</div>

Comments