CODEWITHSUNDEEP
csstwitter-bootstrap
Robert
Robert

Reputation: 259

Using Bootstrap Panel - How do I put form next to title?

I have tried at least three proposed solutions from searching on this site, but nothing worked. I got close, but was getting cheated on the panel defeault backround color. For some reason, the background wasn't showing its full height behind my elements. I want to put a form next to the heading. Here is what I have tried.

<div class="panel panel-default">
    <div class="panel-heading">

      <div class="no-wrap">
        <h3 class="panel-title">My Title</h3>
      </div>

      <div class="no-wrap">
          <form>
            <div class="form-group">  
              <select class="form-control" id="sel1">
              <option>1</option>
              <option>2</option>    
              </select>
            </div>
          </form>   
      </div> 

</div> <!-- end panel-heading -->

<div class="panel-body">
    Body Text    
</div>

</div> <!-- end panel -->

All the class you see are bootstrap EXCEPT no-wrap. My css for no-wrap is 

.no-wrap {
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
 }

So this was my most hopeful solution but it still doesn't work. The form sits below the h3.

I also tried using bootstrap columns inside the panel heading, but that's when the default gray background got obscured.

How can I get this form next to the h3 - all inside the panel heading?? Please note, you can assume that there is plenty of screen width. 99.9% of users will be using a laptop to access this page. The panel is being used to display business reports. Mobile responsiveness is not a priority.

Below is screenshot of what I do NOT want. I want the input form next to the heading.

Below is screenshot of what I do NOT want. I want the input form next to the heading.

Upvotes: 0

Views: 619

Answers (2)

ridoansaleh
ridoansaleh

Reputation: 624

You can try this one. You just need to include GRID OF BOOTSTRAP in your code such as col-xs-* , col-sm-* , col-md-* , col-lg-*. Don't need custom css in your case. You could ask me for further question as well. 

<HTML>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <div class="panel panel-default">
    <div class="panel-heading">

      <div class="row">
        <div class="col-xs-4 col-md-6 col-lg-6">
          <h3 class="panel-title">My Title</h3>
        </div>

        <div class="col-xs-8 col-md-6 col-lg-6">
          <form>
            <div class="form-group">
              <select class="form-control" id="sel1">
                <option>1</option>
                <option>2</option>    
              </select>
            </div>
          </form>
        </div>
      </div>

    </div>
    <!-- end panel-heading -->

    <div class="panel-body">
      Body Text
    </div>

  </div>
  <!-- end panel -->
</body>
</HTML>

Upvotes: 0

jkythc
jkythc

Reputation: 430

Use display: flex;

Demo jsfiddle

Upvotes: 1

Related Questions