Bootstrap floating div in tab-menu - Photoshop

Gertsen
April 27, 2016
262 views
2 votes
3 Answers

I made a tab-menu using Bootstrap.

But I need some info placed in the right side of the page, on line with the tabs.

But I can’t seem to figure it out.

So far I end up with this:

What I need is this (Photoshopped to show what I need):

The demo markup is here:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body>
    <div class="container body-content">
        <div class="container-fluid">
            <div class="tabbable">
                <div>
                    This is a test <button class="btn btn-primary btn-xs" type="submit">Test button</button>
                </div>

                <ul class="nav nav-tabs" id="pageTabs">
                    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
                    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
                    <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
                    <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
                    <li><a href="#tab5" data-toggle="tab">Tab 5</a></li>
                    <li><a href="#tab6" data-toggle="tab">Tab 6</a></li>
                </ul>

                <div class="container">

                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">
                            <h4>Tab 1</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab2">
                            <h4>Tab 2</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab3">
                            <h4>Tab 3</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab4">
                            <h4>Tab 4</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab5">
                            <h4>Tab 5</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab6">
                            <h4>Tab 6</h4>
                            <p>Content</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Hope someone can help me in the right direction 🙂

Answers

You can do this:

.tabbable {
 position: relative;
}

.valign {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body>
   <div class="container body-content">
      <div class="container-fluid">
         <div class="tabbable">
            <div class='valign'>
               This is a test <button class="btn btn-primary btn-xs" type="submit">Test button</button>
            </div>
            <ul class="nav nav-tabs" id="pageTabs">
               <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
               <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
               <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
               <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
               <li><a href="#tab5" data-toggle="tab">Tab 5</a></li>
               <li><a href="#tab6" data-toggle="tab">Tab 6</a></li>
            </ul>
            <div class="container">
               <div class="tab-content">
                  <div class="tab-pane active" id="tab1">
                     <h4>Tab 1</h4>
                     <p>Content</p>
                  </div>
                  <div class="tab-pane" id="tab2">
                     <h4>Tab 2</h4>
                     <p>Content</p>
                  </div>
                  <div class="tab-pane" id="tab3">
                     <h4>Tab 3</h4>
                     <p>Content</p>
                  </div>
                  <div class="tab-pane" id="tab4">
                     <h4>Tab 4</h4>
                     <p>Content</p>
                  </div>
                  <div class="tab-pane" id="tab5">
                     <h4>Tab 5</h4>
                     <p>Content</p>
                  </div>
                  <div class="tab-pane" id="tab6">
                     <h4>Tab 6</h4>
                     <p>Content</p>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>

For reference, here is a good illustrative guide on layouts in CSS:

learnlayout.com

And here are two great guides on centering:

.clearfix:after {
  content: '';
  display: block;
  clear: both;
  }

.right-panel {
  padding-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body>
    <div class="container body-content">
        <div class="container-fluid">
            <div class="tabbable">
               <div class="clearfix">
                    <div class="right-panel pull-right">
                        This is a test <button class="btn btn-primary btn-xs" type="submit">Test button</button>
                    </div>

                    <ul class="nav nav-tabs pull-left" id="pageTabs">
                        <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
                        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
                        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
                        <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
                        <li><a href="#tab5" data-toggle="tab">Tab 5</a></li>
                        <li><a href="#tab6" data-toggle="tab">Tab 6</a></li>
                   </ul>
                </div>

                <div class="container">

                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">
                            <h4>Tab 1</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab2">
                            <h4>Tab 2</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab3">
                            <h4>Tab 3</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab4">
                            <h4>Tab 4</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab5">
                            <h4>Tab 5</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab6">
                            <h4>Tab 6</h4>
                            <p>Content</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Html:

<!DOCTYPE html>
<html>

  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container body-content">
        <div class="container-fluid">
            <div class="tabbable">



                <ul class="nav nav-tabs" id="pageTabs">
                    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
                    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
                    <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
                    <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
                    <li><a href="#tab5" data-toggle="tab">Tab 5</a></li>
                    <li><a href="#tab6" data-toggle="tab">Tab 6</a></li>
                    <li class="right"><div class="inner">This is a test <button class="btn btn-primary btn-xs" type="submit">Test button</button></div></li>
                </ul>

                <div class="container">

                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">
                            <h4>Tab 1</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab2">
                            <h4>Tab 2</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab3">
                            <h4>Tab 3</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab4">
                            <h4>Tab 4</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab5">
                            <h4>Tab 5</h4>
                            <p>Content</p>
                        </div>

                        <div class="tab-pane" id="tab6">
                            <h4>Tab 6</h4>
                            <p>Content</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

css:

.right {
  float:right !important;
  padding-top: 10px !important;
}

Here you have a working example of your code. Hope this helps:

https://plnkr.co/edit/s01bZi2OJc8xm2QlKuII?p=preview

Please signup or login to give your own answer.

Click here to cancel reply.

Bootstrap floating div in tab-menu – Photoshop

Answers