twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.31k stars 78.79k forks source link

Support responsive centered alignment for Dropdowns (left | right already supported) #38606

Open marceloverdijk opened 1 year ago

marceloverdijk commented 1 year ago

Prerequisites

Proposal

The ability to have a centered dropdown like:

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

but have it right aligned on large screens.

Dropdownsseem to support responsive alignments, but it has a different approach then the centered example above and only supports left and right unfortunately.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Motivation and context

It would be nice to combine both in some way, to support default centered dropdown (useful on mobile device) and on larger screen align left or right as appropriate.

Bhavyaatrivedi commented 1 year ago

Hi , can you assign this issue to me.

julien-deramond commented 1 year ago

@Bhavyaatrivedi We don't assign issues in this repo. Moreover, in this case, this new feature must be approved by the core team before starting any development.

Bhavyaatrivedi commented 1 year ago

Hello, how can I contact the core team?

On Tue, May 16, 2023 at 2:32 PM Julien Déramond @.***> wrote:

@Bhavyaatrivedi https://github.com/Bhavyaatrivedi We don't assign issues in this repo. Moreover, in this case, this new feature must be approved by the core team before starting any development.

— Reply to this email directly, view it on GitHub https://github.com/twbs/bootstrap/issues/38606#issuecomment-1549276346, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASRCZZPDNPS3RZWHZYSS6ULXGM7CRANCNFSM6AAAAAAYCXHVEE . You are receiving this because you were mentioned.Message ID: @.***>

julien-deramond commented 1 year ago

Depending on the topic, by creating issues, or GitHub discussions. For this specific issue #38606, it will be analyzed when we will have the time to do it based on priorities and the roadmap, and an answer will be provided in the discussion of this same issue.

Bhavyaatrivedi commented 1 year ago

Ok, thank you.

On Tue, 16 May 2023, 22:40 Julien Déramond, @.***> wrote:

Depending on the topic, by creating issues, GitHub discussions https://github.com/orgs/twbs/discussions. For this specific issue #38606 https://github.com/twbs/bootstrap/issues/38606, it will be analyzed when we will have the time to do it based on priorities and the roadmap, and an answer will be provided in the discussion of this same issue.

— Reply to this email directly, view it on GitHub https://github.com/twbs/bootstrap/issues/38606#issuecomment-1550058860, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASRCZZKM7YJEDCOUA5PIB63XGOYIPANCNFSM6AAAAAAYCXHVEE . You are receiving this because you were mentioned.Message ID: @.***>