I need to make this header exactly like the image below. With the text in the center and the 2 images on each side. I've tried everything and the only way I had success was making the hole header into a whole image (not good). By the way, it needs to be responsive to mobile access, as the whole page is (I'm using bootstrap). Here is my whole code (I guess the only important part is the `<header>` though):

```
<body>           
        <header>
            <div class="row">
                <div class="col-sm-2 col-xs-1"></div>
                <div class="col-sm-8 col-xs-10">

                    <img class="img-responsive logoheader" src="files/Screenshot_1.png" alt=""/>

                </div>
                <div class="col-sm-2 col-xs-1"></div>
            </div>
        </header>
        <div class="jumbotron">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-3 col-xs-1"></div>
                <div class="col-sm-6 col-xs-10">
                    <center>

                    <h4>INSCRIÇÕES PARA EDUCAÇÃO INFANTIL - 0 ATÉ 5 ANOS</h4>
                    <h5>DECRETO 122/2017</h5>
                    </center>
                    <br>
                    <div id="dangerindex" class="alert alert-danger" style="display:none;"> </div>
                    <div id="warningindex" class="alert alert-warning" style="display:none;"> </div>
                    <form name="main-form" id="main-form" method="post" action="index2.php">
                        <label> NOME COMPLETO DA CRIANÇA:*</label>    
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input maxlength="100" onblur="this.value=this.value.toUpperCase()" type=text name="crianca-nome" id="criancaNome" value="" class="form-control" />
                        </div>
                        <label> DATA DE NASCIMENTO DA CRIANÇA:*</label>

                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                            <input readonly style="background-color: white !important;" type="text" name="crianca-nascimento" id="crianca-nascimento" class="form-control datepicker">
                        </div>
                        <button class="btn btn-primary visible-md  visible-lg" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button>
                        <button class="btn btn-primary btn-block visible-sm visible-xs" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button>
                    </form>

</body>

```

As you can see, the header is just a screenshot of what I want. How can I make it properly with CSS?

Here is the image (Screenshot\_1.png): 

[![enter image description here](https://i.stack.imgur.com/LIwgc.png)](https://i.stack.imgur.com/LIwgc.png)

And this is how my page looks like right now:

[![enter image description here](https://i.stack.imgur.com/GzIRK.png)](https://i.stack.imgur.com/GzIRK.png)