Issue with Bootstrap's pull-right class causing elements to overlap

I need help positioning a single button above a list, with the button to the right.

Whenever I try using the pull-right class on the button (or its containing div), the button ends up being covered by the list.

<div>
    <div class="pull-right">
        <button type="button" class="btn btn-default">Add</button>
    </div>
    <ul class="list-group">
        <li class="list-group-item">Lorem ipsum 1</li>
        <li class="list-group-item">Lorem ipsum 2</li>
        <li class="list-group-item">Lorem ipsum 3</li>
    </ul>
</div>

Check out the live example here: http://jsfiddle.net/paulbau/384YH/

htmlcsstwitter-bootstrap

Answer №1

To prevent the collapse of the div, it is recommended to add the pull-right class to the button element and then include a clearfix in the parent element.

View Updated Example

<div class="clearfix">
    <button type="button" class="btn btn-default pull-right">Add</button>
</div>

Another approach is to use text-align:right on the parent element instead of floating the button. Simply apply the class text-right to the parent, eliminating the need for a clearfix since the button remains in the document flow as an inline-block level element.

Check out this Example

<div class="text-right">
    <button type="button" class="btn btn-default">Add</button>
</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

If the overflow-x property is set to hidden for the html and body elements, the links in the footer will become unclickable as they will

Situation: Consider the following scenario with a simplified HTML example: position the footer behind the content and make it stick to the bottom when reaching the end of the page, the footer should slide up from behind the content I achieved this layo ...

htmlcssz-indexfootersticky-footer

Are you struggling with the issue of Function components not being able to be given refs? When you try to access the ref, it just fails. Perhaps you should consider using React.forwardRef

I have implemented the "styled" feature from Material UI to add styles to my components. Right now, I am in the process of cleaning up code to remove console errors. Initially, I encountered this warning message: "Warning: React does not recognize the con ...

javascriptcssreactjsmaterial-uistyled-components

What are the steps for rearranging a table column?

I am trying to show a text file in a table and allocate some code to each entry. I can display the text file. I can assign the code for each record (though this part is still under development). However, I have encountered an issue. The columns of the t ...

phphtmlcsshtml-table

.htacces Disables Styling on Page

I've been trying to understand the functionality of .htaccess RewriteRule. Here is a URL example where I have experimented with .htaccess: http://example.com/test/home This used to be: http://example.com/test/index.php?p=1 My goal is to redirect ...

css.htaccess

What is the best method for style.scss to communicate with style.css - should it be through @import, --watch,

As I observe the use of @import with mixins and partials in the code, I find myself puzzled as to why the programmers did not simply write @import style.css. Instead, they imported Susy, bourbon, vendors, utilities, and bases. It's a bit confusing to ...

htmlsassweb

Conceal the iframe if the source is http:// and there is no associated

Is there a way to hide the iframe only if the src starts with "http://"? This is what I have tried so far: <script type="text/javascript> if ( $('iframe[src^="http://"]') ) document.getElementById('iframe').style.d ...

javascriptjqueryhtmliframe

Creating a personalized login function in LaravelWould you like to learn how to

Currently, I am in the process of creating an application that caters to two distinct user groups: sellers and buyers. Each group has their own unique set of pages and forms for registration. I have successfully implemented the registration logic for both ...

phphtmlmysqllaravelframeworks

A single column in Bootstrap displaying text vertically

Looking to rotate the "VERTICAL_TEXT" (third bootstrap column) by 90 degrees, I attempted the code below: <div class="row"> <div class="col-xs-2" style="background-color: yellow;"> <span>FOO1</span><br/> & ...

htmlcsstwitter-bootstrap

What methods can I employ with JavaScript to catalog data collected from an HTML form?

Currently, my form requires users to input a username that cannot start or end with a period (.). I have implemented some code but I believe there is an issue with the .value[0] parts. //Checking Username if (document.getElementById("uName&quo ...

javascripthtml

Manipulating text alignment and positioning in CSS

Can someone help me achieve this CSS result? img1 This is what I have so far: img2 I'm struggling to center the elements and add a line in CSS. Any advice? I thought about using margin: auto, but I'm not sure if that's the best approach ...

css

Capturing user input with Angular Material forms in HTML

In the process of working on a project in Angular, I am utilizing the Angular Material component library. As part of this project, I am creating a form with multiple fields. Everything is functioning properly, however, the layout appears slightly off: ht ...

htmlangulartypescriptangular-material

When bullet points are aligned in the middle of wrapped text instead of the top line

When using bullet points on my Joomla site for a long sentence that wraps to multiple lines, I noticed that the bullets align with the middle of the wrapped text rather than staying flush with the top line. For example, if the text wraps to 3 lines, the bu ...

css

Learn how to incorporate an image into your Codepen project using Dropbox and Javascript, along with a step-by-step guide on having the picture's name announced when shown on the screen

Hey there, I'm in need of some assistance. I have a Codepen page where I am working on displaying 4 random shapes (Square, Triangle, Circle, and Cross) one at a time, with the computer speaking the name of each shape when clicked. I want to pull these ...

javascripthtmlimagedropboxcodepen

Issue with rendering components list in React.js

I am currently working on a project using React, and I'm facing an issue where my list is not displaying on render(). In my parent component, I have a list of components coming from SearchResult. Below is the relevant portion of my code: class Create ...

javascripthtmlreactjscomponents

Getting the most out of fonts with Webpack sass-loader

I recently set up a custom font in my project like this: $font-path: '~@/assets/fonts/'; @font-face { font-family: 'mainFont'; font-weight: 300; font-style: normal; src: url('#{$font-path}mainFont/mainFont.eot&apos ...

cssfontswebpackvue.jssass-loader

Stop the form submission from redirecting or refreshing by utilizing JavaScript

I'm facing an issue with a page on my website that includes textboxes generated from php, along with two buttons - GetData and SaveData. My goal is to enable users to press the enter key while editing a textbox and trigger the same action as clicking ...

htmlformssubmit

Is it possible to enable an email hyperlink to function on a computer?

I successfully created an email link that is functional on mobile devices by using 'href="mailto:[email protected]"'. When I click on the button from a mobile device, it prompts me to choose how I want the email delivered. However, when I tr ...

htmlhtml-email

Adjust the width of xAxis[0] and xAxis[1] in Highcharts to their default values

Hi there, I need some help with Highcharts. Is it possible to adjust the width of xAxis[0] and xAxis[1] as well as reset the offset of xAxis[1] at runtime? I have a chart with two x-axes that need to be resized to fit different sized divs. You can see an ...

javascriptcsshighcharts

Tips for creating a responsive image with a gradient overlay

Having trouble articulating my query, so here's a fiddle: https://jsfiddle.net/8zsqydj0/ .background-img-wrapper:before { content: ""; top: 0; left: 0; position: absolute; height: 100%; width: 100%; background: linear-gradient(to righ ...

htmlcsstwitter-bootstrapbootstrap-4linear-gradients

What is the function of table widths in accommodating wider details during insertion?

What happens when a detail width is set to <td width="10"...> and something wider, like a picture that is 20 pixels wide, is placed in that detail? ...

html