none
Imagem lado a lado com botões no Bootstrap responsivo RRS feed

  • Pergunta

  • Eu gostaria de deixar uma logo lado a lado com botões no Bootstrap necessitando ser responsivo. Abaixo segue um extrato do código onde está a dúvida em questão. E mais abaixo está como fica eu preciso que os botões fiquem na mesma altura da logo.

        

    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
       <link rel="stylesheet" href="css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style_general.css">
       <link rel="stylesheet" href="w3/w3.css" rel="stylesheet"/>  
    </head>
    <body>

      <div class="container">



     <img src="img/logo_dism.png" class="img-responsive" alt="Logo">
    <div class="col-12 col-md-12 text-center">



      <div class="btn-group" role="group" aria-label="Basic example">
      <a href="index.php" class="btn btn-primary btn-lg">Home</a>
      <a href="sobre.php" class="btn btn-primary btn-lg">Sobre Nós</a>
      <a href="login.php" class="btn btn-primary btn-lg">Login</a>
    </div>
    </div>

    ---------------------------------------------------------------------------------------------------

    terça-feira, 16 de abril de 2019 14:52

Respostas

  • Olá, Rafael! O caminho é mais ou menos esse:

    <div class="row">
    	<div class="col-md-4 col-sm-4 col-xs-12">
    	        <img src="img/logo_dism.png" class="img-responsive" alt="Logo">
    	</div>
    	<div class="col-md-4 col-sm-4 col-xs-12 text-center">
    		<div class="btn-group" role="group" aria-label="Basic example">
    			<a href="index.php" class="btn btn-primary btn-lg">Home</a>
    			<a href="sobre.php" class="btn btn-primary btn-lg">Sobre Nós</a>
    			<a href="login.php" class="btn btn-primary btn-lg">Login</a>
    		</div>
    	</div>
    </div>
    Tentei colocar a tag <br> para centralizar verticalmente, mas não ficou certinho! Há vários artigos com várias implementações sobre como alinhar verticalmente, mas os que vi não funcionaram, infelizmente :/


    “First do it, then do it right, then do it better.”

    terça-feira, 16 de abril de 2019 19:45