"Can someone help me with aligning to the right in a bootstrap card header

I'm facing an issue with aligning the h3 and input-group next to each other in a Bootstrap 4 card.

Initially, I attempted adding float-right to the input-group, but it did not yield the desired result. I also experimented with making the h3 and input-group inline-block, without success. P.S. I applied styles using an inline style sheet.

<div class="card-header">
    <h3 class="card-title" style="inline-block">Product List</h3>
    <div class="input-group input-group-sm col-sm-3" style="inline-block">
    <input type="text" class="form-control">
    <div class="input-group-append">
        <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
    </div>
    </div>
</div>

Answer №1

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <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 class="input-group input-group-sm" style="inline-block">
            <input type="text" class="form-control">
            <div class="input-group-append">
              <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

Just make sure to place .card-header in the section tag and nest both the title and .input-group within a .row .col-*-* structure.

Answer №2

Hopefully this information proves to be beneficial.

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />

<div class="card-header d-flex align-items-center">
    <h3 class="card-title">Product List</h3>
    <div class="input-group input-group-sm col-sm-3 ml-auto">
    <input type="text" class="form-control">
    <div class="input-group-append">
        <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
    </div>
    </div>
</div>

Answer №3

To properly align your input-group with the heading, make sure to add a row class before your input-group class. This is necessary because using col-sm-3 with the input-group adds padding to the left and right of the element. By adding the row class, you offset this margin and achieve alignment.

<div class="card-header">
    <h3 class="card-title" style="inline-block">Product List</h3>
    <div class="row">
        <div class="input-group input-group-sm col-sm-3" style="inline-block">
            <input type="text" class="form-control">
            <div class="input-group-append">
                <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></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

Populating a bootstrap grid with dynamic video content to enhance the visual appeal

I am currently working on a website grid that showcases new announcements and blog posts. In the design, I have a large column (col-sm-8 taking up 2/3 of the page) where I would like to include an introductory video to showcase our work. Despite trying va ...

The integration of Bootstrap with Laravel in Docker is currently experiencing technical issues

I am facing an issue while deploying Laravel. Although I have managed to deploy it, the Bootstrap styles are not working properly. I have a file named app.scss from where Bootstrap should be imported along with the custom styles that I have applied in the ...

Placing the input-group-addon above the text-input for better positioning

Feeling overwhelmed trying to finalize a simple form due to CSS issues? Check out this image for a visual of the problem: https://i.stack.imgur.com/PgCmN.jpg The label is slightly off to the left, and the button appears larger than the input field. The i ...

Chrome experiencing conflicts with backstretch when using multiple background images

In order to dynamically apply fullscreen background images in a WordPress site, I am utilizing Backstretch.js along with a custom field. Everything is functioning properly for the body's background image. However, there seems to be an issue with anot ...

"CSS - Struggling with header alignment in a table display element - need help with positioning

During my HTML layout creation process, I encountered a peculiar positioning issue that proved difficult to resolve. Consider the following HTML structure: <div class="outer-wrap"> <div class="header"> I am a Header </div> <div c ...

Deactivate and hide button that triggers modal dialog

Combining Bootstrap with AngularJS, I encounter an issue in my application where a link triggers a modal dialog using data attributes. My goal is to disable the button based on a state variable or function. The problem arises when AngularJS still executes ...

The concept of columns nested within columns

My goal is to create three new columns within the center column on my webpage. However, when I attempt to nest them, they end up stacking at the bottom of the center column instead of staying inside it. Is there a way for the center column to act as a back ...

Footer displaying strange behavior

I am working on creating a static web page within a larger Laravel project. Everything is functioning properly except for the footer which is displaying unusually. Despite being positioned at the bottom of the HTML structure, it is taking up more space and ...

Ways to Achieve the Following with JavaScript, Cascading Style Sheets, and Hypertext

Can someone help me convert this image into HTML/CSS code? I'm completely lost on how to do this and don't even know where to start searching for answers. Any assistance would be greatly appreciated. Thank you in advance. ...

How come the html element doesn't have a default height of 100%?

Is there a reason why the html element is not automatically set at 100% height by default? Can you think of any scenarios where having it take up less than the full height of the window would be beneficial? html { height: 100%; } [Update] I modified th ...

Create a div element that initially aligns to the left, expands to the full width of the window, and then shrinks back

Hi there! I am currently diving into the world of javascript and jQuery, with a specific goal in mind. I want to create functionality where a div expands to the width of the window when clicked, then shrinks back down to its original size but switches alig ...

What is causing the left scroll to not work with negative values?

My design features three blocks stacked on top of each other with an additional block at the bottom below the middle. Left <--------> Middle<---------->Right -----------------Bottom------------------ I have a couple of queries. Why is scr ...

Error: Dropdown functions correctly in standalone HTML page but fails to work within Angular component

Check out the code snippet below for a simple dropdown implementation: <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/c ...

Error: The modal function is not recognized by the window.$() method

The index.html file for my Vue.js project looks like this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w ...

Ensure that the modal div has scroll functionality without affecting the background of the page

Website Link: Instructions: To view the 'Rates' section, simply click on it in the top navigation bar. When you click on 'Rates', two separate divs will appear on the screen. One div acts as the main background, while the other div co ...

How can I repeatedly trigger an eventListener in JavaScript?

I'm currently facing an issue with calling the event listener for all 4 progress bars on my page. The problem is that it's only working on the first progress bar. I cloned the div with the id of 'mycontainer' using a for loop, but the e ...

Ways to make the current day stand out in a date picker calendar

Utilizing the ng-bootstrap datepicker, I am attempting to showcase an inline calendar in my application. However, the calendar fails to display the current day correctly, as depicted below: https://i.sstatic.net/KVhas.png Despite trying various solutions ...

Personalized 404 Error Page on Repl.it

Is it possible to create a custom 404-not found page for a website built on Repl.it? I understand that typically you would access the .htaccess file if hosting it yourself, but what is the process when using Repl.it? How can I design my own 404-not found p ...

Tips for implementing a collapsible sidebar within a single div element

Imagine a scenario where there is a div serving as a container for a sidebar on the left and main content on the right. The goal is to create a collapsible sidebar navigation, allowing users to hide or display the sidebar with the click of a button. Desp ...

Using JSON as HTML data within Flexbox for interactive hyperlink rollovers

Utilizing JSON to extract HTML data with unique html tags within Flex has presented a challenge. The limited support for HTML in Flex has made it difficult to implement a basic font color rollover effect on links. While Flex only allows for a few HTML tags ...