Include html fields in the title panel

Question

Include html fields in the title panel

Navigation

#1 by (5 votes)
#2 by (3 votes)

5

I'm using bootstrap, and I use a title panel at the beginning of the form, which informs the form name that I am, however in right I'd like to put in the case the current date if it is a new record, and the recorded date in the database if it is an edition, for example: Data: 11/09/2018 . But anyway I try, it is unconfigured, if I leave only the title that is Pedido Fornecedores is right, but by including the date it goes to the bottom line. I tried with divs but it also did not work, it follows what 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, it goes down the line, link .

html twitter-bootstrap

asked by anonymous 11.09.2018 / 20:39

2 answers

3

Since Hugo said it is semantically incorrect to use div within h , you can style the text with CSS instead, but if it is a structure that has to be this, you can put a row after h3 and a text-right class of the bootstrap itself to align the 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>

11.09.2018 / 21:11

SQL - UPDATE double with double where Why in PHP string can turn function?

score 5 · Accepted Answer

This happens because <h3> (actually any title element H ), is a block-scoped element, that is, it occupies 100% of the width of the container , so as you have 2 elements <h3> can only be one per line, and the second ends up being on the bottom line.

Apart from this you have some semantic problems, such as div s within H3 . What is not correct ...

You can use the pull-right and pull-left classes of Bootstrap itself to align these texts. And building the Grid correctly, using a .ROW before the .COL- conforms to the documentation.

View the result of your structure with these settings.

	<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: Of course there may be other variations to work around this problem, but I made the option that I found most appropriate, considering BS documentation, Grid and semantics

Official Bootstrap Panel 3 Documentation: link