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

Question

I’m trying to create a header with information to the right, a logo in the center and information to the left, but what I did is not even close to what I need, I did some tests with some lines I found in the OS but it was very badly formatted by me.

My version of Bootstrap that’s the one: Bootstrap v3.3.4

What I need is this:

I know semantically it’s not cool to use tables, but even that I tried, what I’ve done so far is this:

.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

Answer 1

The structure you have set up for HTML in your top bar has some organizational errors. For example you should not use a container into each other, and the way you’ve divided the rows and cols didn’t get cool.

I try to use as much of your code and some classes of flexbox, only to adjust the content within the col-

See how the result turned out.

.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 the Snippet I put everything in one line, even on small screens. However, you need to treat this part so that the responsiveness is cool for you ok. You can use media querys for this or use classes from the Bootstrap grid itself...
You can check this out https://getbootstrap.com/docs/3.3/css/#grid-example-Mixed

Answer 2

You can use a structure similar to:

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

Where the left and right part will have the property flex-grow: 0 so that they do not increase in size automatically to fill in 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>