How to build header with logo to the center and left and right information

Question

How to build header with logo to the center and left and right information

Navigation

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

3

I'm trying to create a header with information on the right, a logo on the center and information on the left, but what I did not stay close to what I need, I did some tests with some lines that I found in the OS but it was very poorly formatted by me.

My version of Bootstrap is this: Bootstrap v3.3.4

What I need is this:

Iknowsemanticallyit'snotcooltousetables,butuntilthatItried,whatI'vedonesofaristhis:

.flex-parent {
    display: -webkit-flex;
    display: flex;
    width: 80%;
    height: 80%;
}

.col {
    -webkit-flex-direction: column; /* Safari 6.1+ */
    flex-direction: column;
}

.flex-child {
    width: 100%;
    height: 100%;    
}

<!-- TOP INFO -->
<div class="top_info">
	<!-- CONTAINER -->
	<div class="container">
		<div class="row">
			<div class="col-sm-3">        	
				<div class="flex-parent col">
					<div class="flex-parent">
						<div class="flex-parent">
							<div class="flex-child" align="center"><img src="https://rendamaislingerie.com.br/_imagens/user.fw.png"width="32" height="32" alt=""/></div>
						</div>
						<div class="flex-parent col">
							<div class="flex-child"><a href="minha-conta-login.php">Faça login</a></div>
							<div class="flex-child"><a href="cadastro-cliente.php">ou Cadastre-se</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-6" align="center"><a href="index.php"><img src="_imagens/logo-rendamais.jpg" width="314" height="100" alt=""/></a></div>
			<div class="col-sm-3">        	
				<div class="container">
					<div class="row">
						<div class="col-sm-1" align="hight">ÍCONE</div>
						<div class="col-sm-3" align="left">FACEBOOK</div>
					</div>
					<div class="row">
						<div class="col-sm-1" align="left">ICONE</div>
						<div class="col-sm-3" align="left">INSTAGRAN</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- TOP INFO -->

The result of this can be seen online here: Developing page

css twitter-bootstrap bootstrap-3

asked by anonymous 21.09.2018 / 22:27

2 answers

How to finish executing the code in Python 3? Function that calculates the factorial of a number [closed]

score 2 · Answer 1

The structure that you have set up for HTML in your top toolbar has some organizational flaws. For example you should not use container inside the other, and the way you split rows and cols tb was not legal.

I try to use the maximum of your code and some classes of flexbox , just to adjust the content within col-

See how the result was.

.d-flex {
  display: flex;
}
.d-flex.end {
  /* alinga o conteúdo a direita da div */
  justify-content: flex-end;
}

  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

  <div class="container">
    <!-- TOP INFO -->
    <div class="top_info">
      <!-- CONTAINER -->
      <div class="container">
        <div class="row">
          <div class="col-xs-3">
            <div class="d-flex" >
              <img src="https://rendamaislingerie.com.br/_imagens/user.fw.png"width="32" height="32" alt=""/>
              <div>
                <a href="minha-conta-login.php">Faça login</a><br>
                <a href="cadastro-cliente.php">ou Cadastre-se</a>
              </div>
            </div>
          </div>
  
          <div class="col-xs-6 text-center">
              <a href="index.php">
                <img src="https://rendamaislingerie.com.br/_imagens/logo-rendamais.jpg"width="314" height="100" alt=""/>
              </a>
          </div>
          
          <div class="col-xs-3">
            <div class="d-flex end" >
                <div class="left text-right">
                  <img src="https://rendamaislingerie.com.br/_imagens/user.fw.png"width="16" height="16" alt=""/><br>
                  <img src="https://rendamaislingerie.com.br/_imagens/user.fw.png"width="16" height="16" alt=""/><br>
                  <img src="https://rendamaislingerie.com.br/_imagens/user.fw.png"width="16" height="16" alt=""/><br>
                  <img src="https://rendamaislingerie.com.br/_imagens/user.fw.png"width="16" height="16" alt=""/>
                </div>
                <div class="right text-left">
                  <div class="">ÍCONE</div>
                  <div class="">FACEBOOK</div>
                  <div class="">ICONE</div>
  						    <div class="">INSTAGRAN</div>
                </div>
            </div>
          </div>

        </div>
      </div>
  
    </div>
  </div>

OBS: Here in Snippet I put to get everything in one line, even on small screens. However, you need to treat this part so that responsiveness will be cool for you. You can use media querys for this or use classes from the Bootstrap grid itself ... You can check it here link

score 1 · Answer 2

You can use a structure similar to:

flex-container
├── flex-esquerda
├── flex-centro
└── flex-direita

Where the left and right side will have the property flex-grow: 0 so that they do not automatically increase to fill the parent element, and the center element will have flex-grow: 1 so that only its size increases.

.flex-container {
  width: 100%;
  display: flex;
  height: 100px;
  justify-content: middle;
  border: 1px solid #7FDBFF;
}

/* Centraliza conteúdo vertical e horizontalmente */
.flex-esquerda,
.flex-direita,
.flex-centro {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-esquerda,
.flex-direita {
  background: #7FDBFF;
  flex-basis: 100px; /* define um tamanho */
  flex-grow: 0; /* não permite que aumente automaticamente */
}

.flex-centro {
  flex-grow: 1; /* permite que aumente automaticamente */
}

<div class="flex-container">
  <div class="flex-esquerda">
    Esquerda
  </div>
  <div class="flex-centro">
    Centro
  </div>
  <div class="flex-direita">
    Direita
  </div>
</div>