How to fix Bootstrap 4 Card Header and Form-Control wrapping onto a new line

I am currently working with Bootstrap 4 and facing an issue with the Card Header. When I add several buttons, they align in one row, but when I add a textbox, it always breaks into a new line. Can anyone provide assistance with this? I would like to have all the controls in one line.

https://i.sstatic.net/sJOkf.png

<div class="card">
                <section class="card-header">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-6">
                                <h3 class="card-title" style="inline-block">Product List</h3>
                            </div>
                            <div class="col-sm-6">
                                <input type="text" class="form-control form-control-sm" />
                                <button class="btn btn-sm btn-primary" type="button">Action 1</button>
                                <button class="btn btn-sm btn-success" type="button">Action 2</button>
                                <button class="btn btn-sm btn-primary" type="button">Action 3</button>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="card-body" style="min-height: 300px;">
                    this is a body
                </section>
            </div>
cssbootstrap-4adminlte

Answer №1

I attempted to address the problem in a different way. Incorporating a btn-group within an input-group appears to be a more elegant solution.

https://i.sstatic.net/OcSVU.png

                <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Sample Action</h3>

                    <div class="card-tools">

                        <div class="input-group input-group-sm" style="width: 450px;">
                            <input type="text" name="table_search" class="form-control float-right" placeholder="Search">

                            <div class="input-group-append">
                                <button type="submit" class="btn btn-default">
                                    <i class="fas fa-search"></i>
                                </button>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-tool dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                        <i class="fas fa-wrench"></i>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-right" role="menu" x-placement="bottom-end" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(46px, 19px, 0px);">
                                        <a href="#" class="dropdown-item">Action 1</a>
                                        <a href="#" class="dropdown-item">Action 2</a>                                            
                                        <a class="dropdown-divider"></a>
                                        <a href="#" class="dropdown-item">action 3</a>
                                    </div>
                                </div>                                   
                            </div>

                        </div>
                    </div>
                </div>
                <!-- /.card-header -->
                <div class="card-body" style="min-height: 300px;">
                    this is a body
                </div>
                <!-- /.card-body -->
            </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

Adaptive search bar and components housed within a casing

I am struggling to create a responsive box with a search feature for a mobile website. My plan is to incorporate jquery functions into the site, so I need to design an outer container that will house a distinct logo and search bar. However, when I test thi ...

htmlcss

How is the height or width of the Bootstrap modal determined?

I'm having trouble utilizing Jschr's modified Bootstrap-Modal for different modal sizes. I can't seem to understand why some modals appear taller, wider, or have other specific dimensions. For more information, refer to the documentation: ...

javascriptcssajaxhtmltwitter-bootstrap

The Materialize CSS tabs are aligning vertically below each other, but functioning correctly upon refreshing the page

When using materialize css tabs, all the divs load one below the other on the initial page load. If I refresh the page, it starts behaving properly. <div class="row"> <div class="col s12"> <ul class="tabs"> <li class="tab col s ...

javascripthtmlcssreactjsmaterialize

Troubleshooting problems with image display following jQuery animation

Check out this awesome page I found: where you can see a neat list of blog posts displayed in rows of 4. I've added a cool jQuery animation to the 'cards' so that they fade in one by one: jQuery('.fade-in-post-container .elementor-po ...

javascriptjqueryhtmlcss

Invoke a modal using AJAX data in Laravel version 8

Encountering an issue with my application, specifically when attempting to edit an entry in the table. The modal displays the data correctly when clicking the edit button in the first row, but not when clicking the second row. Here is the controller code: ...

phpajaxlaravelbootstrap-4laravel-8

What is the process of making circle or square shapes with text inside using React, without the use of SVG images?

Is there a way to create circle and square shapes in React with custom text inside, without relying on SVG images? Check out this example: https://i.sstatic.net/iHZgy.png I attempted the code below but it did not render any shapes: import React from &apos ...

javascripthtmlcssreactjs

The navigation bar fails to respond when clicked on mobile devices

