Position the button on the right side of the progress bar

I'm struggling to align the Cancel button to the right of the progress bar. I've attempted using float and display inline, but so far, no luck. Any suggestions would be greatly appreciated.

Here's the code snippet:

<div class="row">
  <div class="progress progress-striped active" style="width: 500px; margin: 0px auto; height: 40px;">
    <div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div>
  </div>
  <div style="display: inline;"><button class="btn btn-warning">Cancel</button></div>
</div>

To see an example showcasing the issue, view this JSFiddle link.

csshtmlcss-float

Answer №1

Make sure to properly set the pull-left attribute for your div element in this manner

<br><br><br>
<div class="row">
  <div class="progress progress-striped active pull-left" style="width: 500px; margin: 0px auto; height: 40px; margin-right:10px;"><div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div></div>

    <button class="btn btn-warning pull-left">Cancel</button>

</div>

Check out the demo here

Answer №2

I incorporated the float:left property to both the progress bar and the cancel button, along with some minor CSS adjustments to better align the cancel button using properties like top and left:

UPDATED DEMO

Answer №3

Utilize Twitter Bootstrap and embrace the bootstrap class for styling rather than using custom styles.

Check out this fiddle: http://jsfiddle.net/wFLw5/1/

Here's the HTML code:

<div class="row">
  <div class="col-xs-10 progress progress-striped active"><div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div></div>
  <div class="col-xs-2"><button class="btn btn-warning">Cancel</button></div>
</div>

Answer №4

In my opinion, The Little Pig is spot on in recommending the use of authentic Bootstrap styles. To align the cancel button to the right of the progress bar, you can achieve this by applying display:inline-block; to both elements and adjusting the position of the cancel button accordingly.

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

"What is the best way to display mathematical equations written in HTML within a Flutter

My HTML Text <p>hello</p> <div class="mathjax-equation"> \(x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\) </div> I am interested in displaying this mathematical equation on a Flutter mob ...

htmlflutterwebmathwebview

unwelcome tab spacing in CSS

I am facing an issue with unwanted spacing in my lists. I have a code that generates three-column lists, each containing about eight rows. However, the first list item of the last row is causing an unwanted space. It seems to shift entirely to the next col ...

htmlcss

Selenium in Java is unable to send keys or click on elements

I am attempting to login to this specific website Below is the code I am using : driver.findElement(By.id("userid_sebenarnya")).sendKeys("myUserName"); This is the property for the input text field with id='userid_sebenarnya' <div class="f ...

javahtmlselenium

Tips for creating an onChange function in an input field using jQuery

I am looking to dynamically create inputs where each input has an `onChange` function with a variable. Here is my code: var distinct_inputs = 0; $('.icon1').click( function(){ distinct_inputs = distinct_inputs + 1 ; $('#insert-file&apo ...

javascriptjqueryhtml

How can I use JavaScript to trigger a button click event inside an iframe element

Is there a way to retrieve the inner HTML contents of a clicked element in an iframe loaded content using JavaScript? This code uses jQuery: var elements = document.getElementsByTagName('iframe'); [].forEach.call(elements, function(elem ...

javascripthtmliframe

jQuery loops through form fields and sets them as disabled

Trying to solve a question... In a form with multiple inputs, I only need to loop through the ones inside the div tagged player. <div class="player"> <input type="text" value="0" class="unit" /> <input type="text" value="0" class="unit" ...

javascriptjqueryhtml

What method can I use to enlarge the carousel component from the flowbit-svelte library?

I have been working on a project that requires a Carousel, and I decided to incorporate the flowbit-svelte carousel into my svelte project. While the carousel is functioning well, I am facing an issue with the component size. It seems to be cutting off my ...

csstailwind-csssvelteresponsivesveltekit

CSS - Layering <divs> on top of clear <div>'s

Is there a method to eliminate the transparency of content/images within a <div> that is transparent? Below is the provided HTML: <div id="main-button-wrapper" class="left"> <div id="button-bg-layer" class="box-bg-layer corner ...

htmlcss

How come when you add ({}+{}) it equals to "[object Object][object Object]"?

I ran the following code: {}+{} = NaN; ({}+{}) = "[object Object][object Object]"; What is the reason behind the difference in result when adding ()? ...

javascripthtmlnode.js

To modify the background of a text, simply click on the image

I recently discovered a helpful hack in an answer on this website, which allows an image to be resized when clicked using the checkbox method. I have successfully implemented this feature but encountered an issue when trying to apply a CSS style change to ...

htmlcssonclick

The challenge of stacking elements using Div and a Jquery slider

I am facing an issue with the z-index on my website. The photo slider I implemented at the top seems to be causing the drop-down menu for administration to be hidden behind it. I have attempted to adjust the z-index of different divs, but so far, my chan ...

jqueryhtmlcssslider

Extracting data from datepicker and passing it to PHP

My appointment booking form consists of 1 input and 2 selects: First: an input field using jQuery for selecting a date. Second: a select dropdown for choosing a hairdressing option. Third: another select dropdown that displays available times based on the ...

javascriptphpjqueryhtml

I'm curious about how I can determine the reason why my badge is not accepting HTML tags in its tooltip

My goal is to integrate a bootstrap badge-alert with an HTML tooltip. I am following the example provided at https://getbootstrap.com/docs/4.3/components/tooltips/ Despite my efforts, when using the code snippet below, the tooltip appears but the HTML tag ...

htmlbootstrap-4

Issue with Bootstrap 4 columns overlapping upon screen resizing

Whenever I use a row with 4 columns within a container that has 3 columns, the text file overlaps with the column containing an image when the screen size is reduced or viewed on an iPhone. Take a look at the code snippet and screen capture provided below ...

htmlcsstwitter-bootstrapbootstrap-4

Connect jQuery's resizable controls

Check out this jSFiddle. I am attempting to add event handlers for resizing $('oWrapper_'+num). However, the resizing does not occur. This is because $('#oWrapper_'+num) has not been added to the dom at the time of execution, so the se ...

javascriptjqueryhtmlcssjquery-ui

What methods does a webpage use to track views and determine when content has been seen?

I am interested in learning about the code and mechanism that detects when a specific section of a webpage has been viewed (purely for educational purposes). For instance, on websites like StackExchange it tracks when someone has thoroughly read the "abou ...

javascriptcssajaxbrowserweb

Tips for capturing and storing video with HTML5 WebRTC

Before reading the description, make sure to run the code snippet first. This will provide you with a better understanding of the structure. In the 2nd video element, I am trying to record, play, and save video. The issue I'm encountering is that the ...

javascriptangularhtmlangular6webrtc

Is it achievable to apply a shadow to a div using only CSS, or would images be required?

I am looking for a simple solution where the user can press something and see a shadow effect on a new div (div centered window) that appears on top of the entire page, maybe 1/4th in size. Can this be achieved using pure web-kit css? Or would a combinat ...

javascriptcsshtmlwebkit

Insert a new row into the table using jQuery right above the button

I am working on a table where I need to dynamically add rows in the same rowId upon clicking a specific button. For instance, when the "Add Row 1" button is clicked, a new row should be added under "Some content 1", and so on for other rows. <table i ...

javascriptjqueryhtml

There was an error encountered when attempting to parse the JSON data due to an unexpected token 'l' at position 0

I am attempting to display JSON values in a dropdown list that is nested inside a table. The JSON values I am working with can take the following form: var ids1 = [{"pid":"23221","des":"2321"},{"pid":"1301","des":"1301"},{"pid":"1003","des":"1003"}] va ...

javascriptjqueryhtmljavascript-objects