How do I remove the underline on the active tab? This is the codepen: https://codepen.io/centem/pen/XWmPbVa
I tried styling the .nav-link.active to no avail. Trying to make it look like actual folder tabs. Thank you.
<div class="container"
<div class="row row-content">
<div class="col-12">
<h2>Charts</h2>
<ul class="nav nav-tabs">
<li class="nav-items">
<a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">
Column Chart
</a>
</li>
<li class="nav-items">
<a class="nav-link" href="#tab2" role="tab" data-toggle="tab">
Treemap
</a>
</li>
<li class="nav-items">
<a class="nav-link" href="#tab3" role="tab" data-toggle="tab">
Donut Chart
</a>
</li>
<li class="nav-items">
<a class="nav-link" href="#tab4" role="tab" data-toggle="tab">
Time Series
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="tab1">
<h3>Column Chart <small>Lorem ipsum</small></h3>
<svg id="chart1" width="900" height="400"></svg>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab2">
<h3>Treemap <small>Lorem ipsum</small></h3>
<svg id="chart2" width="900" height="400"></svg>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab3">
<h3>Donut Chart <small>Lorem ipsum</small></h3>
<svg id="chart3" width="900" height="400"></svg>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab4">
<h3>Time Series <small>Lorem ipsum</small></h3>
<svg id="chart4" width="900" height="400"></svg>
</div>
</div>
</div>
</div>
</div>
Simply change li class nav-items to nav-item.
Explanation: there is no class nav-items, see Bootstrap 4 all css classes
Just change nav-items class to nav-item
nav-items class is invalid class as does not exist. modified code would be
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">
Column Chart
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab2" role="tab" data-toggle="tab">
Treemap
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab3" role="tab" data-toggle="tab">
Donut Chart
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab4" role="tab" data-toggle="tab">
Time Series
</a>
</li>
</ul>
Just Copy and Past this Code
Let me know if its not working !
<div class="container"
<div class="row row-content">
<div class="col-12">
<h2>Charts</h2>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">
Column Chart
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab2" role="tab" data-toggle="tab">
Treemap
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab3" role="tab" data-toggle="tab">
Donut Chart
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab4" role="tab" data-toggle="tab">
Time Series
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="tab1">
<h3>Column Chart <small>Lorem ipsum</small></h3>
<svg id="chart1" width="900" height="400"></svg>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab2">
<h3>Treemap <small>Lorem ipsum</small></h3>
<svg id="chart2" width="900" height="400"></svg>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab3">
<h3>Donut Chart <small>Lorem ipsum</small></h3>
<svg id="chart3" width="900" height="400"></svg>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab4">
<h3>Time Series <small>Lorem ipsum</small></h3>
<svg id="chart4" width="900" height="400"></svg>
</div>
</div>
</div>
</div>
</div>
Related
I have a bootstrap modal that consists of a set of tabs, I want the tabs to appear in a row through the two symbols I put on the image I can go to the tabs on the right and left, how to do that?
thanks you for your help...
Here is the picture where the tabs look like this,
I want them to be in the same row when I click on the symbols to go to other tabs
This is my code:
<button data-toggle="modal" data-target="#menu_tab">Menu</button>
<div class="modal fade" id="menu_tab">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="form-group" id="font" align='right'>
<div class="form-group" id="font" align='right'>
<fieldset class="scheduler-border">
<legend class="scheduler-border">Menu</legend>
<div class="form-row">
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab1" aria-controls="home" role="tab" data-toggle="tab">Tab1</a>
</li>
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab2" aria-controls="home" role="tab" data-toggle="tab">Tab2</a>
</li>
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab3" aria-controls="home" role="tab" data-toggle="tab">Tab3</a>
</li>
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab4" aria-controls="home" role="tab" data-toggle="tab">Tab4</a>
</li>
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab5" aria-controls="home" role="tab" data-toggle="tab">Tab5</a>
</li>
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab6" aria-controls="home" role="tab" data-toggle="tab">Tab6</a>
</li>
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab7" aria-controls="home" role="tab" data-toggle="tab">Tab7</a>
</li>
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab8" aria-controls="home" role="tab" data-toggle="tab">Tab8</a>
</li>
<li role="presentation" class="nav-item" class="active">
<a class="nav-link" href="#Tab9" aria-controls="home" role="tab" data-toggle="tab">Tab9</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="Tab1" class="active">
<div class="p-3">
tab1 content
</div>
</div>
<div role="tabpanel" class="tab-pane" id="Tab2" class="active">
<div class="p-3">
tab2 content
</div>
</div>
<div role="tabpanel" class="tab-pane" id="Tab3" class="active">
<div class="p-3">
tab3 content
</div>
</div>
<div role="tabpanel" class="tab-pane" id="Tab4" class="active">
<div class="p-3">
tab4 content
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
I have two tabs; one labeled boys and the other labeled girls.
within each of those 2 tabs I have a dropdown options for age's.
What im trying to do:
display the age group under the test-b or test-g. depending on what tab im in.
example: if i select 17-18 i want 17-18 displayed under the test-b; if im inside the boys tab
what I tried so far:
basically just moving the tabs div that contains what will display on the page in different areas. It worked on a previous project. but that project wasn't a tab within another tab, unsure if that is the reason it's not working the way it should.
using bootstrap 4.6
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-boy" role="tab" aria-controls="v-pills-boy" aria-selected="true">Boys</a>
<a class="nav-link" id="v-pills-girl-tab" data-toggle="pill" href="#v-pills-girl" role="tab" aria-controls="v-pills-girl" aria-selected="false">Girls</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-boy" role="tabpanel" aria-labelledby="v-pills-boy-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">b-Age</a>
<div class="dropdown-menu">
<a class="dropdown-item nav-link" id="7-8-tab" data-toggle="tab" href="#7-8" role="tab" aria-controls="7-8" aria-selected="true">7-8</a>
<a class="dropdown-item nav-link" id="9-10-tab" data-toggle="tab" href="#9-10" role="tab" aria-controls="9-10" aria-selected="false">9-10</a>
<a class="dropdown-item nav-link" id="11-12-tab" data-toggle="tab" href="#11-12" role="tab" aria-controls="11-12" aria-selected="false">11-12</a>
<a class="dropdown-item nav-link" id="13-14-tab" data-toggle="tab" href="#13-14" role="tab" aria-controls="13-14" aria-selected="false">13-14</a>
<a class="dropdown-item nav-link" id="15-16-tab" data-toggle="tab" href="#15-16" role="tab" aria-controls="15-16" aria-selected="false">15-16</a>
<a class="dropdown-item nav-link" id="17-18-tab" data-toggle="tab" href="#17-18" role="tab" aria-controls="17-18" aria-selected="false">17-18</a>
</div>
</div>
</nav>
test b
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade" id="7-8" role="tabpanel" aria-labelledby="7-8-tab">7-8</div>
<div class="tab-pane fade" id="9-10" role="tabpanel" aria-labelledby="9-10-tab">9-10</div>
<div class="tab-pane fade" id="11-12" role="tabpanel" aria-labelledby="11-12-tab">11-12</div>
<div class="tab-pane fade" id="13-14" role="tabpanel" aria-labelledby="13-14-tab">13-14</div>
<div class="tab-pane fade" id="15-16" role="tabpanel" aria-labelledby="15-16-tab">15-16</div>
<div class="tab-pane fade" id="17-18" role="tabpanel" aria-labelledby="17-18-tab">17-18</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-girl" role="tabpanel" aria-labelledby="v-pills-girl-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">g-Age</a>
<div class="dropdown-menu">
<a class="dropdown-item nav-link" id="7-8-tab" data-toggle="tab" href="#7-8" role="tab" aria-controls="7-8" aria-selected="true">7-8</a>
<a class="dropdown-item nav-link" id="9-10-tab" data-toggle="tab" href="#9-10" role="tab" aria-controls="9-10" aria-selected="false">9-10</a>
<a class="dropdown-item nav-link" id="11-12-tab" data-toggle="tab" href="#11-12" role="tab" aria-controls="11-12" aria-selected="false">11-12</a>
<a class="dropdown-item nav-link" id="13-14-tab" data-toggle="tab" href="#13-14" role="tab" aria-controls="13-14" aria-selected="false">13-14</a>
<a class="dropdown-item nav-link" id="15-16-tab" data-toggle="tab" href="#15-16" role="tab" aria-controls="15-16" aria-selected="false">15-16</a>
<a class="dropdown-item nav-link" id="17-18-tab" data-toggle="tab" href="#17-18" role="tab" aria-controls="17-18" aria-selected="false">17-18</a>
</div>
</div>
</nav>
test g
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade" id="7-8" role="tabpanel" aria-labelledby="7-8-tab">7-8</div>
<div class="tab-pane fade" id="9-10" role="tabpanel" aria-labelledby="9-10-tab">9-10</div>
<div class="tab-pane fade" id="11-12" role="tabpanel" aria-labelledby="11-12-tab">11-12</div>
<div class="tab-pane fade" id="13-14" role="tabpanel" aria-labelledby="13-14-tab">13-14</div>
<div class="tab-pane fade" id="15-16" role="tabpanel" aria-labelledby="15-16-tab">15-16</div>
<div class="tab-pane fade" id="17-18" role="tabpanel" aria-labelledby="17-18-tab">17-18</div>
</div>
</div>
</div>
</div>
You need to change the ids of tabpanel.You need to make sure the id of each tabpanel is unique.
Here is a demo(In the sample of official doc,it uses <ul></ul> and <li></li> in tabs with dropdowns,so I also use <ul></ul> and <li></li> with the dropdown):
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-boy" role="tab" aria-controls="v-pills-boy" aria-selected="true">Boys</a>
<a class="nav-link" id="v-pills-girl-tab" data-toggle="pill" href="#v-pills-girl" role="tab" aria-controls="v-pills-girl" aria-selected="false">Girls</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-boy" role="tabpanel" aria-labelledby="v-pills-boy-tab">
<nav>
<ul class="nav nav-tabs nav-justified" id="nav-tab" role="tablist">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">b-Age</a>
<li class="dropdown-menu">
<a class="dropdown-item nav-link" id="7-8-tab" data-toggle="tab" href="#b7-8" role="tab" >7-8</a>
<a class="dropdown-item nav-link" id="9-10-tab" data-toggle="tab" href="#b9-10" role="tab">9-10</a>
<a class="dropdown-item nav-link" id="11-12-tab" data-toggle="tab" href="#b11-12" role="tab">11-12</a>
<a class="dropdown-item nav-link" id="13-14-tab" data-toggle="tab" href="#b13-14" role="tab" >13-14</a>
<a class="dropdown-item nav-link" id="15-16-tab" data-toggle="tab" href="#b15-16" role="tab">15-16</a>
<a class="dropdown-item nav-link" id="17-18-tab" data-toggle="tab" href="#b17-18" role="tab">17-18</a>
</li>
</ul>
</nav>
test b
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade" id="b7-8" role="tabpanel" aria-labelledby="7-8-tab">7-8</div>
<div class="tab-pane fade" id="b9-10" role="tabpanel" aria-labelledby="9-10-tab">9-10</div>
<div class="tab-pane fade" id="b11-12" role="tabpanel" aria-labelledby="11-12-tab">11-12</div>
<div class="tab-pane fade" id="b13-14" role="tabpanel" aria-labelledby="13-14-tab">13-14</div>
<div class="tab-pane fade" id="b15-16" role="tabpanel" aria-labelledby="15-16-tab">15-16</div>
<div class="tab-pane fade" id="b17-18" role="tabpanel" aria-labelledby="17-18-tab">17-18</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-girl" role="tabpanel" aria-labelledby="v-pills-girl-tab">
<nav>
<ul class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">g-Age</a>
<li class="dropdown-menu">
<a class="dropdown-item nav-link" id="7-8-tab" data-toggle="tab" href="#g7-8">7-8</a>
<a class="dropdown-item nav-link" id="9-10-tab" data-toggle="tab" href="#g9-10">9-10</a>
<a class="dropdown-item nav-link" id="11-12-tab" data-toggle="tab" href="#g11-12">11-12</a>
<a class="dropdown-item nav-link" id="13-14-tab" data-toggle="tab" href="#g13-14">13-14</a>
<a class="dropdown-item nav-link" id="15-16-tab" data-toggle="tab" href="#g15-16">15-16</a>
<a class="dropdown-item nav-link" id="17-18-tab" data-toggle="tab" href="#g17-18">17-18</a>
</li>
</ul>
</nav>
test g
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade container" id="g7-8" role="tabpanel">7-8</div>
<div class="tab-pane fade container" id="g9-10" role="tabpanel">9-10</div>
<div class="tab-pane fade container" id="g11-12" role="tabpanel">11-12</div>
<div class="tab-pane fade container" id="g13-14" role="tabpanel" >13-14</div>
<div class="tab-pane fade container" id="g15-16" role="tabpanel">15-16</div>
<div class="tab-pane fade container" id="g17-18" role="tabpanel">17-18</div>
</div>
</div>
</div>
</div>
html
result:
Is it possible to achieve this?
By slightly modifying this codes?
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6"></div>
<div class="col-md-3"></div>
</div>
EDITED
I can achieve this using below. I'm wondering if there's any other simple way.
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9">
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
</div>
</div>
tarako
You may try it by
just add a single div in start and add its height plus hide the lower div
<div class="row">
<div style="height:10px(according to you)" class="col-md-3"></div>
<div class="col-md-6"></div>
<div class="col-md-3"></div>
</div>
Hi you can try with this code
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
</nav>
<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
<h1>Dashboard</h1>
<section class="row text-center placeholders">
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<div class="text-muted">Something else</div>
</div>
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
</section>
</div>
</div>
I am working in Bootstrap 4 and I have created a Modal Dialog Box. I want the last link on the Modal Dialog Box to be a dropdown menu, but I can't seem to get the code just right.
My HTML, CSS and JQuery code can be found here at JSFiddle:
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="tabbable">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item active">
<a class="nav-link active" href="#AAA" data-toggle="tab">
AAA
</a>
</li>
<li>
<a class="nav-link" href="#BBB" data-toggle="tab">
BBB
</a>
</li>
<li>
<a class="nav-link" href="#CCC" data-toggle="tab">
CCC
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="DDL" href="#DDL">
Menu
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#News">
News
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
You don't want the href="..." set to an element that doesn't exist (#DDL). Just remove it and it will find the next dropdown-menu.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="">
Menu
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#News">
News
</a>
</li>
</ul>
</li>
https://www.codeply.com/go/nbXb8ipmxl
I need a simple schema like this in picture:
This is a try: http://plnkr.co/edit/6v6C4PZCGfvH9FavNai0?p=preview without success.
How to accomplish this?
I need what is in picture. Exactly.
In xs mode I disable many things. My problem is in desktop mode.
<div class="container-fluid" style="background:red">
<div class="row">
<div class="d-inline-block" style="background-color:blue">
<div class="container">
<nav class="navbar navbar-light" style="background:white">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="d-inline-block" style="background-color:yellow; float:right">
<span class="d-inline-block" style="background:white; padding: 20px">User box</span>
</div>
</div>
</div>
There's no much sense develop in bootstrap without grid/colmuns orientantion. You can set a fixed width for you inner element "user box".
Try this code
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.0-alpha.3" data-semver="4.0.0-alpha.3" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#4.0.0-alpha.3" data-semver="4.0.0-alpha.3" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" style="background:red">
<div class="row">
<div class="container">
<div class="col-md-9 col-lg-9">
<nav class="navbar navbar-light" style="background:white">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-3 col-lg-3" style="background-color:yellow; float:right">
<span class="d-inline-block" style="background:white; padding: 20px">User box</span>
</div>
</div>
</div>
</body>
</html>