I have card with dropdown menu like below
<div class="content d-flex">
<div class="ps-1 align-self-center">
<img src="#" class="rounded-circle shadow-l preload-img entered loading" data-ll-status="loading" width="45">
</div>
<div class="ps-2 align-self-center">
<h5 class="font-15 color-dark-dark">Jasdeep Singh <i class="fa fa-circle font-12 color-green-dark ms-1"></i></h5>
<p class="opacity-50 mt-n2 me-n1 font-13 mb-0">
Seen on 2022-05-09 10:52:36 </p>
</div>
<div class="ms-auto align-self-center">
<div class="dropdown">
<i class="fa fa-align-justify dropdown-toggle color-black me-2" data-toggle="dropdownMenu2" data-bs-toggle="dropdown"></i>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><button type="button" data-id="28" class="dropdown-item block_user" style="display:block">Block User</button></li>
<li><button type="button" data-id="28" class="dropdown-item unblock_user" style="display:none">Unblock User</button></li>
<li><button type="button" data-id="28" class="btn-link dropdown-item report_spam">Report Spam</button></li>
</ul>
</div>
</div>
</div>
Its all fine but dropdown menu getting cut like below image. I have tried many solution but not working. Let me know if any one here can help me for solve the puzzle.
Thanks!
Related
MY body just wont alight with the nav. there are some margins on the container, when I try to set up mx-0 the space just goes to the left. it is just no taking the whole with of the body. I am not sure what I am missing. I tried putting the nav inside the main container but still doesnt work.
[![<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
LightQUIZ
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse px-3 justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CATEGORIES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TOP QUIZES</a>
</li>
</ul>
<div class="d-flex flex-column flex-md-row align-items-start">
<form class="form-inline mx-lg-2 d-flex flex-row">
<input class="form-control px-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<button class="btn btn-success mx-md-2 my-sm-2 my-md-0">LOGIN</button>
<button class="btn btn-danger">SIGNUP</button>
</div>
</div>
</nav>
<main class="container">
<section class="home-header row pt-4">
<div class=" col-md-8 jumbotron">
<h2 class="display-5">Hello, world!</h2>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="col-md-4 d-flex flex-column">
<h4 class="text-center">LightQuiz LeaderBoard</h4>
<ul class="list-group leaderboard">
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-pill badge-danger">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
</ul>
</div>
</section>
</main>][1]][1]
The purpose of the container is so it will add space to either side in case the screen becomes too large in width. Try making your screen really small in width, then resize until it becomes large. It should have breakpoints where the spacing will change.
The nav element you have uses other classes that do not change the side spacing the same way as the container.
If you do not want space on either side of you main element, simply remove the container class.
If you want to make the navbar adopt the same side spacing as the main element, add the container class to the nav element.
Updated answer after reading your comment here:
Bootstrap also provides a "fluid" container class that makes it span "the entire width of the viewport". From the latest documentation for version 5:
<div class="container-fluid">
Simply, use class container-fluid instead of container on the main body.
Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
LightQUIZ
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse px-3 justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CATEGORIES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TOP QUIZES</a>
</li>
</ul>
<div class="d-flex flex-column flex-md-row align-items-start">
<form class="form-inline mx-lg-2 d-flex flex-row">
<input class="form-control px-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<button class="btn btn-success mx-md-2 my-sm-2 my-md-0">LOGIN</button>
<button class="btn btn-danger">SIGNUP</button>
</div>
</div>
</nav>
<main class="container-fluid">
<section class="home-header row pt-4">
<div class=" col-md-8 jumbotron">
<h2 class="display-5">Hello, world!</h2>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="col-md-4 d-flex flex-column">
<h4 class="text-center">LightQuiz LeaderBoard</h4>
<ul class="list-group leaderboard">
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-pill badge-danger">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
</ul>
</div>
</section>
</main>
</body>
https://jsfiddle.net/mkpu9wcd/
For more info, read: https://getbootstrap.com/docs/5.0/layout/containers/
im trying to make bootstrap drop down menu but in it doesn't render as expected (the button to expand the menu is unclickable )
<div class="news-blocks mb-5">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 services-section">
<div class="inner">
<div class="inner-align">
<div class="row">
<div class="col-lg-4">
<h2 class="heading">
<i class="la la-gears"></i> الخدمات الإلكترونية </h2>
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="triggerId" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
تسجيل الشركة
</button>
<div class="dropdown-menu" aria-labelledby="triggerId">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
</div>
</div>
</div>
<div class="col-lg-8">
<p class="text">
text
</p>
<button type="button" class="arrow-btn btn btn-primary btn-lg">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the area highlited in red should be the dropdown menu but it is not
I have an app that uses Bootstrap 3. In that app, I have a toolbar. I only want that toolbar to appear on "md" and "lg" screens. On "xs" and "sm" sized screens, I want a drop-down menu to appear in its place. My question is, how do I do that? Currently, I have the following code, which is available in this Bootply.
<div class="container">
<div class="row">
<div class="col-xs-9">
<ul class="list-inline">
<li><i class="fa fa-user"></i></li>
<li><strong>Joe Smith</strong></li>
</ul>
</div>
<div class="col-xs-3">
<div class="btn-toolbar pull-right hidden-xs">
<div class="btn-group">
<button class="btn"><i class="fa fa-save"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
</div>
</div>
<div class="dropdown hidden-lg">
<i class="fa fa-chevron-down"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li><button class="btn btn-sup"><i class="fa fa-save"></i><span>Save</span></button></li>
<li><button class="btn btn-sup"><i class="fa fa-close"></i><span>Close</span></button></li>
</ul>
</div>
</div>
</div>
</div>
My problem is, in Bootstrap 3, the responsive utilities do not seem to let define multiple breakpoints for visibility. Is there a way for me to say something like, "if my screen size is "md" or less, show the menu. Otherwise, use the toolbar?" If so, how?
Thanks!
you can look it up here
http://getbootstrap.com/css/#responsive-utilities-classes
So on the toolbar you should have
<div class="btn-toolbar pull-right hidden-xs hidden-sm">
and on the dropdown
<div class="dropdown hidden-md hidden-lg">
Try use this code:
<div class="container">
<div class="row">
<div class="col-xs-9">
<ul class="list-inline">
<li><i class="fa fa-user"></i></li>
<li><strong>Joe Smith</strong></li>
</ul>
</div>
<div class="col-xs-3">
<div class="btn-toolbar pull-right visible-md visible-lg">
<div class="btn-group">
<button class="btn"><i class="fa fa-save"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
</div>
</div>
<div class="dropdown visible-xs visible-sm">
<i class="fa fa-chevron-down"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li><button class="btn btn-sup"><i class="fa fa-save"></i><span>Save</span></button></li>
<li><button class="btn btn-sup"><i class="fa fa-close"></i><span>Close</span></button></li>
</ul>
</div>
</div>
Might be easiest if I point you here: http://bootsnipp.com/snippets/featured/user-profile-widget
What I am trying to do is align these side by side so that there are two per row...
I'm just completely confused with the order of the columns...
I guess any Bootstrap expert could please chime in with a suggestion? Thanks!
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="well well-sm">
<div class="row">
<div class="col-sm-6 col-md-4">
<img src="http://placehold.it/380x500" alt="" class="img-rounded img-responsive" />
</div>
<div class="col-sm-6 col-md-8">
<h4>
Bhaumik Patel</h4>
<small><cite title="San Francisco, USA">San Francisco, USA <i class="glyphicon glyphicon-map-marker">
</i></cite></small>
<p>
<i class="glyphicon glyphicon-envelope"></i>email#example.com
<br />
<i class="glyphicon glyphicon-globe"></i>www.jquery2dotnet.com
<br />
<i class="glyphicon glyphicon-gift"></i>June 02, 1988</p>
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-primary">
Social</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span><span class="sr-only">Social</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Twitter</li>
<li>Google +</li>
<li>Facebook</li>
<li class="divider"></li>
<li>Github</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Perhaps I'm not understanding the question, but it seems to work just fine when including two of them on the same row.
http://bootsnipp.com/user/snippets/M23j
I have a problem where I have these div boxes (.span4), they all remain inside a .row-fluid (which is the container with white background). The problem is that the boxes exceed their width and "stick out".
Is there some way to make the spacing between the .span4's to auto adjust to the container width?
See jsfiddle here:
http://jsfiddle.net/QcSqx/1/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="main-container">
<div class="row-fluid">
<div class="span12">
<h3 class="mycharacters">My characters</h3>
<div class="btn-group pull-right" data-toggle="buttons-radio">
<i class="icon-th-large"></i>
<i class="icon-list"></i>
</div>
<div class="btn-group pull-right">
<a class="add-character-button btn btn-success btn-small dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-plus icon-white"></i> Add character
</a>
<ul class="dropdown-menu">
<li>Add manually</li>
<li class="nav-header">Import</li>
<li>.dnd4e-file</li>
</ul>
</div>
<i class="icon-cog icon-white"></i> Back to Uberview
</div>
</div>
<div class="row">
<div class="span12" id="actor_result"><div class="row-fluid">
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Davius.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=1"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=1"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=1"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Davius</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>17/20hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">aaaaaaa
a
a
a</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">hehe
asa
sd
asd</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Awesome%20Maximus.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=3"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=3"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=3"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Awesomeson Maaaximilian</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>10/30hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">herro</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">lol</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Master%20Thief%20Sven.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=4"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=4"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=4"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Master Thief Sven</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>20/13hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">Yeeeeeesss.....huh? ah! ...yeeees</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">wes</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Giant%20Frederic.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=5"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=5"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=5"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Giant Frederic</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>25/27hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">Farting</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">I will cruuuush you!</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/One%20eyed%20idiot.jpeg"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=6"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=6"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=6"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">One eyed idiot</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>25/35hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">Rested</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">Can't see straight</div>
</div></div>
</div>
</div>
</div>
</div>
</div>
bootstrap puts padding and borders on the well class, which will make the span4s overflow when you add the well class to that div. my suggestion would be to nest the well classes within the span4 divs..
<div class="span4">
<div class="well well-small">
Contents of the div within the well
</div>
</div>
also, it looks like you tried putting 4 boxes on a line.. when you have 12 columns to work with, and you want to put 4 columns in a row-fluid row, you should use span3 (span3 * 4columns = 12 - full width)