Searchbox aligned to the right using Bootstrap

Looking to place a searchbox on the right next to another container aligned left:

<div>
  <div class="pull-left"><span>SOME TEXT</span></div>
  <div class="pull-right">  
        <div class="row">
            <div class="col-xs-6 col-md-4">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" id="txtSearch">
                    <div class="input-group-btn"&gt;
                            <button class="btn btn-default" type="submit">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                    </div>
                </div>
           </div>
       </div>
    </div>
   </div>

Here is the Bootply link for reference: LINK However, it does not function as intended.

csstwitter-bootstrap

Answer №1

Utilizing the grid system eliminates the need for the pull-right class.

In your specific case, with text defined as col-*-8 and the search bar designated as col-*-4, it will automatically position the search on the right side.

<div class="container">
  <div class="row">

    <div class="col-*-8">
      Some Text
    </div>

    <div class="col-*-4">
      BUTTON
    </div>

  </div>
</div>

The resources like this Documentation and this video offer valuable information, and you can always consult the Bootstrap Official Grid Documentation.

For the solution, click on this link.

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

How come the cubic bezier timing function works flawlessly just on the first try when staggered transitioning element opacity over time with CSS and a touch of JS?

I'm currently working on a menu overlay that expands to fill the screen when a user clicks a button in the corner. I'd like the menu items to fade in one by one, similar to the effect used on this website: Most of the functionality is there, but ...

htmlcsscss-transitionsopacitycubic-bezier

Unable to use the select function in Android 2.2

When I click on the select button in my app, it displays multiple options. This functionality works smoothly on Android 4.1, but on Android 2.2, clicking on the select button does not have any effect and therefore the options cannot be selected. <sec ...

androidjqueryhtmlcss

Sliding Up Transition Effect for Footer with JQuery or CSS3

I am attempting to replicate a sleek slide up footer that caught my eye on The Internship Movie Site. I have created the wireframe layout, but I am struggling to figure out the correct CSS transition effect. Although I have experimented with the "top" and ...

jqueryhtmlcss

Validation with Javascript can trigger the display of a hidden element

Hello there, I could really use some assistance with the JavaScript part of this code. I have two JavaScript functions: one for validating if a radio checkbox is selected, and another for revealing the "answer". Currently, an alert pops up if no selections ...

javascripthtmlcss

I'm having trouble getting a CSS transition to work on a PNG sequence using jQuery in Mozilla

For my latest project, I decided to create an animation using a PNG sprite sequence. The idea was to add a smooth transition effect on hover and have the animation play in reverse when the hover state ends. If you want to take a look at the code yourself, ...

jquerycss

Striking a line through the hyperlink tag

I am attempting to create a crossed-out line above the content of an a tag for decorative purposes. The line should stretch across the entire width without intersecting with the actual text within the tag. This is my desired outcome: https://i.sstatic.ne ...

htmlcss

Executing Basic Calculations Instantly with Live Data in Qualtrics

I am encountering an issue with displaying the values on a slider in Qualtrics. I need to show the value where the respondent has placed the handle, as well as the complementary value from the other end of the scale. For example, if the user has chosen 55, ...

javascripthtmlcssruntimequaltrics

The anchor is ineffective (directs to the # but stays in place)

Every attempt I've made to find a solution online has failed. When I hover over the link, it directs me to the correct URL, but the page doesn't move. I'm using an up-to-date version of Chrome. Below is the code snippet: Edit: It seems tha ...

htmlcssanchor

Preventing Banner Images from Covering Side Carts in E-commerce Stories - Tips and Tricks

I'm encountering an issue with the side cart and suspect that my CSS is to blame. Can you assist me in resolving this problem? The webpage has a background image—a full-width banner. However, when I open the side cart, the image overlaps it, concea ...

htmlcssimagebackground

How can I keep images from getting cut off when using slick slider with a fixed background?

My current design includes a stylized slick-slider that extends beyond the top border: However, I have set a fixed background for .slick-list, ensuring only the content (text, picture, and button) scrolls: How can I avoid the picture being cropped in t ...

htmlcsslayoutz-indexslick.js

Guide to extend the width of h1 container to fill the entire parent div

Here is a snippet of code showcasing parent and child elements along with their current styling main #main-content-wrapper div { padding: 0; margin: 0; } img { border-radius: 8px; } .overlay1 { position: absolute; top: 0; right: .1px; bo ...

htmlcssbootstrap-5

What is the best way to adjust the height of a div element according to the width of its child element?

I am facing an issue with two nested divs, where the inner one is absolutely positioned inside the outer one. I want the height of the outer div to adjust dynamically according to changes in the width of the inner div. To better illustrate the problem, I h ...

htmlcss

How to vertically center content within a container-fluid in Bootstrap 4

I'm currently working on vertically aligning the two rows within the container-fluid. They are already aligned horizontally, but I want to center them on the screen. <!DOCTYPE html> <html lang="en"> <head> <! ...

cssbootstrap-4

"Can anyone explain why the text color of my font changes during a transition within a

Check it out on jsfiddle as well: https://jsfiddle.net/phmttrsh/ #btn { font-size: 16px; height: 34px; width: 120px; border: 1px solid #20ACB3; text-align: center; line-height: 34px; background-color: #20ACB3; color: #fff ...

htmlcss

Styling QSpinBoxes in QColorDialog without affecting QAbstractSpinBox styling with QSS

To give our Qt desktop application a stylish look, I have been utilizing Jorgen-VikingGod's impressive QSS framework as a foundation. Unfortunately, we encountered a hurdle when it came to usability on a dated tablet device running Windows. The tiny s ...

cssqtqtstylesheets

Tips for validating forms within a modal that includes tabs using angularJs

I have a modal form in angular with uib-tabset that includes tabs for forms A, B, and C within the footer section of the modal. However, I am facing an issue where I cannot access the forms to enable/disable the save button on the footer. The forms appear ...

angularjstwitter-bootstrap

Issues arising from the visibility and concealment of elements using bootstrap

Struggling with hiding certain content in my code. I'm fairly new to coding, having just started about a week ago. So far, I've learned HTML, CSS (which I find the most important), and how to utilize Bootstrap 4. My issue lies in wanting to hide ...

htmlcsstwitter-bootstrapbootstrap-4

Customized height for vertical Slick slider based on content length

I am facing an issue with my vertical slick slider: $('.slider').slick({ slidesToShow: 3, slidesToScroll: 1, arrows: false, dots: false, infinite: false, centerMode: true, vertical: true, focusOnSelect: true }); .slider { bac ...

jqueryhtmlcssslick.js

Designing a spacious and visually appealing interface with the Material UI Grid system, while

I created a personalized library using Material UI. The JSX code I am using is displayed below; <MyLayout container spacing={2}> <MyLayout item xs={9}> <MyComp1 /> </MyLayout> <MyLayout ite ...

cssreactjsmaterial-ui

Shift the checkbox label over to the left with just CSS

I am faced with the following code snippet: <div> <span> <input type="checkbox"> <label>I desire this to appear on the left-hand side</label> </span> </div> My goal is to shift the label to the left side of ...

htmlcsscheckboxlabel