Grid-based layout for Bootstrap modal windows

Looking for assistance with aligning the buttons in the modal window to match the alignment of the input boxes. Here is the HTML code:

<div>
    <form name="_form" class="form-horizontal" ng-submit="submit(_form)">
        <div class="modal-header">
            <button type="button" class="close" ng-click="dismiss()" aria-hidden="true">&times;</button>
            <h3>Chart Settings</h3>
        </div>

        <div class="modal-body">
             <div class="row">
                 <div class="col-lg-6 col-md-6">
                    <div class="form-group"  >
                        <label class="control-label col-lg-6 col-md-6">Title</label>
                        <div class="col-lg-6 col-md-6">
                            <input name="sizeX" ng-model="chartConfig.title.text"class="form-control" />
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="form-group">
                        <label class="control-label col-lg-6 col-md-6">Subtitle</label>
                        <div class="col-lg-6 col-md-6">
                            <input name="sizeY"ng-model="chartConfig.subtitle.text"class="form-control" />
                        </div>
                    </div>
                </div>
             </div>
             
            // More content here

           <div class="row">
            <div class="row"><button ng-click="addSeries()">Add Series</button></div>
            <div class="row"><button ng-click="addPoints()">Add Points to Random Series</button></div>
            <div class="row"><button ng-click="removeRandomSeries()">Remove Random Series</div>
            <div class="row"><button ng-click="toggleHighCharts()">HighChart/HighStock</div>
            <div class="row"><button ng-click="replaceAllSeries()">Replace all series</button></div>
            
            <div class="row">Min: <input type="number" ng-model="chartConfig.xAxis.currentMin"></div>
            <div class="row">Max: <input type="number" ng-model="chartConfig.xAxis.currentMax"></div>
            </div>
            
           <div class="modal-footer">    
            <button ng-click="dismiss()"  class="btn btn-danger pull-left" tabindex="-1"><i class="glyphicon glyphicon-remove"></i>Cancel</button>
            <button type="submit"   class="btn btn-danger pull-left" ><i class="glyphicon glyphicon-ok"></i>Save</button>

          </div>
       </form>
     </div>

Output:

I am seeking guidance on how to make the buttons align with the input boxes in the modal. Any suggestions? Thank you!

Answer №1

Instead of using div row, consider using ul li for better structure. Here's an example:

<div class="row">
    <ul class="liInline">
        <li>
            <button ng-click="addSeries()">
                Add Series</button></li>
        <li>
            <button ng-click="addPoints()">
                Add Points to Random Series</button></li>
        <li>
            <button ng-click="removeRandomSeries()">
                Remove Random Series</button></li>
        <li>
            <button ng-click="toggleHighCharts()">
                HighChart/HighStock</button></li>
        <li>
            <button ng-click="replaceAllSeries()">
                Replace all series</button></li>
                  </ul>
</div>

To ensure the buttons display in one line, add the following CSS to your page:

<style type="text/css">
    .liInline li
    {
        display: inline;
        margin: 0 5px;
        list-style: none;
    }
</style>

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

Acquiring information to display in a div using innerHTML

