Put buttons to the bottom of the container

Question

Put buttons to the bottom of the container

Navigation

#1 by (1 votes)

1

I'm trying to put three buttons down all of the red div. I tried using position:relative bottom:0px; but it does not work.

body{

  text-align:center;

}

input{

    max-width:15%;

}

.pomodoro{

    background:#e54444;
    height:200px;
    color:white;

}

<div class="container-fluid">

    <div class="row">

        <div class="col-xs-6 col-xs-offset-2">

            <h2>Pomodoro Timer</h2>

        </div>

       <div class="col-xs-2">

           <img class="img-responsive"src="http://pomodoro.trevorlandau.net/images/pom.png" align="right" height="150" width="150"/>

       </div>

    </div>  

    <div class="row">

        <div class="col-xs-6 text-right"> 

            <h4>Work Time</h4>
            <input id="workT"type="number" min=1 name="work-time" value=25>

        </div>  

     <div class="restTime col-xs-6 text-left">

         <h4>Rest Time</h4>
         <input id="restT" type="number" min=1 name="res-time" value=5>
     </div> 


    </div>  
    <div class="pomodoro"> 

        <div class="action"></div>
        <div class="time"></div>

        <button id="startButton"class="btn btn-default">Start</button>  
        <button id="continueButton"class="btn btn-default">Continue</button>
        <button id="stopButton"class="btn btn-default">Stop</button>


    </div>

    </div>

css bootstrap

asked by Juan 29.11.2016 в 00:54

source

1 answer

Get and copy SQLite .db file on Android using ADB Sub-fix by template

score 1 · Accepted Answer

As a recommendation, I suggest that you group your buttons inside another div, in this case, I have called it contenedor (because it contains the buttons).

Next, you will have to assign the position relative to the red div by position: relative and absolute position to the container that we just created with position: absolute so that the container is positioned in relation to its element with position: relative nearest, in this case, the red div.

Finally, if you want to center your #contenedor within the red div you can use left: 0 and right: 0 so that the #contenedor appear centered horizontally inside the red div.

Your modified example:

body{
  text-align:center;
}

input{
    max-width:15%;
}

.pomodoro{
    position: relative;
    background:#e54444;
    height:200px;
    color:white;
}

#contenedor{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6 col-xs-offset-2">
            <h2>Pomodoro Timer</h2>
        </div>
       <div class="col-xs-2">
           <img class="img-responsive"src="http://pomodoro.trevorlandau.net/images/pom.png" align="right" height="150" width="150"/>
       </div>
    </div>  

    <div class="row">
        <div class="col-xs-6 text-right"> 
            <h4>Work Time</h4>
            <input id="workT"type="number" min=1 name="work-time" value=25>
        </div>  
     <div class="restTime col-xs-6 text-left">
         <h4>Rest Time</h4>
         <input id="restT" type="number" min=1 name="res-time" value=5>
     </div> 
    </div>  
  
    <div class="pomodoro"> 
        <div class="action"></div>
        <div class="time"></div>
        <div id="contenedor">
          <button id="startButton"class="btn btn-default">Start</button>  
          <button id="continueButton"class="btn btn-default">Continue</button>
          <button id="stopButton"class="btn btn-default">Stop</button>
        </div>
    </div>
    </div>