"Incorporate Bootstrap drop-down and button together for a stylish group feature

I am looking to format the code below to resemble the layout shown in the image using Bootstrap 3.3. When there isn't enough space to show all elements in a single line, I want them to stack vertically so that each element utilizes the entire width of the screen.

Additionally, my combo-boxes may change in size and I would like to apply Bootstrap's rounded corners to all corners of these elements.

image

<div>
  <select>
    <option>Opt1</option>
    <option>Opt2</option>
  </select>
  <select>
    <option>Opt1</option>
    <option>Opt2</option>
  </select>
  <button>Button</button>
</div>
htmlcsstwitter-bootstrapdrop-down-menubuttongroup

Answer №1

If you want to make your web page responsive, you can use media queries. Here's an example:

div {
 text-align:center;
}
select,
button {
  max-width: 120px;
  width: 100%;
}

@media all and (max-width:420px) {
  select,
  button {
    max-width:100%;
    display: block;
  }
}
<div>
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
  <button>Click Me</button>
</div>

Answer №2

 <div>
    <select class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <option><li><a href="#">Action</a></li></option>
        <option><li><a href="#">Another action</a></li></option>
        <option><li><a href="#">Something else here</a></li></option>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </select>
<button class="btn btn-primary butn">
Button
  </button>
</div>

If you want to implement a dropdown menu in bootstrap, consider using the following code structure. The provided snippet includes the button design from bootstrap as well.

  <div>
    <select class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <option><li><a href="#">Action</a></li></option>
        <option><li><a href="#">Another action</a></li></option>
        <option><li><a href="#">Something else here</a></li></option>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </select>
<button class="btn btn-primary butn">
Button
  </button>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How come my dimensions are not returning correctly when I use offset().top and scrollTop() inside a scrolling element?

Currently in the process of developing a web app at , I am looking to implement a feature that will fade elements in and out as they enter and leave the visible part of a scrolling parent element. Taking inspiration from myfunkyside's response on this ...

javascriptjquerycssscrolloffset

The text color is being influenced by the transparent background behind it

I have a box with a transparent background color. Below is the CSS and HTML code that I'm using: CSS: #box { color: black; text-align: center; margin: 50px auto; background: blue; opacity: 0.1; border-radius: 11px; box-sh ...

htmlcsstransparencyopacity

Unexpected data being passed in knockout click event binding

for (let i = 0; i < 9; i++) { vm.icdCodes.push({Index:i, ID:'',DiagnosisCd: '' ,Description:ko.observable('')}); } <tbody data-bind='foreach: $root.icdCodes'> <tr> <td> ...

htmlknockout.jsko.observablearray

Managing multiple carousels simultaneously using the middle mouse button in Swiper.js

I am currently utilizing 5 carousels on my screen, all of which are operated by the same navigation buttons. In addition to this, I require the ability to control them using the middle mouse scroll. However, when I activate the mouse wheel control, only ...

javascriptcsscarouselswiper.js

Responsive cards using Bootstrap styling

Currently trying my hand at mastering flexbox for responsive design with Bootstrap. In the picture, there are 4 cards where 2 should be displayed at the bottom and the other 2 at the top, but on mobile phones, they should all stack at the bottom. I attempt ...

htmlcssbootstrap-4

What is the reason behind the android code being incompatible with IOS operating systems?

I'm encountering an issue where a particular code is working on Android, but not on IOS. The code in question involves using JavaScript to differentiate the items in a list within an HTML select tag. It's perplexing to me how the code can operat ...

javascriptandroidhtmlios

Creative Vue.js and Tailwind CSS card layout featuring an image extending beyond the boundaries of the card

I'm attempting to design a card where an image pops out of the card. I've tried using z-index, but it doesn't seem to be working as expected. Here is the code I have: <div class="flex flex-col"> <div class=&quo ...

cssvue.jstailwind-csstailwind-uitailwind-3

Breaking down a string and then retrieving elements from an array

Just diving into the world of Javascript and jQuery, so I have a simple query. I've got a date that I need to break down into a string and then display it as an array. var date = "12/10/2010"; var dateArray = date.split(/); $('#printbox') ...

javascriptjqueryhtml

When utilizing customize-cra to modify antd less variables, it results in the generation of numerous redundant CSS files during the build

While utilizing customize-cra to override antd less variable, I have encountered an issue where it generates multiple duplicate CSS files during the build process. According to the documentation provided by antd, if I opt for the default import of CSS by ...

cssreactjssassantd

The controller is failing to effectively showcase the ng-show functionality

My webpage consists of three elements: a search bar, a search result area, and a form. The use case scenario involves showing the search bar and form div by default, while hiding the search result div. When I enter keywords into the search bar, client data ...

htmlcssangularjsionic-framework

Having trouble with x-editable in Laravel? Changes not being applied?

Trying out x-editable on my Laravel 5.1 website to edit text titles displayed in a table format. After following the documentation, I managed to get the edit form to pop up when clicking on a title. The changes are reflected on the screen but not stored ...

phptwitter-bootstraplaravellaravel-5.1x-editable

Stop the execution of javascript code based on the screen width

On my website, I have two menus located in different sections of the page. One menu is shown when the screen width is greater than 555px, while the other menu appears when the screen width is less than or equal to 555px. Although the menus are essentially ...

javascriptcss

Strategies for implementing a minimum height for grid-template-column containers

Here's an issue I'm facing: when the first container has content, the other two containers without content end up being the same height as the first one: Check out this JSFiddle link for reference .grid { padding: 5 ...

htmlcsscss-grid

SQL statement not recognized

My current project involves conducting an experiment using a pre-coded script accessible through the link here. In this experiment, I'm utilizing xampp as my web server with mysql. However, when I attempt to run the authentication page containing the ...

phphtml

Move the final column from one table to another table given a specific criterion

I have a task where I need to extract the last column from table3 and transfer it into table4. For example, consider table3: Names Process_id Total construction 1 1111 construction_1 1 0000 engineering 1 22 ...

jqueryhtml

Invoke Javascript through CSS selector

On my webpage, I have implemented a mousemove-mask feature that was inspired by an existing codepen. However, there is one significant issue that I can't seem to resolve on my own. Despite my attempts to fix it, I believe someone with more expertise c ...

javascriptjqueryhtmlcss

Deliver real-time notifications to linked users by leveraging socket.io and node.js

Is there a solution for sending real-time updates to connected clients every second without using the setInterval() function in nodejs and socket.io? Please provide an alternative method that fits my specific scenario. ...

javascriptjqueryhtmlnode.jssocket.io

Tips for validating email addresses and enforcing minimum length requirements

In order to validate email input for the correct format and ensure minimum length validations for first name and password, I am looking to utilize only bootstrap. While I have successfully implemented required field validations for the inputs, I am unsure ...

javascripthtmltypescriptbootstrap-4

Verify image loading using jQuery

<img src="newimage.jpg" alt="thumbnail" /> I am dynamically updating the src attribute of this image. Is there a way to verify if the image has been successfully loaded and take action once it is? Appreciate any guidance on this matter. ...

javascriptjqueryhtmlcss

Resize a container to match the height of either its children or the full height of the window

I'm seeking advice on how to properly use height: 100%. Is there a way to scale a div based on the height of the window and its content simultaneously? I want one to override the other if necessary. Here's an example of standard height 100% css ...

htmlcss