center two buttons on bootstrap

Question

center two buttons on bootstrap

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm new and although I've been reading reviews of other threads, I do not exactly give what I'm looking for. I need to place two buttons in the middle of a div that occupies the whole screen, I'm doing it with bootstrap and I do not have much idea. it would be something like this,

My HTML code:

<div class="trans"> 
  <button class="btn btn-info btn-responsive btninter">Contacta</button>
  <button class="btn btn-info btn-responsive btninter right">Proyectos</button> 
</div> -----El div trans es simplemente para ubicarme----

My style:

.centerbtn{ 
    position:absolute; 
    width:100%; left:0;
    text-align:center;
    margin:auto;
    /*position: relative; top: 50%; transform: translateY(-50%) translateX(30%); width: 100%;*/
}

How can I do it?

bootstrap

asked by Kelian Borge 31.10.2016 в 18:14

source

2 answers

Create query with LIKE parameterized? (JAVA / UcanAccess) Migrating from an Oracle Database to SQL Server with the SQL Server Migration Assistant

score 1 · Answer 1

You can do it very simply using flexbox. For example, you put your div with class trans property display: flex; and justify your content to the center using justify-content: center; .

Example:

.trans{
  width: 400px;
  background-color: red;
  display: flex;
  justify-content: center;
}

<div class="trans"> 
  <button class="btn btn-info btn-responsive btninter centrado">Contacta</button>
  <button class="btn btn-info btn-responsive btninter right centrado">Proyectos</button> 
</div>

Important !!: In the CSS that you provide in your question, you put the styles in the class .centerbtn but you are not really associating it with any element. Be careful with this because if you do not associate it with any element it is as if that kind of CSS did not exist since it will not make any modification.

score 0 · Answer 2

Wrap the button in div with the "text-center" class.

<div class="text-center"> 
  <button class="btn btn-info btn-responsive btninter">Contacta</button>
  <button class="btn btn-info btn-responsive btninter right">Proyectos</button> 
</div>

EXAMPLE:

<!-- correcto -->
<div class="trans text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>