The text relentlessly presses the button within the confines of bootstrap

I am facing an issue with the alignment of the buttons in my HTML code. As the text inside the <p> tag grows, it pushes the button to the right. I want all the buttons to be positioned in the bottom-right corner of every div regardless of the text size. Here's the relevant CSS code:

#dugme {    
  font-weight: bold;
  left: 15vw;
  line-height: 2vw;
  color: white;
  background-color: rgb(17, 142, 146);
  text-align: center;
  border: white 2px solid;
}

#dugme:hover{
  background-color: aliceblue;
  color: rgb(17, 142, 146);
}

#stripovi {
  padding-top: 2em;
  margin-bottom: 1em;
  margin-left: 10px;
}

#comic {
  display: inline-block;
  background-color: rgb(230, 200, 119);
  border-radius: 3px;
  margin-right: 15px;
  margin-top: 5px;
  margin-bottom: 5px;

}

.naziv {
  font-family: 'Fredoka One', cursive;
  float: right;
  margin-top: 100px;
  word-wrap: break-word;
  margin-top: auto;
  margin-left: auto;
}

.container-fluid{
  background-color: rgb(74, 198, 202);
}
<div class="row" id="stripovi">
      <div class="comic w-50">
          <div class="comic-img-top d-flex align-items-center form-group" id="comic">
              <div class="thumbnail">
                  <img class="img-responsive" src="slike/c1.jpg" alt="comicbook">
                  <div class="naziv">
                      <p class="col p-2 m-0">Heavy Metal Comic</p>
                      <p class="col p-2 m-0" style="color: rgb(155, 151, 151); text-align: left;">ID:0101</p>
                  </div>
              </div>
              <div class="form-group">
                  <button type="button" class="btn btn-info" id="dugme">Dodaj</button>
              </div>
          </div>
      </div>
      <div class="comic w-50">
          <div class="comic-img-top d-flex align-items-center form-group" id="comic">
              <div class="thumbnail">
                  <img class="img-responsive" src="slike/c2.jpg" alt="comicbook">
                  <div class="naziv">
                      <p class="col p-2 m-0">Deadly Class</p>
                      <p class="col p-2 m-0" style="color: rgb(155, 151, 151); text-align: left;">ID:0101</p>
                  </div>
              </div>
              <div class="form-group">
                  <button type="button" class="btn btn-info" id="dugme">Dodaj</button>
              </div>
          </div>
      </div>
  </div>

Check out the button alignment here. In the second comic, the text pushed the button to the right, but I want all buttons to stay in the bottom right corner of each div. Thank you for your help!

Thank you in advance!

htmlcssbootstrap-4

Answer №1

To achieve the desired layout, simply apply the following changes to your code: position: relative should be added to the comic-img-top class. Remember, it is best to use classes instead of repeating ID attributes as IDs should be unique. Additionally, introduce a new custom class to the form-group container that houses the button.

CSS

position: absolute;
bottom: 0;
right: 0;

By making these adjustments, you will see the expected outcome:


#comic { // Transform this into a class to avoid repetition as IDs must be unique
position: relative;
}

.form-group.new-button-container-class{
position: absolute;
bottom: 0;
right: 0;
}

<HTML>
<div class="form-group new-button-container-class">
<button type="button" class="btn btn-info" id="dugme">Dodaj</button>
</div>

Answer №2

Include the following code to set your element's position:

position: absolute;

By using position: absolute, you can specify the positioning method for an element. This property allows you to set the element's position relative to its containing element. The syntax for this property is 

position: static|absolute|fixed|relative|sticky|initial|inherit;
. You can also achieve the same effect using JavaScript:

object.style.position="absolute"

To fully implement the positioning, modify the existing CSS code as follows:

 #dugme {    
    font-weight: bold;
    left: 15vw;
    line-height: 2vw;
    color: white;
    background-color: rgb(17, 142, 146);
    text-align: center;
    border: white 2px solid;
    position: absolute;
}

With this addition, ensure that everything is correctly aligned.

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

Dropdown trigger changing image with AJAX

