Now with the header it worked. I need to create a second ROW (line) It will be 4 | 4 | 4 and should have one image, and the other 2 parts of text. But I have 2 doubts. The first one is, I do not know what I do to make the image smaller than the original size (for example: a 1920x1080 image takes up 200x200px space) and be responsive.
The other question is that the text is aligned next to it as in the Header the search form and the LOGOUT text are: Here is the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-inverse navbar-fixed-top" id="barranav">
<div class="col-sm-4 col-xs-4">
<img src="http://placecage.com/50/50"class="img-responsive" alt="Responsive image">
</div>
<!--<a href="" class="navbar-brand">TEST</a> interesante -->
<div class="col-sm-4 col-xs-4" style="text-align:center;">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
<div class="pull-right">
<div class="col-sm-4 col-xs-4" style="color:aliceblue;">LOGOUT</div>
</div>
</nav>
</div>
</div>
<div class="corpo">
<div class="row">
<div class="col-md-4">
<img src="panda2.jpg" class="img-fluid" alt="Responsive Image">
</div>
<div class="col-md-4"> TEXTO DIV 5 a 8</div>
<div class="col-md-4"> TEXTO DIV 9 A 12 </div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>