I am using Bootstrap 4 and accordion panels, within those panels i have tables and some inputs with dropdown menu's. From the snippet i have provided you can see that the dropdown doesn't show on top (over the other accordion) and just shows within the accordion.
Does anyone know a way around this?
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseExample">
Accordion Dropdown Example
</a>
</div>
<div id="collapseExample" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Input with dropdown example</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="input-group">
<input name="inputwithdropdown" type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Menu1</a>
<a class="dropdown-item" href="#">Menu2</a>
<a class="dropdown-item" href="#">Menu3</a>
<a class="dropdown-item" href="#">Menu4</a>
<a class="dropdown-item" href="#">Menu5</a>
<a class="dropdown-item" href="#">Menu6</a>
<a class="dropdown-item" href="#">Menu7</a>
<a class="dropdown-item" href="#">Menu8</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseAnother">
Another Accordion Dropdown
</a>
</div>
<div id="collapseAnother" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">
This is just another dropdown accrodion
</div>
</div>
</div>
</div>
Dropdown placement in Bootstrap 4 is done dynamically using popper.js which can be a problem inside other elements like the accordion. You can control the dropdown position using some of the options explained here.
In this case using data-boundary="parent" data-flip="false" and dropdown-menu-right on the the Dropdown seem to work best.
https://www.codeply.com/go/YC9Fj7eMKb
<div class="input-group">
<input name="inputwithdropdown" type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-boundary="parent" data-flip="false" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Menu1</a>
<a class="dropdown-item" href="#">Menu2</a>
<a class="dropdown-item" href="#">Menu3</a>
<a class="dropdown-item" href="#">Menu4</a>
<a class="dropdown-item" href="#">Menu5</a>
<a class="dropdown-item" href="#">Menu6</a>
<a class="dropdown-item" href="#">Menu7</a>
<a class="dropdown-item" href="#">Menu8</a>
</div>
</div>
</div>
Related:
Bootstrap 4 Dropdown - Disable auto placement caused by popper.js
Bootstrap 4: Why popover inside scrollable dropdown doesn't show?
Answering for people who might come from Google with the same issue.
I got a reply on the Bootstrap Git from a contributor and it was pointed out to me that it wasn't the accordion causing this. It's the <div class="table-responsive"> wrapper and the overflow-x: auto. Making this visible corrects this but obviously breaks the responsive scroll on the table.
Currently there is no true fix in this situation, where you have a table within an accordion with dropdown menu's.
Related
I want to have the same mechanism like this https://www.w3schools.com/html/default.asp but in laravel application
This is my code on routes/web.php
Route::get('tutorial', function(){
$tutorial = Tutorial::get();
return view('tutorial.index')->with('tutorial', $tutorial);
})->name('index-tutorial');
// Show one Tutorial by Id
Route::get('tutorial/{id}', function($id){
$tutorial = Tutorial::findOrFail($id);
return view('tutorial.show')->with('tutorial', $tutorial);
})->name('show-tutorial');
for my Blade template
tutorial/show.blade.php
<div class="container">
#foreach($tutorial as $tutorial)
<h1>{{$tutorial->title}}</h1>
<p>{{$tutorial->title_description}}</p>
<p>{{$tutorial->title_lesson}}</p>
<div class="btn-group btn-group-lg d-flex justify-content-end mb-3" role="group">
<form class="mx-3" action="{{route('delete-tutorial', $tutorial->id)}}" method="POST">
#csrf
#method('DELETE')
<button class="btn btn-danger" name="Delete">Delete</button>
</form>
<form action="{{route('edit-tutorial', $tutorial->id)}}" method="GET">
#csrf
<button class="btn btn-primary" name="Edit">Edit</button>
</form>
#endforeach
</div>
tutorial/index.blade.php
<main class="d-flex flex-nowrap">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark"
style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-
auto text-white text-decoration- none">
<svg class="bi pe-none me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4 text-white">MySql Lessons</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
#forelse($tutorial as $link)
<li class="nav-item">
<a href="{{route('show-tutorial', $link->id)}}" class="nav-
link">
<p class="text-white bg-dark">{{$link->title}}</p>
</a>
</li>
#empty
<p class="text-white bg-dark">No available lesson</p>
#endforelse
</ul>
</div>
I been researching a lot about having this mechanism
This one is different from other questions because i don't use controllers for this
Have you tried using example tamplates from Bootstrap?
Check here https://getbootstrap.com/docs/5.3/examples/
it's quite easy actually, you just need to copy the html code from bootstrap tamplate and tweak here and there. use
#include to add your desired components, #yield for your desired content page. and use #extends and #section inside your content pages.
roughly like this.
your main blade view
<!doctype html>
<html lang="en">
<head>
</head>
<body>
#include('partials.adminNav')
<div class="row">
#include('partials.adminSideBar')
</div>
<div class="container">
#yield('container')
</div>
</body>
#include('partials.footer')
</html>
for your side bar you just need to put links for your desired page
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3 sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">
<span data-feather="home" class="align-text-bottom"></span>
//Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//your links/route for page content">
<span data-feather="file" class="align-text-bottom"></span>
//links name
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//your links/route for page content">
<span data-feather="edit" class="align-text-bottom"></span>
//Links name
</a>
</li>
</ul>
</div>
</nav>
in like this in your content pages
#extends('layouts.adminMain')
#section('container')
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="py-4">
// your content here
</div>
</main>
#endsection
make use of the #include and #yield build in function. this way you'll have a consistent navbar/sidebar but can changes the content within.
Hope this works for you :)
Instead of using route closures, I manage to convert them to a TutorialController
Route::resource('tutorial', TutorialController::class);
for the aside bar routes/web
view()->composer('layout.sidebar', function($view){
$tutorial = Tutorial::all();
$view->with('links', $tutorial);
});
layout/sidebar.blade.php
<main class="d-flex flex-nowrap">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark"
style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto
text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4 text-white">MySql Lessons</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
#forelse($links as $link)
<li class="nav-item">
<a href="{{ route('tutorial.show', $link->id)}}" class="nav-link">
<p class="text-white bg-dark">{{$link->title}}</p>
</a>
</li>
#empty
<p class="text-white bg-dark">No available lesson</p>
#endforelse
</ul>
</div>
</main>
in my index.blade and show.blade you can add #include('layout.sidebar')
#extends('layout.app')
#section('title', "Show Tutorials")
#section('content')
#include('layout.sidebar')
<div class="container">
<h1>{{$tutorial->title}}</h1>
<p>{{$tutorial->title_description}}</p>
<p>{{$tutorial->title_lesson}}</p>
<div class="btn-group btn-group-lg d-flex justify-content-end mb-3"
role="group">
<form class="mx-3" action="{{route('tutorial.destroy', $tutorial-
>id)}}" method="POST">
#csrf
#method('DELETE')
<button class="btn btn-danger" name="Delete">Delete</button>
</form>
<form action="{{route('tutorial.edit', $tutorial->id)}}" method="GET">
#csrf
<button class="btn btn-primary" name="Edit">Edit</button>
</form>
</div>
#endsection
I have implemented an Offcanvas sidebar. It displays fine but none of the links in the sidebar actually work.
When I clicked on the links, nothing happens. I don't think I understand the mechanism well enough so any guidance here would be appreciated.
I'm using Laravel so this code is inside a view that is loaded for every page (like app.blade.php).
The sidebar works fine and can be properly toggled with the button but the links don't take me anywhere. What am I missing?
Here's the code. Link1 and Link2 are valid Laravel routes in my test app.
<body class="d-flex flex-column min-vh-100">
<a class="btn btn-primary float-end" data-bs-toggle="offcanvas" href="#offcanvas" role="button" aria-controls="offcanvas">
Toggle Menu
</a>
<nav class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" data-bs-keyboard="false" data-bs-backdrop="true" data-bs-scroll="true">
<div class="offcanvas-header border-bottom">
<a href="/" class="d-flex align-items-center text-decoration-none offcanvas-title d-sm-block">
<h4>
My site
</h4>
</a>
</div>
<div class="offcanvas-body px-0" data-bs-target="experience-collapse" data-bs-toggle="collapse">
<ul class="list-unstyled ps-0">
<li class="mb-1">
<button
class="btn btn-toggle align-items-center rounded"
data-bs-toggle="collapse"
data-bs-target="#experience-collapse"
aria-expanded="true"
aria-controls="experience-collapse"
>
<i class="bi bi-list-ol"></i> Links
</button>
<div class="collapse show" id="experience-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><i class="bi bi-arrow-down-up"></i> Link 1</li>
<li><i class="bi bi-search"></i> Link2</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</body>
The dropdown is not showing, I won’t mind any assistance on what I’m doing wrong.
<div class=“boxOptions”>
<div data-toggle=“dropdown” arial-haspopup=“true” arial-expanded=“false”>
<i class=“fas fa-ellipsis-v”></i>
</div>
<div class=“dropdown-menu”>
<a class=“dropdown-item” href=“#”>Activate</a>
<a class=“dropdown-item” href=“#”>Delete</a>
</div>
</div>
Make it like this.
<div class="boxOptions dropdown">
<div data-toggle="dropdown">
<i class='fas fa-ellipsis-v'></i>
</div>
<div class='dropdown-menu'>
<a class='dropdown-item' href='#'>Activate</a>
<a class='dropdown-item' href='#'>Delete</a>
</div>
</div>
Try this one
I have a web app using modal forms to confirm some of the actions my users (or admin) might be allowed to do. The modal form setup is taken from Microsoft's IdentitySampleApplication project and been incorporated for my project in mostly the same way with this one difference. I am using the generic modal forms. I am trying to allow a user to have multiple user roles on an application (while their sample presumes the user will only have one role.)
I am now working out the deletion of roles for this type multi-role scenario for maintenance. I should point out that all instances of code involving only one id work fine, it is this one instance with 2 ids that fails to pass through either of the ids I need at the controller.
The deletion of a user role requires the key of the user and the role.
My controller has a bit of code like the following to accept the ids and present a modal form, which works quite nicely.
[HttpGet]
public IActionResult DeleteUserRole( string userid, string roleid ){...}
The HttpPost portion looks something like this
[HttpPost]
public IActionResult DeleteUserRole( string userid, string roleid, IFormCollection form ){...}
however, this second action never gets the ids that were passed to the modal forms get method.
In all methods that only have a single routing id, I have no issues. It is only this one method that vexes me. I call it from this link. Note the two asp-route variables and I suspect this is at the heart of my issue, but the get call is fine with this, it is the post that has no values:
<a id="deleteRoleModal" asp-action="DeleteUserRole"
asp-route-userid="#item.userId" asp-route-roleid="#item.roleId"
data-toggle="modal" data-target="#modal-action-role"
class="btn btn-sm btn-danger">
where at the base of the form I have a modal form implementation it uses looking like this:
#await Html.Partial( "_Modal", new BootstrapModel { ID = "modal-action-role", AreaLabeledId = "modal-action-role-label", Size = ModalSize.Medium } )
My modal form looks much like the samples used in the IdentitySampleProject and is shown here, it was not altered in any meaningful way yet works fine with single parameter call backs:
#model string
#using MyModels
<form asp-action="DeleteUserRole" role="form">
#Html.AntiForgeryToken()
#await Html.Partial( "_ModalHeader", new ModalHeader { Heading = "Delete User Role" } )
<div class="modal-body form-horizontal">
Are you sure you want to delete user role #Model?
</div>
#await Html.Partial( "_ModalFooter", new ModalFooter { SubmitButtonText = "Delete" } )
</form>
I am looking for a direction to go to solve the issue. I am hoping that indeed the double route ids are my issue, but I can not seem to find anyone else doing something like this in samples.
The generated management page looks mostly like this:
<!DOCTYPE html>
<html>
<head>
<title>my company</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/lib/bootswatch/spacelab/bootstrap.min.css" />
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/site.css" />
<link rel="stylesheet" href="/css/navTabs.css" />
<link rel="stylesheet" href="/css/partner.css" />
</head>
<body>
<div id="header">
<div class="slideContainer">
<div class="slide"><img src="/image/Firm-small2.jpg" alt="Offices" class="headerImage" /></div>
<div class="slide"><img src="/image/InLibrary225.jpg" alt="Library" class="headerImage"></div>
<div class="slide"><img src="/image/DSC_9999editSM.JPG" alt="Offices" class="headerImage" /></div>
<div class="slide"><img src="/image/DSC_9925edit2SM.JPG" alt="Computer Room" class="headerImage" /></div>
</div>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav navbar-right ">
<li class="navtext">
<label>-- Welcome: Webmaster </label>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="navtext">
<label>Your Proven Partner in Cartoon Drawing</label>
</li>
</ul>
</nav>
</div>
<div id="sidebar">
<div><img src="/image/headerLogo.gif" alt="my company Logo" class="logoImage" /></div>
<nav id="menu">
<ul class="nav navbar-inverse">
<li>Home</li>
<li>
<div id="menuGroupItem">
Partners
<a data-toggle="collapse" data-target="#partnerMenu"><i class="fa fa-chevron-down"></i></a>
</div>
<ul id="partnerMenu" class="nav collapse" role="menu" aria-labelledby="partnerMenu">
<li><i class="fa fa-caret-right"></i> Eddy A Fish</li>
<li><i class="fa fa-caret-right"></i> Tom A Hawk</li>
</ul>
</li>
<li>Services</li>
<li>News</li>
<li>Events</li>
<li>Publications</li>
<li>Firm History</li>
<li>Contact</li>
<li class="divider"></li>
<li>Manage Website</li>
<li>Logout</li>
</ul>
</nav>
<div class="affiliation">
<table>
<tr>
<td>
<img src="/image/WBE_color_rgb_UP25.jpg" alt="" class="affiliationImage" />
</td>
</tr>
</table>
</div>
<div>
<ul class="rightAlign">
<li> </li>
<li>my company</li>
<li>16 main street</li>
<li>anytown, pa 00000</li>
<li> </li>
<li>610.111.1111</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="main" class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="/Users/UserRole/a2c77901-4a74-49aa-9354-1fadc943c8c4" method="post"><input id="UserId" name="UserId" type="hidden" value="a2c77901-4a74-49aa-9354-1fadc943c8c4" /><input id="UserName" name="UserName" type="hidden" value="BioEditor" /> <h3>Add roles for user: <span class="text-success">BioEditor</span></h3>
<div>
<div class="form-group">
<table class="table table-responsive">
<thead>
<th>Role</th>
<th>Action</th>
</thead>
<tbody>
<tr>
<td><i class="fa fa-check text-success"> </i>BioEditor</td>
<td>
<a id="deleteRoleModal" data-toggle="modal" data-target="#modal-action-role" class="btn btn-sm btn-danger" href="/Users/DeleteUserRole?userid=a2c77901-4a74-49aa-9354-1fadc943c8c4&roleid=8b12b24d-5836-46eb-a7aa-0be1818a67f5">
<i class="fa fa-trash"></i> Delete
</a>
</td>
</tr>
<tr>
<td><i class="fa fa-check text-success"> </i>PowerEditor</td>
<td>
<a id="deleteRoleModal" data-toggle="modal" data-target="#modal-action-role" class="btn btn-sm btn-danger" href="/Users/DeleteUserRole?userid=a2c77901-4a74-49aa-9354-1fadc943c8c4&roleid=c4f3bdf8-b880-423c-8de3-1e51329da104">
<i class="fa fa-trash"></i> Delete
</a>
</td>
</tr>
<tr>
<td><i class="fa fa-check text-success"> </i>Administrator</td>
<td>
<a id="deleteRoleModal" data-toggle="modal" data-target="#modal-action-role" class="btn btn-sm btn-danger" href="/Users/DeleteUserRole?userid=a2c77901-4a74-49aa-9354-1fadc943c8c4&roleid=f1aafc1e-0527-4542-8f0e-fb1afeccac46">
<i class="fa fa-trash"></i> Delete
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group">
<div class="input-group">
<select class="input-group form-control" data-val="true" data-val-required="The ApplicationRoleId field is required." id="ApplicationRoleId" name="ApplicationRoleId">
<option>Please select</option>
<option value="8b12b24d-5836-46eb-a7aa-0be1818a67f5">BioEditor</option>
<option value="c4f3bdf8-b880-423c-8de3-1e51329da104">PowerEditor</option>
<option value="f1aafc1e-0527-4542-8f0e-fb1afeccac46">Administrator</option>
<option value="fe77274d-4b16-46a6-8177-a84faf198c9b">EventEditor</option>
</select>
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-user"> </i> Add Selected Role </button>
</span>
<span class="field-validation-valid" data-valmsg-for="ApplicationRoleId" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8KeASaIZMdBDjnZy_1CdaouczJ-zwxPaQp-N5OQ5bGWfYzVfpDz7_iC0VlJb_cRDkqucT-8ENFhsNPe9Rng1Mqrm9VQbYQoSQwerxj953ql4v7dABrW6pioEySOJN7qFXaalGYePyjHoB0QiKxfuvkvh938tJG4gVnh5D1JvLyNBBKlR4d25PcoJOJZTdN_Bxg" /></form> </div>
</div>
<div aria-hidden="true" aria-labelledby="modal-action-role-label" role="dialog" tabindex="-1" id="modal-action-role" class="modal fade">
<div class="modal-dialog ">
<div class="modal-content">
</div>
</div>
</div>
</div>
</div>
<div id="footer" class="container-fluid">
<div class="navbar navbar-fixed-bottom navbar-inverse ">
<ul>
<li class="navbar-link">© my company</li>
<li class="navbar-link text-muted"><a id="disclaimerLink" href="#">Disclaimer</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="/js/site.js"></script>
</body>
</html>
Thanks for any direction you might be able to provide, Kent
That was exactly a nudge in the right direction to finding the issue, thanks Ahmar. What is going on, due to the 2 ids being passed back to the controller is that the data is wrapped up in a query string rather than as a real route {controller}{action}{id}.
The modal won't pass along the query string to the final so I changed the model and wrapped up the values in the modal form for the final deletion and it all worked. Thanks for asking the right the question to get this answered.
I'm trying out to squeeze the columns into two while the page is xs size. I did the necessary logic, and also tried to implement the same with an using img. However while using an image, I'm unable to force the image to take the full size of the block. I've tried all necessary css editing and stuff, maybe I'm missing something please help.
Take help of the jsfiddle link to understand it better. I've included the css in fiddle file
Js Link!
<html>
<style>
</style>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid ">
<div class="navbar-header ">
<button type="button" class="navbar-toggle pull-left " data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<form class="navbar-form pull-left my-searchmain" role="search">
<div class="input-group ">
<input type="text" class="form-control " placeholder="Search">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
<div class="collapse navbar-collapse " id="myNavbar">
<ul class="nav navbar-nav navbar-right col-lg-12 col-md-12 col-sm-12">
<li class="active col-lg-1 col-xs-6 col-md-1 col-sm-1"><img id="imgnew" src="http://www.affordable-templates123.com/wp-content/uploads/2015/05/fancy-label-templates-nh8tgtgq.jpg" ></li>
<li class="dropdown col-lg-1 col-xs-6 col-md-1 col-sm-1">
<a class="dropdown-toggle " data-toggle="dropdown" href="#">Page 2 </a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1">Page 3</li>
<li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1">Page 4</li>
<li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1">Page 5</li>
<li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1">Page 6</li>
<li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1">Page 7</li>
<li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1">Page 8</li>
<li class="col-xs-push-1">
<form class="navbar-form my-search " role="search">
<div class="input-group ">
<input type="text" class="form-control " placeholder="Search">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Afsan Abdulali Gujarati, I think for what I understand here, you want the xs view menu text to all stay on the right in one vertical line.
To stop the text wrapping around below the image. The image being responsive is full width of the col-xs-6. But it looks like you are trying or meaning to have the image the same height of the text links on the right.
Hopefully the way it lines up now is ok.
Have a look at this Fiddle.
All I did here was to add padding-bottom:200px; to the litht holds the image.
See if this does what you want.
.keepclear{
padding-bottom:200px;
}
Added
To remove any padding around a image in a navbar add this to your custom css to override Bootstrap css classes.
.navbar-nav > li > a {
padding-top: 0;
padding-bottom: 0;
padding-left:0;
padding-right:0;
}