When a color is selected from one dropdown menu, it triggers a change in another dropdown menu and the image displayed. The ID for the dropdown affected by the color selection is "style_code". <script> function getState(val) { $.ajax({ ...

phphtmlcssnavigation

Using MDBootstrap for reactjs, incorporating a modal into a table for enhanced functionality

As a newcomer to the world of React.js and Material Design Bootstrap, I am attempting to load a dataset onto a table using a mock JSON file. After some trial and error, I managed to achieve a certain level of success with this task. My goal is to include a ...

javascriptreactjsbootstrap-4bootstrap-material-designmdbreact

Incorporate 3 additional compound filters with shuffle.js

Is there a way to add a third compound filter to the existing shuffle.js code provided below? // ES7 will have Array.prototype.includes. function arrayIncludes(array, value) { return array.indexOf(value) !== -1; } // Convert an array-like object to a r ...

javascriptjqueryhtmlshuffle

The importance of CSS style prioritization

I can't seem to figure out CSS declaration priority. I have an external CSS file with a rule and some inline CSS declarations that are supposed to override it. According to my understanding, inline styles should take precedence over external CSS rules ...

htmlcsscss-selectors

Trouble With OnClick and On/Off Class Script Functionality in Chrome and Internet Explorer

I am working on a page with two iframes and a basic navigation bar. The navigation bar links are set up to target one of the iframes and replace its content when clicked. However, I am having trouble highlighting the currently selected link in the iframe - ...

javascriptphphtmlcssfirefox

Customizing a material-ui theme with withStyles() in conjunction with withTheme()

After developing a series of reusable components, I started styling them by utilizing classes prop to override the MUI classnames. To streamline the process and prevent repetition in more intricate components, I consolidated common styles into a theme. Eac ...

cssreactjstabsthemesmaterial-ui

Having trouble with margins not working after adding the clear property in CSS?

I recently applied clear:left to a div in my code, but when I tried adjusting the top margin, nothing seemed to change. Take a look at the snippet below: <!DOCTYPE html> <html> <head> <title>Float</title> <meta cha ...

htmlcss

``Incorporate images into a slideshow container with proper alignment

I'm currently using a jquery slideshow on my homepage with fading images, but I'm having trouble centering them. The images are all different sizes and they're aligning to the left instead of being centered. Here is the CSS code I've b ...

csshtml

What is the best way to assign attributes to multiple HTML elements using an array?

Seeking assistance to hide various sections in my HTML file upon button click, with the exception of one specific section. Encountered an error message: Uncaught TypeError: arr[i].setAttribute is not a function Here's a snippet of my code: const hide ...

javascripthtml

What is the method for shifting content as the window is resized to ensure it remains in its original position?

My page features a grid with three div elements. Each div is the size of the viewport, resulting in only one div being visible at a time, while the other two remain outside the view. This makes the grid three times larger than the viewport. When resizing ...

javascriptjqueryhtmlcss

What is the best way to detect when I switch to a different tab than a specified tab using HTML and jQuery?

Here is the HTML code I am working with: <div id="tabsWithStyle"> <ul> <li><a href="#data1">Data 1 TAB</a></li> <li><a href="#data2">Data 2 TAB</a></li> <li>< ...

jqueryhtmltabs

Struggling to understand how to assign a specific color to individual divs within a loop

Featured on the main page of my website are 3 posts, each accompanied by a div link below. I want each of these 3 divs to have a distinct color. Any new posts within this category will appear here as they are published, but only the latest three will be vi ...

phphtmlcsswordpress

Contrasting .queue() with jquery.queue()

Can someone clarify the distinction between .queue() with .dequeue() and $.queue() OR jquery.queue()? If they serve the same purpose, why did jQuery provide them in two separate documentations? Could someone provide examples to illustrate their difference ...

javascriptjqueryhtmlqueue

Error alert: The $ symbol is not defined

I followed a tutorial to create an auto-advancing slideshow in JavaScript/jQuery and it worked perfectly on jsfiddle. However, when I transferred everything to Dreamweaver, it stopped functioning. I have triple-checked that all the necessary files are link ...

javascriptjqueryhtmlcssslideshow

Is the Wordpress search bar a clickable link?

Whenever I attempt to click on the search box, it redirects me to the comments section of a post as if it were a link. It's difficult to provide more information about this issue, but the problem occurs on the website lbk.newcoastmedia.com/wordpress w ...

htmlwordpresswordpress-theming

Creating responsive images with Bootstrap 5

1 I am currently using Bootstrap 5 to develop a website and encountering an issue with getting images to move above text in the feature and mission sections on mobile or tablet screens. Previously, I was able to achieve this effect using the following cod ...

htmlcssresponsive-designfrontendbootstrap-5

Aligning text and lists using Bootstrap on both desktop and mobile devices

I want to format a text with a list similar to the images provided https://i.stack.imgur.com/6giDH.png for desktop and tablet view, but for mobile display I would like it to look like this https://i.stack.imgur.com/7zSXi.png This is my current approach ...

htmlcsstwitter-bootstrap-3

A preselected default option determined by your geographical location in an HTML document

After searching extensively for a solution, I've found this to be quite challenging... In my website's HTML page, there is a dropdown menu containing all the countries. <option value="AF">Afghanistan</option> <option value="AX"&g ...

html

Integrate Bootstrap 4 with your Angular 6 or Angular 7 application

Currently working on an Angular project that utilizes Bootstrap 4. Seeking assistance with incorporating SCSS into my Angular application. The question at hand is: Are the steps for adding Bootstrap 4 SCSS in Angular 6 and Angular 7 identical? For exa ...

angularnpmbootstrap-4angular-cliangular7

The bootstrap modal display issue: black background visible

In my HTML file, there are two modal dialogs that seem to be causing an issue. Interestingly, whichever modal dialog is placed first in the sequence of the HTML code displays properly when the button is clicked (and vice versa). Both modal dialogs have u ...

jqueryhtmlbootstrap-4bootstrap-modal