Calling all developers! I need a helping hand to tackle an issue that's holding me back from completing this website. Can someone please take a look at on their smartphone browser and figure out why the responsive menu icon isn't working when cl ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Steps for adding a stroke to just the left and right sides of an SVG wave:

How do I apply a stroke only to the right and left sides of an SVG (specifically a wave SVG)? <svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="wave"> <svg viewBox="0 0 100 50" ...

htmlcsssvg

Using -webkit-hyphens: auto in Safari does not function properly when the width is set to auto

I have a situation with an h3 element where I am unsure of its width. As a result, the width is set to auto by default. However, I need the text inside this element to have hyphenation applied to it. This h3 element is within a flex container along with an ...

htmlcsshyphenationcss-hyphens

The appearance of HTML in JSP and CSS output in a Spring application is different from the local environment

For my web application's landing page, I created the design using HTML and CSS. Typically, I first design it on scratchpad.io before implementing it into my STS IDE. However, when I run the application, the output of the page appears different from th ...

htmlcssjspformatting

Customize MUI Tabs to resemble the design of Bootstrap Nav Tabs

Looking to customize Material UI Tabs to resemble Bootstrap Tabs. Made significant changes, but struggling with removing the border-bottom on the activeTab. In Bootstrap, they use marginBottom: -1px on the active tab, but it doesn't work for me. Any s ...

cssreactjstwitter-bootstrapmaterial-ui

Display a hidden div upon loading the page if a certain condition is met

As a beginner in this field, I am struggling to assist a friend with a project. He needs a simple quote form that can generate HTML quotes for his client on a private WordPress page. The form should display a specific div based on the radio button selecti ...

javascriptphpjqueryhtmlcss

Check if the data-indices of several div elements are in sequential order using a jQuery function

Is there a way to implement a function in jQuery-ui that checks the order of div elements with data-index when a submit button is pressed? I have set up a sortable feature using jQuery-ui, allowing users to rearrange the order of the divs. Here is an exam ...

javascriptjqueryhtmlcss

What is the best way to set breakpoints on Material UI components?

Currently, I am exploring material-ui and I'm curious if there is a way to set all breakpoints at once. The code snippet below seems quite repetitive. Is there a more efficient method to achieve this? <Grid xs={12} sm={12} md={12} lg={12} xl={12} ...

cssreactjsmaterial-ui

Adding or Deleting Rows from Input Table

I'm in the process of creating a website that features an input table allowing users to easily add or remove rows at their discretion. The desired UI is shown below: https://i.sstatic.net/EFAlM.jpg Here is the HTML code I have developed so far: & ...

javascripthtmlcssbootstrap-4

Troubleshooting problem with Bootstrap Modal inputs and header tags

When it comes to the button that says data-whatever="Add a recipe", I think it is causing my input placeholders to be overridden, and I'm not sure why. If I remove it, everything works but the h5 header for the new recipe will be blank. <button ...

htmlbootstrap-4bootstrap-modal

Using jQuery to dynamically update elements as the user scrolls

Looking to dynamically update the position of a div on a webpage as the user scrolls down? Check out this JavaScript script that utilizes a h2 HTML element to display the y-coordinate of the element. To see the script in action, visit the following jsFiddl ...

jqueryhtmlcss

What is the best way to align the items in two lists at the center as if they were all individual

Q: How can I center the list-item elements of two unordered lists as if they were children of just one list? Example: {[1][1][1][1][2][2]} { [2][2] } CSS Alignment Challenge <div> <ul> &l ...

htmlcss

Auto-scrolling text box cursor movement

My query is quite similar to the topic discussed in this thread on automatic newline in textarea. However, my situation involves multiple textareas with a 1-row attribute, making it seem like writing on air due to the absence of visible borders (I've ...

javascriptjquerycsshtml

Adjusting the CSS class name based on the screen size and applying styles to that class only during the "onload" event

The website I am currently developing can be found at . It is built on WordPress using the Avada theme and everything seems to be functioning correctly. The image move up effect on this site is achieved with the following JavaScript: window.onload = funct ...

javascriptjquerycsswordpress