Combining SELECT and icon side by side with Boostrap on one row

I need help adjusting the layout of these controls to be on the same level. My goal is to have the save button aligned with the input element at the bottom.

  <div class="row">
        <div class="col-sm-8">
          <div class="form-group">
            @Html.LabelFor(f => f.DatabaseName, "Database Name")
            @Html.DropDownListFor(f => f.DatabaseName, ViewBag.DatabaseList as IEnumerable<SelectListItem>, new { @class = "dbs form-control", style = "margin-bottom:20px" })
            <span class="glyphicon glyphicon-save"></span> Save
          </div>
          </div>
          <div class="col-sm-4">
            <div class="form-group">
              <span class="glyphicon glyphicon-save"></span> Save
            </div>
          </div>
        </div>
htmlcss

Answer №1

Check out: http://www.bootply.com/yHUeAcHaRX

<div class="col-md-6">
    <div class="input-group">
        <select class="form-control">
            <option>1</option>
            <option>2</option>
        </select>
        <span class="input-group-btn">
            <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-save"></i>Save</button>
        </span>
    </div>
</div>

Answer №2

 <div class="row">
        <div class="col-sm-8">
<div class="col-sm-4">
          <div class="form-group">

            <span class="glyphicon glyphicon-save"></span> Save
          </div>
          </div>
</div>
          <div class="col-sm-4">
            <div class="form-group">
              <span class="glyphicon glyphicon-save"></span> Save
            </div>
          </div>
        </div>
</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

Personalize or delete the spacing within an ion row

Currently, I am delving into the world of Ionic app development. Although I have grasped the concept of the Grid layout, I find myself hitting a roadblock when it comes to adjusting or removing spaces between rows 2 and 3 in my app interface, as illustrate ...

htmlcssangularionic-frameworkionic2

Identifying a flaw in an HTML5 video

I am attempting to identify when an error occurs while playing an HTML5 video. Specifically, I am encountering a situation where I am trying to play an HLS video on a MAC (where "canPlayType" is at least "maybe"), but the video will not play for unknown r ...

javascripthtmlvideo

Revamp the website to create a more streamlined and compact version that mirrors the functionality of the desktop website

My goal is to make my website responsive on all mobile devices. I want the mobile version to look exactly like the desktop version, just smaller in size. I attempted using transform but it didn't have the desired effect. I aim to achieve the same con ...

htmlcss

Ways to incorporate margins into text on PDF pages produced by Puppeteer without altering the background color

I am currently using puppeteer to generate PDFs that contain dynamic content. My goal is to include margins/padding above and below the text on consecutive pages. Unfortunately, when I try to add margins with the property margin: { top: "1cm", bottom: "1 ...

javascripthtmlcssreactjspuppeteer

Simple Solutions for Moving Containers Up in Angular When Clicked

In the left side container, I have a header and sub-header, while the right side container contains text. However, whenever I click on the sub-header to display text on the right side, both container positions shift upward, hiding the header text. I'm ...

htmlcssangulartypescriptscroll

Is there a way to showcase MySQL result data under the corresponding <thead> day column?

A unique attendance chart was created in PHP from the returned database result. However, it is not displaying under its corresponding day rows (thead). The database resulted in a multi-array as shown below: print_r($data) Array ( [0] => Array ( ...

phparrayshtmlmultidimensional-arraylogic

Clicking on two svgs that overlap, on the other hand

Creating a web page buttons panel using .svg files has been an interesting challenge. After adjusting margins and other CSS attributes, I managed to position the buttons as seen in the code. The issue at hand: I'm facing difficulty with making both b ...

htmlcsssvg

Experiencing difficulties when trying to connect a subdirectory in Angular and encountering an error

My Angular site has a page with a link that leads to #admin/editCourse. <li><a href="#admin/editCourse" data-toggle="tab">Edit Course Info</a></li> However, when I click the link, Javascript (JQuery) throws an error: Syntax erro ...

javascriptjqueryhtmlangularjs

Elevate a specific element above others and stagger the positioning of certain elements by pushing them downwards

Take a look at this image to see the issue visually. I'm facing a problem with a div that contains a list displayed below a text field. It's essentially a simulated Combo-box that uses a text element and JavaScript. The issue is that when someon ...

htmlcss

How to efficiently insert multiple values into a MySQL database by utilizing a single HTML option

I'm currently facing an issue with a section of my form. I can't seem to figure out what's causing the problem, so I've decided to reach out here for some guidance. The code I've written aims to determine both the gender and sexua ...

phpmysqlhtml

How to use CSS to create two columns that adjust in height based on the content within

I am working with bootstrap columns and looking to ensure that the two columns, col-md-4 and col-md-8, have an equal height regardless of their content. The content in col-md-4 will vary, so I need a solution for them to maintain the same height. <div ...

cssstylesbootstrap-4multiple-columns

using javascript to retrieve php variables

After creating a webpage, setting up Apache2 on an Ubuntu server to access it over the internet, and installing PHP5 and MySQL, I encountered issues with accessing database information on my page through a .php file. Despite having a file named test.php th ...

javascriptphphtmlmysql

Tips for implementing Java code within a JSP <c:if> statement

How can I utilize the "ft" value in a c:if statement? <% Date dNow = new Date( ); SimpleDateFormat ft = new SimpleDateFormat ("yyyy.MM.dd hh:mm:ss a zzz"); out.print( "<h2 align=\"center\">" + ft.format(dNow) + "</h2> ...

javahtmlcssjsp

Resizing images within a container using Bootstrap to fit the screen dimensions

I am having an issue with my bootstrap page where the tiles adjust position based on screen size. Everything works well except when I try to add images to the tiles along with other content. In the example below, you can see that the first tile has an imag ...

htmlcss

The art of organizing information: Tables and data management

Looking for a solution with a table: <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> Trying to format the cells to display as: 1 2 3 4 ...

htmlcss

Avoid using <input oninput="this.value = this.value.toUpperCase()" /> as it should not convert the text displayed on the "UI", rather it should send the uppercase value

<input oninput="this.value = this.value.toUpperCase()" type="text" id="roleName" name="roleName" class="form-control width200px" [(ngModel)]="role.roleName"> Even though the UI is changing ...

htmlangulartypescript

Tips for displaying HTML content using an array in Vue JS

Hi, I'm a beginner with Vue JS and I'm working on passing an HTML table using this array. I have a dropdown where I can select the option I want, but I'm struggling to figure out how to include HTML within it. Whenever I try, it ends up disp ...

javascripthtmlarraysvue.jsdropdown

Inline-block display causing divs to act unpredictably

I am working with a main div that contains three smaller divs inside. Each of these divs has been assigned a width of 30%, and they are all perfectly centered within the main div. To ensure that the three divs appear side by side, I used the display: inli ...

csshtml

Issue: Sumoselect plugin unable to function properly when interacting with dynamically generated select dropdown

I recently started using the sumoselect plugin, which can be found at . In my project, I have implemented two select dropdowns. The first one is directly added to the HTML page, while the second one is generated dynamically using jQuery. Unfortunately, t ...

javascriptjqueryhtmlsumoselect.js

Troubleshooting Problem with Bootstrap Sidebar Navigation

View the image of the issue by clicking the link below: https://ibb.co/ghR0nm I'm facing an issue with the side navigation bar where it doesn't go fully to the left and fails to extend all the way down the page vertically. I've tried adjus ...

htmlcssbootstrap-4