Help with bootstrap layout

Asked

Viewed 128 times

1

How can I put below the bootstrap navbar a bar that has a vertical line and two components filter on the right.

Follow below the image of how I want:

inserir a descrição da imagem aqui

and how is:

inserir a descrição da imagem aqui

Follow the html code:

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title></title>

  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <nav class="navbar navbar-inverse navbar-static-top" id="menu">

        <ul class="nav navbar-nav" >
          <li><a href="">EA TOOLS</a></li>
          <li><a href="">Capabilities</a></li>
          <li><a href="">Aplications</a></li>
          <li><a href="">Components</a></li>
          <li><a href="">Integrations</a></li>
        </ul>
        <ul style="padding-right:15px;" class="nav navbar-nav navbar-right">
          <li>
            <a href="#" >
              Andreia Azeredo
              <span ><img src="img/imagem.png" ></span>
            </a>
          </li>
        </ul>
  </nav>
  <div class="container-fluid" style="padding:0">
    <ol class="breadcrumb">
      <li><img src="img/filtro.png" ></li>
      <li><img src="img/barra.png" ></li>
      <li ><img src="img/opcao.png" ></li>
    </ol>
   </div>
    <div class="container-fluid" ">
    <div class="row ">
      <div class="col-md-6">
        <h3>Strategy Vision and Planning Enterprise ...</h3>
         <h5>It includes a ability to plan and define the company strategy to achive the </h5>
         <h5>objetives proposed to acord this mission, vision and values</h5>
         <br>
      </div>

    </div>
    <div class="row ">
     <div class="col-sm-3"><button type="button" class="btn btn-default mesmo-tamanho" >Enterprise Estrategic Planning</button></div>
     <div class="col-sm-3"><button type="button" class="btn btn-default mesmo-tamanho">Corporate Affairs</button></div>
     <div class="col-sm-3"><button type="button" class="btn btn-default mesmo-tamanho">Business and Research Development</button></div>
     <div class="col-sm-3"><button type="button" class="btn btn-default mesmo-tamanho"><a href="grid.html">Enterprise Goivernance Risk &</a> <br><a href="grid.html">Complyance</a></button></div>
     <div class="col-sm-3"><button type="button" class="btn btn-default mesmo-tamanho">Sustainability & EHS Management</button></div>
    </div>
 </div>

  <div class="container-fluid">


    <div class="row ">
      <div class="col-md-6">
        <h3>Mining Strategy Planning</h3>
         <h5>The ability to define a set of actions related to desire design of mine operations. it's</h5>
         <h5>prospecting activities, mining rigths managements, engineering and production planning</h5>
         <br>
      </div>

    </div>
    <div class="row ">
     <div class="col-sm-3"><button type="button" class="btn btn-default mesmo-tamanho">Prospecting</button></div>
     <div class="col-sm-3"><button type="button" class="btn btn-default mesmo-tamanho">Sampling</button></div>
     <div class="col-sm-3"><button type="button" class="btn btn-default mesmo-tamanho">Rights management</button></div>
     <div class="col-sm-3"><button type="button" class="btn btn-default mesmo-tamanho">Mine engineering management</button></div>
     <div class="col-sm-3"><button type="button" class="btn btn-default mesmo-tamanho">Mine Design and Project</button></div>
     <div class="col-sm-3"><button type="button" class="btn btn-default mesmo-tamanho">Production Planning</button></div>
     <div class="col-sm-3"><button type="button" class="btn btn-default mesmo-tamanho"><a href="grid.html">Reconciliation</a></button></div>
    </div>
 </div>



  <script src="js/jquery-2.2.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

</body>
</html>
twitter-bootstrap

1 answer

2


Instead of using a list, in this case try using a line(Row), something like this:

<div class="container-fluid" style="padding:0">
    
    <div class="row breadcrumb">
      <div class="col-md-10 text-right">
      	<img src="img/filtro.png" >
      </div>
      <div class="col-md-2 text-left">
      	<img src="img/barra.png" >
      	<img src="img/opcao.png" >
      </div>
    </div>

</div>

  • Do you know how I could make sure the contents of the button don’t get out of bounds?

  • You can define the content with the width:100% or if it is better to define a overflow:hidden on the button itself.

  • that’s right. thanks for the help.

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.