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

Generate dynamic lines with evolving hues using CSS3

While working on a fresh web project, I came across the need to emphasize my headers (h1, h2, h3, h4) with underlines. My goal is to have these underlines grow and change color dynamically, similar to what can be seen here: . Is there a way to achieve thi ...

jquerycss

Trouble aligning a div at the center within another div using margin auto

I am facing an issue with centering a div horizontally inside another div. Here is my HTML code: .block { padding: 0px 20px; max-width: 820px; margin: 0 auto; background-color: #ff0; } .container { margin: 0 auto; display: inline-block; bac ...

htmlcss

What are the best methods for creating a responsive div container?

Hello, I am having trouble with the responsiveness of my div. I want these two images to stack on top of each other when the window is resized. I have attached a screenshot to demonstrate exactly what I am trying to achieve. I can't seem to figure out ...

htmlcss

Animating content through CSS and jQuery to reveal its unfolding effect

Just stumbled upon the amazing quote-expansion animation in the OSX Mail app and I am completely impressed. I am on a mission to bring that same magic to the web (or at least close to it), but unsure if anyone has done something similar yet. A couple of ...

javascriptjquerycss

I need some assistance, please. Can someone explain why the Bootstrap card is staying aligned to the left in mobile view

I've tried everything, but it's still not working. Can anyone help me out? Here are some photos. BEFORE AFTER When I view the card on mobile, I want it to stay centered. Could there be some missing code that I'm overlooking? I would great ...

htmlcsswebframeworksbootstrap-5

Here's a guide on how to retrieve the element type or tag type in Selenium using C#

Let's say we have a tag like this: <a class = "fp-anchor fp-forgot-password pull-right" href = "/Account/ForgotPassword">Forgot Password?</a> == $0 In order to determine the type of element, we need to identify if it is a hyperlink. For ...

c#jqueryhtmlselenium

Why does the text in a div display in Safari 8.2 and Chrome 39, but not in Firefox 34?

In my HTML document, I have a div tag located within the body like so: <div id="content_text"></div>​ Using javascript, I later set the contents of the div like this: var content_text = document.getElementById("content_text") c ...

javascripthtmlcssfirefox

What's preventing my Angular list from appearing?

I am currently developing an Angular project that integrates Web API and entity framework code first. One of the views in my project features a table at the bottom, which is supposed to load data from the database upon view loading. After setting breakpoin ...

javascripthtmlangularjs

I'm trying to figure out how to retrieve data from a JQuery autocomplete response that contains an array. Specifically, I want

https://i.stack.imgur.com/YpuJl.pngThis form field is for entering text input. <span> <img src="images/author2.jpg" width="50" /> //The profile picture displayed here is static but in the database I have a dynamic image. <input class="sea ...

phphtmlarraysajax

Leveraging jQuery for Adding Text to a Span While Hovering and Animating it to Slide from Left to

<p class="site-description">Eating cookies is <span class="description-addition"></span>a delight</p> <script> var phrases = new Array('a sweet experience', 'so delicious', 'the best treat', ...

javascriptjqueryhtml

The website is unresponsive to the media query

Currently, I am working on a project using Windows 10, Codeigniter, jQuery, and Firefox 43.0.4. However, I am facing an issue that is quite baffling to me. My goal is to apply styles specifically for an iPad-sized window, so I have implemented the followin ...

htmlcssmedia-queries

Issue with the table background in Internet Explorer

My website displays a table with a background image that appears normal in FF and Chrome, but not in IE. The background image seems to shift and produce strange results. Can anyone here help me figure out what's causing this issue? Please refer to the ...

csshtmlinternet-explorer

How can I manually set a date in Angular bootstrap datepicker?

Using the Angularjs Bootstrap datepicker has been a great experience, but I encountered a problem when attempting to select the date using JavaScript. How can I ensure that the selected date in the datepicker matches the date read from a specific object, s ...

javascriptangularjstwitter-bootstrapdatepickerbootstrap-datepicker

Fixing content at the bottom inside a container with Bootstrap 4

My app is contained within a <div class="container">. Inside this container, I have an editor and some buttons that I always want to be displayed at the bottom of the screen. Here's how it looks: <div class="container> // content here.. ...

htmlcssbootstrap-4

Error: Disappearing textarea textContent in HTML/TS occurs when creating a new textarea or clicking a button

I've encountered an issue with my HTML page that consists of several textareas. I have a function in place to dynamically add additional textareas using document.getElementById("textAreas").innerHTML += '<textarea class="textArea"></text ...

javascripthtmltypescripttextareainnerhtml

How can I extract text from a website without retaining number, dot, and alphabet bullets in the list?

I am currently using Python 2.7.8 for a project involving a website with text displayed in an ordered list format using ol tags. I need to extract the specific text items listed below: Coffee Tea Milk This is an example of the HTML code used on my websit ...

pythonhtmlweb-scrapingbeautifulsoup

Adding a class to an img tag with TinyMCE

Currently, I am utilizing the TinyMCE editor as a standalone editor in my content management system (CMS). Within the CMS, there is an automatic setting that adds a curved border to any image tags within the cms div ID. In certain cases, I require the op ...

phpjavascriptcsstinymcewysiwyg

Unexpected Salutation Machine

Hey there. I've been working on this random greeting generator, but I'm running into some issues. Initially, I forgot to include the array for the $greet variable and got errors saying it wasn't defined. Now, I'm getting an error relate ...

phphtml

What is the best way to rearrange Bootstrap columns for extra small screens?

In my bootstrap layout, I have a row with two columns: <div class="row"> <div class="col-md-5 col-md-push-7"> Content in this column should display on the right </div> <div class="col-md-7 col-md-pull-5"> ...

csstwitter-bootstraptwitter-bootstrap-3

What is the best way to retrieve the values of "qty" and "price" and access them within the item [array] without knowing the IDs?

I am currently working on a shopping cart project, specifically on the "previous orders" page to display order details. My goal is to output this information in an (.ejs) file. The data structure includes nested objects, and within one object, propertie ...

javascripthtmljquerynode.jsejs