I aim to create a div that displays different animal sounds, like: Dog says Bark Bark I've attempted various methods but I'm unable to get each pair in the array to show up in a div: const animal = [ {creature: "Dog", sound: "B ...

Ways to toggle the display of a div depending on various radio button selections

Currently, I am working on a project using HTML along with Bootstrap and Jquery. My objective is to dynamically hide a div based on the selection of multiple radio buttons without requiring a submit button. The code snippet that I have provided below works ...

Stop the page from automatically scrolling to the top when the background changes

Recently, I've been experimenting with multiple div layers that have background images. I figured out a way to change the background image using the following code snippet: $("#button").click(function() { $('#div1').css("background-image ...

Customize the appearance and text in the navigation bar

Currently, I am in the process of creating my own personal website template. However, I have encountered an issue with styling the image and text within the navbar. I am looking to adjust the aspect ratio of the image in order to center it within the n ...

What other technique can I use to replace the creation of a jquery division?

I`m relatively new to all things related to web technologies and I am currently practicing and learning about them. On my practice page, I've experimented with various elements, including changing div heights based on the viewport height. Here's ...

What is the process for interacting with DOM Elements in Node JS?

JAVASCRIPT FILE const path = require('path'); const http = require('http'); const fs = require('fs'); const dir = '../frontend/'; const server = http.createServer((request, respond) => { console.log(reques ...

Troubleshooting issue with Calendar styling in Bootstrap and SimpleCalendar Rails integration

I am having trouble applying styling to my SimpleCalendar in Rails, using the gem. When I render it, this is what I see: https://i.sstatic.net/kJi7m.png Here is the CSS provided by https://github.com/excid3/simple_calendar: .simple-calendar { table { ...

What is the best way to incorporate web components into a React Js project?

I am currently unfamiliar with web components. My main goal is to integrate Google Material Components into my React.js project. Google Material Web Component can be found here: https://github.com/material-components/material-components-web Is there a ...

Tips on stopping slideToggle from opening and closing when clicked for the first time

When using the slideToggle function, I'm encountering an issue where the content div briefly shows on the first click but then immediately slides closed. Subsequent clicks work as expected and slide open correctly. This is the Jquery script I have be ...

A bottom border that spans the entire width, complete with padding

I am attempting to create a uniform border for each item on my list. However, due to the nested structure of the list, I have used padding to achieve this. As a result, the appearance is as expected and behaves normally. https://i.sstatic.net/cHNb3.png ...

Utilizing JQuery AJAX and PHP for Data Encoding

My webpage is encoded in HTML with the charset ISO-8859-2. All content on the page adheres to this charset and appears correctly. However, I am facing an issue when making an Ajax call to a PHP server. When I send the character á and receive the same valu ...

How can I effectively retrieve the JWT in a node environment?

I've successfully set up JWT authentication using Node.js. After the user signs in, Node.js generates a JWT and sends it back to be stored in the localStorage. However, I've encountered an issue when trying to access this token within the express ...

Achieving the perfect horizontal alignment of images

Currently working on a new project and here's the page I'm focusing on: The elements are exceeding the set height of their container and overlapping into the content area instead of pushing the existing content down. Any suggestions to fix this ...

Material-UI is having trouble resolving the module '@material-ui/core/styles/createMuiTheme'

Although I have searched for similar issues on StackOverflow, none of the solutions seem to work for me. The errors I am encountering are unique and so are the fixes required, hence I decided to create a new post. The company conducting my test provided m ...

What is the most effective method for establishing a notification system?

My PHP-based CMS includes internal messaging functionality. While currently I can receive notifications for new messages upon page refresh, I am looking to implement real-time notifications similar to those on Facebook. What would be the most efficient ap ...

Developing a PHP foreach loop that integrates seamlessly with a W3 responsive grid

Is there a way to generate multiple sets of three columns using w3.css and a foreach loop to fill each set with data from a sample database? Attempted code resulted in all the columns being in a single row: <?php foreach ($products as $index => $pro ...

Smart method for repositioning multiple elements on the display

Imagine we have multiple divs displayed on a screen: https://i.stack.imgur.com/jCtOj.png ...and our goal is to move them collectively, either to the left: https://i.stack.imgur.com/KBfXC.png ...or to the right: https://i.stack.imgur.com/c1cUw.png An ...

Fiddle demonstrates HTML functionality, while local testing is unsuccessful

Currently, I am in the process of creating an image slider and attempting to run it on my personal computer. However, upon doing so, I have encountered a problem where the page is not rendering correctly. Additionally, I receive an ActiveX warning message ...

Automate the process of filling up and activating a bootstrap dropdown upon a click, and clearing it out when it is

Is there a method to reveal the dropdown content only upon clicking instead of displaying all content at once and increasing the lines of HTML code? Perhaps using an onclick attribute on the button and incorporating a function inside? var data = [{ " ...

"Learn how to properly load the style.css file from the root directory into your WordPress page.php and single.php files

Having an issue with my WordPress theme. The style.css stylesheet does not seem to be loading in the page.php contents. I noticed that when I add <div class=w3-red"> <button class="w3-btn w3-red"> and other related codes while editing a post in ...