Issues with Bootstrap offsetting columns within a fluid row

I am currently working on a fluid design layout, where I need to place form group elements inside the row-fluid with one specific condition - they must be aligned to the right side.

<div class="row-fluid" style="background-color: #332619; color: #fff !important; padding-top: 25px; padding-bottom: 10px">
    <div class="col-lg-12">
        <div class="form-group pull-right">
            <input type="text" class="form-control" id="login_Email" placeholder="Email">
        </div>
        <div class="form-group pull-right">
            <input type="password" class="form-control" id="login_Password" placeholder="Password">
        </div>
    </div>
</div>

Fiddle example can be found at the following link:

http://jsfiddle.net/1pzh4x8s/

However, in my HTML page, the form-group elements are not enclosed within the row-fluid div as shown in the image below.

htmlcsstwitter-bootstrap-3

Answer №1

First things first, as far as I know there is no such thing as row-fluid. You should be using container-fluid and then include row inside.

Furthermore, it doesn't make sense to have col-lg-12 in the row and immediately after have col-6. The col-lg-12 is unnecessary in this case.

Moreover, while your elements are enclosed in markup, they are not visually organized. To ensure that the parent container extends to the height of the last or tallest floated child, you need to add clearfix.

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

Styling just a single div when the state changes

I have a scenario where I am rendering 4 divs based on data fetched from my backend. Each div is colored according to a state change. While I have successfully implemented this, the issue is that all 4 divs can be colored in this way simultaneously. I want ...

javascripthtmlcssreactjsstate

There appears to be a CSS problem cropping up on the right side of my website

Kindly pay a visit to the following URL: dev.dgconcepts.com.pk https://i.stack.imgur.com/sBC4Dm.jpg I am puzzled by the fact that whenever we swipe left or right on mobile responsive, the website shifts slightly on both sides. I am unable to identify ...

csswordpressmobilejquery-mobile

Once the div content is reloaded using AJAX, the refreshed HTML suddenly vanishes

My JS code reloads the div every 2 seconds: var auto_refresh = setInterval(function() { $('#indexRefresh').load('/includes/index_refresh_include.php?_=' + Math.random()); }, 2000); After that, I have an AJAX request that loads mor ...

javascriptjqueryhtmlajax

tips for moving a button 2 pixels up or down in position

How can I adjust the position of my button by a specific number of pixels up or down from where it currently is? Can you provide guidance on how to find the current location? Thank you in advance. ...

css

Counting JQuery Classes in an HTML Document

My task involves creating a dynamic HTML form that allows users to enter card values, which are then counted and styled accordingly. Each set of cards is contained within a <section> element. However, I encountered an issue with my jQuery code where ...

javascriptjqueryhtmlcss

Is it possible to restrict the application of jquery .css() to a particular media query only?

Whenever a user's browser width is below 1160px, a media query is set up to hide my website's right sidebar. They can bring it back by clicking on an arrow icon, causing it to overlap the content with absolute positioning. To achieve this functi ...

javascriptjqueryhtmlcssmedia-queries

Choose the span element within every other td that is not enclosed by an anchor tag

The table structure I am working with is as follows: <tr> <td> <a> <span> some content </span> </a> </td> <!-- td having straight span --> <td> <span> ...

javascriptjqueryhtmlcss

Mobile devices cause CSS drop shadows to malfunction | Next.js

Update: After some testing, I discovered that this issue is specific to iPhones. When I tested it with an android device, everything worked perfectly fine. However, when I tried viewing the page on two different iPhones, it broke on both. This problem see ...

cssreactjsiphonemobilenext.js

Identifying copy and paste behavior within an HTML form using .NET CORE MVC 2.1

I inherited a project at my current company and one of the tasks involves allowing users to paste multiple ISBN numbers from Excel into a search field on my Index page (HTML). Sometimes, the ISBNs are poorly formatted with letters or special symbols mixed ...

htmlasp.net-core.net-coreasp.net-core-mvc

Conceal the ::before pseudo-element when the active item is hovered over

Here is the code snippet I am working with: <nav> <ul> <li><a href="javascript:void(0)" class="menuitem active">see all projects</a></li> <li><a href="javascript:void(0)" class="menuitem"> ...

javascriptjqueryhtmlcss

Utilization of Scrapy chain selector amidst varied parent elements

I am trying to concatenate two selectors with different parents. The first selector currently in use is: ..css('td:nth-child(8) > span.cap.mtv > ::text') This returns: <Selector xpath="descendant-or-self::td[count(preceding-sibling::* ...

csspython-3.xxpathscrapy

Randomize elements with the click of a button

Every time the page refreshes, the words shuffle around. For instance, "May I# know# your name?" shuffles to "know May I your name". To display the correct sentence with "#" as "May I know your name?", click the SHUFFLE button to trigger the shuffling. HT ...

javascriptphphtmlshuffle

Getting data in a ng-Dialog Modal with AngularJS is a breeze!

Hi there, I'm new to Angular JS and facing an issue with displaying data from my MySQL database in a table as well as in a modal for more detailed information: I've included the HTML file named _detail_modal.html at the bottom of the page. ...

javascripthtmlangularjsng-dialog

Stylesheet for a React component

Why is the CSS code in my React component file not working even though I have imported it? import React from 'react'; import { Carousel } from 'react-bootstrap'; import './Banner'; ...

cssreactjs

Issues with Toggling Visibility in HTML, CSS, and Javascript

Currently, I am working on a website and following a tutorial called "Creating Slideshow using HTML, CSS, and Javascript" by W3Schools. In the project, I want to hide the thumbnail images located at the bottom and the navigation arrows initially and have t ...

javascripthtmlcssvisible

Learn how to create an endless scrolling effect on a static webpage using only pure JavaScript

Looking to achieve an Infinite Page Scroll Effect similar to Twitter without relying on jQuery or any other library, using pure JavaScript. I'm new to JavaScript and need assistance with implementing this effect in search results displayed within a La ...

javascriptphphtmlinfinite-scroll

Customize the look and feel of your website using jQuery's

Is there a way to use an icon from the jQuery Themeroller as a toggle button in a Ruby on Rails project? I want the icon to switch colors when clicked, but I'm not sure how to accomplish this. Any advice on how to achieve this functionality? ...

jqueryruby-on-railscssbuttonthemeroller

Utilize Bootstrap in an Angular template to effortlessly expand one element while collapsing all others

I'm facing an issue with a table in my component. Each row has a button that, when clicked, should expand to show some calculated data specific to that row. However, the problem is that when one button is expanded, it keeps other buttons expanded as w ...

javascripthtmlcssangularangular-ui-bootstrap

Arranging blocks within blocks? Placing additional text underneath a block

Looking to append some text at the end of a block called .label. Inside this block, there is a sub-element called .label_title, and below that is a picture/link enclosed in another block. Under the picture/link, I wish to include a short description while ...

cssblock

Utilize React JS to incorporate multiple instances of the Bootstrap carousel within a webpage using Reactstrap

I am having difficulty using the bootstrap carousel multiple times on a single page. I have attempted to copy it as a new item numerous times, but I keep encountering errors. <CarouselItem onExiting={() => setAnimating(true)} onExited={() => ...

htmlnode.jsreactjsbootstrap-4reactstrap