How come the button is shifting down even though it's set to display inline?

I've recently delved into the world of Bootstrap and CSS, but I'm facing a unique challenge. Despite my research efforts, I couldn't find a solution to my specific issue. I have a 

<div class="col-md-6">
where I've nested two divs - one with the class "col-md-4" and the other with the class "col-md-2". Ideally, these child divs should align within the parent div on the same line, but for some reason, the second child div is being pushed down. I tried using style="display:inline" on the second child div, but it didn't yield the desired result. Strangely, when I remove the parent div with the class "col-md-6", everything works as expected. I'm puzzled as to why they aren't fitting within the parent div, especially considering its size.

The code below illustrates the issue:

<div class="row">
    <div class="col-md-6">
      <div class="col-md-4">
        <input class="form-control" id="addItem" style="display: inline;">
      </div>
      <div class="col-md-2">
        <button class="btn btn-default" style="display:inline;">submit</button>
      </div>

    </div>

  </div>

In contrast, this example functions correctly:

<div class="row">

      <div class="col-md-4">
        <input class="form-control" id="addItem" style="display: inline;">
      </div>
      <div class="col-md-2">
        <button class="btn btn-default" style="display:inline;">submit</button>
      </div>

    </div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Whenever you want to create a column, it should always be within a new row. This is because the grid system divides rows into 12 columns. If you nest a column inside another column, the grid structure breaks and that's why your code isn't working.

Take a look at this example:

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-4">
                <input class="form-control" id="addItem" style="display: inline;">
            </div>
            <div class="col-md-2">
                <button class="btn btn-default" style="display:inline;">submit</button>
            </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

Is there a left and right margin when incorporating Bootstrap grid?

Currently, I am working on developing an Angular application and utilizing Bootstrap columns to easily format and space my page. However, I am facing an issue where there seems to be some unwanted margin around the element even though I have applied col-lg ...

htmlcssangulartwitter-bootstrap

I am encountering unexpected issues with the functionality of img srcset and sizes

Attempting to enhance the responsiveness of images on my website has led me to discover the srcset and sizes attributes. The objective is clear: If the screen size exceeds 600px or falls below 300px, a 250x250 image should be displayed For sizes in betw ...

htmlcssimageresponsive-designsrcset

What is the best way to validate if fields are blank before sending a message using the button?

<template> <div> <div class="form-group"> <label for="name">First Name</label> <input type="text" class="form-control" v-model="firstName" placeholder="Ente ...

javascripthtmlnode.jsvue.js

styling the search input element in webkit with right-to-left text direction

I have included a search input in my code like this: <input type="search" placeholder="search" /> Webkit has different styles for an input field with the type 'search'. One of these styles is displaying a cancel ('x') button on ...

htmlcsswebkitright-to-left

The HTML checkbox appears disproportionately large on the user's screen when using Firefox and Chrome, but not when using Internet Explorer

There seems to be a strange issue that I've come across. One of our QA tester's computers is displaying an HTML checkbox in a very large size when using Firefox and Chrome, but it appears normal in size when viewed in IE. Meanwhile, on my comput ...

htmlcsscheckboxcross-browser

Adjust the backdrop for the currently chosen tab

For some reason, my code isn't working even though I thought I did everything correctly. My goal is to change the background color for the selected tab. This is what I have tried so far: <script> $('#navigation li').click(function() { ...

htmlbootstrap-4tabs

Exploring Techniques for Adjusting Website to User's Screen Resolution

My website is currently designed for a screen resolution of 1024x768. However, I am aware that when viewed on computers with smaller or larger screen resolutions, the layout starts to distort. Is there a way to make the website adaptable to any user&apos ...

javascriptcsshtmlresolution

Avoid constantly destroying the Bootstrap Popover

I am facing a challenge with retrieving data from two checkbox inputs inside a popover. The issue arises because the popover appears in the DOM when I click a button, but is removed when I click it again. It seems that the problem lies in the fact that Jav ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Does CSS in the current IE9 beta allow for text shadows to be implemented?

Text shadows look great in Firefox and Chrome. For example, I have a basic website for streaming videos. Unfortunately, there are no shadows in IE9 for me. This is my CSS code: p { color: #000; text-shadow: 0px 1px 1px #fff; padding-bottom: 1em; } ...

javascriptcsshtmlshadows

Adapting Bootstrap components based on the screen size: Viewport-driven

Check out our Custom Sizing Solution, designed to offer sizing options tailored to different devices and viewports. Here's what we can do: For small devices, the width will be set at 100% For larger devices, the width will be adjusted to 75% For ext ...

csstwitter-bootstrap

Ensure that the div remains fixed at the bottom even when multiple items are added

Following up on the previous question posted here: Sorting divs alphabetically in its own parent (due to many lists) I have successfully sorted the lists alphabetically, but now I need to ensure that a specific div with a green background (class: last) al ...

javascripthtmljquery

Is there a way to modify a CSS class in Chrome that is only visible when I perform a drag action?

For the website project I am working on, I have an element that only changes its style when I drag something over it. This is achieved by adding a CSS class to it. However, editing this style has proven to be challenging because I cannot live edit it in C ...

cssangularjsgoogle-chrome-devtools

Develop a custom Dockerfile for hosting a Python HTTP server in order to showcase an HTML file

I have a folder containing a single HTML file (named index.html) with basic text. When I execute the python command: python -m SimpleHTTPServer 7000 a server is initiated at port 7000 in the same directory to display the page in a web browser. Now, I am ...

htmlpython-2.7dockerdockerfile

Ways to eliminate the default padding in Ant Design

I have implemented a collapsible sidebar. However, the content inside the sidebar is automatically adding padding values of 16px on the top, right, bottom, and left. I want to remove this automatic padding. render() { return ( <div className="common ...

cssantd

How can I overlay text on top of an image?

I want to create a design where half of the text overflows and overlays the image on the right side. How can I achieve this using a Grid item? I've tried using "absolute", "relative", and "z-index" positions, but they don't seem to work in the MU ...

cssmaterial-ui

Using a Node.js module to shrink HTML files

Is there a way to minify HTML before rendering it? I'm aware of console minifiers like: html-minifier However, I am looking for a solution that can be implemented in the code itself. Something along the lines of: var minifier = require('some- ...

javascripthtmlnode.jsminify

What is the best way to align my navigation bar in the middle of two elements with different

I've been struggling with my code for the past couple of days, but nothing seems to be working. I need the navigation bar to be perfectly centered between two elements (<img> and <form>). Right now, it's almost centered, but it starts ...

htmlcssresponsive-designfluid-layout

Struggle with Arranging Elements in CSS using position absolute & relative

Currently tackling a project involving adjusting the positioning of elements within a sidebar. The sidebar holds Font Awesome icons and corresponding text elements, with the goal of moving both the icons and text together as one unit using attribute and cl ...

htmlcssiconscss-positionfont-awesome

Confusion with CSS properties for text alignment and vertical alignment

Recently, I started working on a basic webpage to experiment with CSS since I struggle with it. One issue I'm facing is with the navigation bar. Specifically, the text-align: center property in the .Item class and the vertical-align: bottom property ...

cssreactjs

Map / Area enveloped in darkness

I'm currently working on a map that includes an area, but I'd like to add a shadow effect around it. I'm struggling to figure out how to achieve this. <map name="map_bottom"> <area id="area_bottom" shape="poly" coords="0,0,0,37 ...

htmlcssdictionaryshadowarea