1

In my html with bootstrap 3 I have 3 columns defined in divs with col-xs- classes .

The first and third are lists. In the middle column I want to put a button that transfers elements from the first list to the third by jquery.

I would like the button to be in the middle of both lists and to be responsive. I have tried this but the button is not well centered in the middle and does not adapt well to the different widths of the screen.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-xs-3">
    ... list1 code
</div>
<div class="col-xs-3 ">
    <div class="contenedor-de-lista father" style="background-color: skyblue;">
        <div class="text-center">
              <button type="button" class="btn btn-default child"> > </button>
        </div>
    </div>
</div>
<div class="col-xs-6">
    ... list3 code
</div>

div{
    height: 50rem;
}

.contenedor-de-lista { 
  height: 50rem;
}

.father{
  position: relative;
}
.child {
  /* Center vertically and horizontally */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */
}

https://jsfiddle.net/JorgePalaciosZaratiegui/vn8sgrcq/18/

How can I make the button stay in the middle and fit the screen size as the bootstrap class col-md-x works.

Thanks in advance

Jorge Palacios Zaratiegui
  • 113
  • 1
  • 1
  • 14
  • 1
    `transform:translate(-50%,-50%)` instead of `margin: -25px 0 0 -25px;` Although i'd recommend the flex approach with auto margins – Rainbow Feb 15 '21 at 17:08

2 Answers2

1

#container{
display:flex;
justify-content:space-between;
align-items:flex-start;
}

.father{
display:flex;
flex-direction:column;
justify-content:center;
height:100vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id='container'>
<div >
    ... list1 code
</div>
<div >
  <div class="contenedor-de-lista father" style="background-color: skyblue;">
        
              <button type="button" class="btn btn-default child"> > </button>
        
    </div>
</div>
<div >
    ... list3 code
</div>

</div>
DCR
  • 14,737
  • 12
  • 52
  • 115
1

You could use flex to center element. I hav edited your code.

Added display: flex to the class .text-center

div{
    height: 50rem;
}

.contenedor-de-lista { 
  height: 50rem;
}

.father{
  position: relative;
}
.text-center{
  display:flex;
  justify-content:center;
  align-items:center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-xs-3">
    ... list1 code
</div>
<div class="col-xs-3 ">
    <div class="contenedor-de-lista father" style="background-color: skyblue;">
        <div class="text-center">
              <button type="button" class="btn btn-default child"> > </button>
        </div>
    </div>
</div>
<div class="col-xs-6">
    ... list3 code
</div>
krishna_ananth_vk
  • 339
  • 3
  • 6