Include html fields in the title panel

Asked

Viewed 188 times

5

I’m using bootstrap, and I use a panel title at the beginning of the form, which informs the name of the form I’m in right I would like to put in the case the current date if it is a new registration, and the date saved in the bank if it is an edition, example: Data: 11/09/2018. But in every way I try, it gets disfigured, if I leave only the title that is Pedido Fornecedores is right, but when including the date it goes to the bottom line. I tried with divs but it didn’t work either, it goes as I’m trying to do:

 <div class="panel panel-default" style="margin-top:60px">
    <div class="panel-heading">
        <h3 class="panel-title"> <div class="col-md-4">Pedido Fornecedor</div> <div class="col-md-8" style="text-align:right">Data</div><br /></h3>
    </div>
    </div>

As you can see, he goes down the line, link.

html twitter-bootstrap

2 answers

5


It happens because the <h3> (in fact any element of title H), is an element with block scope, that is, it occupies 100% of the width of the container, then as you have 2 elements <h3> can only stay one per line, and the second ends up staying at the bottom line.

Other than that you have some semantic problems, like divs within a H3. What is not right...

You can use the classes pull-right and pull-left from Bootstrap itself to align these texts. And build the Grid in the correct way, using a .ROW before the .COL- conforms to the documentation.

See the result of your structure with these adjustments.

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

<div class="container">
	<div class="panel panel-default" style="margin-top:60px">
		<div class="panel-heading">
			<div class="row">
				<div class="col-xs-12">
					<h3 class="pull-left">título</h3>
					<h3 class="pull-right">data</h3>
				</div>
			</div>
		</div>
		<div class="panel-body">
			Panel content
		</div>
	</div>
</div>

OBS: Logically there may be other variations to circumvent this problem, but I made the option that I found more appropriate, considering the documentation of BS, Grid and semantics

Official Bootstrap 3 Panel Documentation: https://getbootstrap.com/docs/3.3/components/#panels

  • Thanks again.!!!

  • @marianac_costa without problems =)

3

As Hugo said, it’s semantically incorrect to use div inside h, you can style the text with CSS instead, but if it’s a structure that has to be this, you can put a Row after the H3 and a class text-right bootstrap itself to align text:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">


<div class="panel panel-default" style="margin-top:60px">
   <div class="panel-heading">
      <h3>
         <div class="row">
           <div class="col-xs-7">Pedido Fornecedor</div>
           <div class="col-xs-5 text-right">Data</div>
        </div>
      </h3>
   </div>
   <div class="panel-body">
      Panel content
   </div>
</div>

Browser other questions tagged html twitter-bootstrap

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