Set the button to align on the left side within a Bootstrap card

Creating grid elements in Bootstrap 3, I am faced with a challenge. When the viewport is below <768px, I want to align a button in the same position as shown in the image with the lion.

Check out the demo site here.

For viewports >768px, the button is positioned using the class:

.bottom-right {
   position: absolute;
   bottom: 8px;
   right: 16px;
}

How can I adjust the button position without affecting other buttons on the grid that also use the class bottom-right?

This is the desired end result:

https://i.stack.imgur.com/yhFDl.jpg

I have removed irrelevant code for clarity.

<... more content ...>
htmlcsstwitter-bootstrap

Answer №1

Enhance your button tag by adding an extra class, such as btn-custom 

<button type="button" class="btn btn-success bottom-right btn-custom">Read more</button>

Incorporate the following code snippet inside your @media (max-width: 768px) block

.btn-custom {
    position: static;
    width: fit-content;
    margin-top: 15px;
}

Answer №2

To enhance your button tag, include an additional class like this

class="btn btn-success  bottom-right bottom-right-flex"

In your CSS code under the section @media (max-width: 768px)

Add the following style rule

.bottom-right.bottom-right-flex {
  position: absolute;
  bottom: 8px;
  left: 16px;
 }

This specifies that the style should only be applied if BOTH the bottom-right AND bottom-right-flex classes are present on the same element. It allows you to target that specific element in that viewport without impacting other elements, while still retaining the bottom-right styling for larger viewports.

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

Limit the ability to zoom in a webview application

I am facing an issue with my Android WebView app that is designed to load a specific URL and display it along with its links within the app. Despite setting the webpage size to 720px x 1280px using CSS to fit the screen of a Galaxy S3, I am encountering di ...

androidcssandroid-webview

Successfully resolved: Inability to dynamically adjust button color according to its state

Currently I am working on a feature where a button changes color when it is disabled, but also has a custom color when enabled. Here is the code snippet I am using: Despite setting blue text for the button, it remains blue even after becoming disabled. Ho ...

javascriptcssreactjsmaterial-ui

Top method for centering a flexible SVG vertically once the page width becomes too narrow

Currently, I have two SVG images displayed side by side on a webpage. One SVG needs to maintain a fixed size while the other should scale as needed, and I have achieved this functionality. However, I am facing an issue where I want the two SVGs to align v ...

javascriptjqueryhtmlcss

The PHP code embedded within the HTML document and triggered by an AJAX request failed to

Here is an example of my ajax call: function insertModal(link) { $.ajax({ url: link, cache: false, dataType: "text", success: function(data) { $("#modalInput").html(data); }, error: function (request, status, error) { ...

javascriptphphtmlajax

Challenges with form validation

Hello everyone, I'm a newbie to JS and struggling with my code. It seems like everything should work, but it just won't. The issue seems to be with the phone number form validation. I've written code that, in theory, should do the job, but ...

javascripthtml

Utilizing CSS3 Pseudo Elements for Styling a Graph

I'm struggling to achieve the desired look of my ancestor chart using an unordered list format. Initially, I borrowed code from CSS3 Family Tree, but found it to be more like an organizational chart rather than a family tree. For testing purposes, he ...

htmlcsspseudo-element

What about employing the position:fixed property to create a "sticky" footer?

I've come across various methods for creating a sticky footer, such as Ryan Fait's approach found here, another one here, and also here. But why go through the trouble of using those techniques when simply applying #footer{position:fixed; bottom ...

htmlcssfootersticky-footer

Tips for resizing an image instead of a line in HTML5 canvas

For instance, we could create a function like this to draw a line: function drawLine(g, n, x1, y1, x2, y2){ g.beginPath(); g.lineWidth = n > 0 ? n : 1; g.strokeStyle = "rgb(0, 128, 32)"; g.moveTo(x1, y1); g.lineTo(x2, y2); g.str ...

javascripthtmlcanvasdrawing

Creating separation between a dropdown menu and its corresponding button

I'm dealing with a situation where I have a button that reveals a hidden droplist upon hover. The problem is that there is no space between the button and the droplist, causing interference with the functionality. My attempt to create some distance b ...

htmlcss

Issues with CSS rendering in the Chrome browser are causing display problems

After successfully creating an iFrames page tab on Facebook that looks great in Firefox and Internet Explorer, I encountered an issue with the div positioning in Chrome. You can view the page here: Oddly enough, this is the only page experiencing problems ...

cssgoogle-chrome

What advantages does using ImageMagick to resize images offer compared to using CSS?

My Ruby on Rails application has a feature that allows users to upload images. I have discovered that Active Storage can utilize ImageMagick to resize images using this code: model.image.variant(resize: "100X100") However, resizing images can also be ach ...

htmlcssruby-on-railsimage-processingimagemagick

Organize data in a Vue.js table

Currently facing an issue with sorting my table in vue.js. Looking to organize the table so that campaigns with the highest spend are displayed at the top in descending order. Here is the code I'm working with: <template> <div class=" ...

javascripthtmlvue.js

Styling applied exclusively to the field for mobile devices

As I work on creating a navigation bar using Bulma and Vue.js, I encounter an issue with the dropdown menu behavior. When the navbar collapses into the hamburger menu, the dropdown list remains in display: block; mode. To address this, I attempted a workar ...

cssvue.jsbulma

Choose the heading element based on its class

I am trying to target a specific element by its class and store it in a variable, but I specifically need this element to be a heading element. To clarify: at any given time, there are always exactly 3 elements with this particular class on my page: an < ...

javascriptjqueryhtmldom

Developing a hovercard/tooltip feature

I'm currently working on developing a hovercard feature for a social media platform I'm building. The concept involves displaying additional information about a user when their name is hovered over. The hovercard will appear with the user's ...

jqueryhtmlcssajax

Obtain the data from the hyperlink destination

Having some trouble extracting a value from an href link to use in my database operations. Unfortunately, I couldn't retrieve the desired value. Displayed below is the code for a button: <a class="btn btn-info" href="scheduleSetTime.php?id=&apo ...

javascriptphpjqueryhtml

How come I am unable to connect my CSS to my EJS files?

Having difficulty linking my css files to my ejs files. Using a standard node.js/express setup, I'm attempting to connect my main.css file from the public/css directory to my index.ejs file in views. The html and routing are functioning correctly. Ple ...

htmlcssnode.jsexpressejs

Tips for eliminating annoying white space on petite gadgets with css programming?

Having an issue with my static html page where I am seeing white space on the right side when checking responsiveness. I have tried multiple solutions found here on stack overflow, including adding the following code: I attempted to add this inline: html ...

htmlcss

``Modeling CSS Classes Using the Adjacent Sibling

As a coding novice, I challenged myself to rebuild my WordPress site using HTML, CSS, and JavaScript. In my quest for the best way to create a responsive navigation bar, I stumbled upon an example on W3Schools. My dilemma lies in how to handle Adjacent Cl ...

css

Modify the c3 axis labels using CSS

I've been using the c3 package in R, which serves as a wrapper for the C3 javascript charting library created by Masayuki Tanaka. One issue I encountered is that my c3 chart was cutting off the last date on the x-axis. After inspecting it in Chrome I ...

cssrc3.js