Positioning a button to the right side of a card with Bootstrap v4 styling

I am new to Bootstrap and I decided to jump into using their v4 alpha version.

In the example below, I am attempting to align the 'Arrange a valuation' button (located near the bottom of the page) to the right while keeping the other text aligned to the left. Additionally, I need both the text and the button to be vertically centered.

Can anyone assist with this?

<div class="card card-block card-blue clearfix">
    <p class="card-text">Want to know how much rent you could achieve for your property?&nbsp;<a href="#" class="btn btn-blue-outline pull-right">Arrange a Valuation</a></p>
  </div>
htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Answer №1

The most recent version of Bootstrap 4 (alpha 6) has replaced pull-right with float-right:

<div class="card card-block card-outline-primary">
    <p class="card-text>Want to find out the potential rental income for your property? &nbsp;
        <a href="#" class="btn btn-outline-primary float-right">Schedule a Valuation</a>
     </p>
</div>

Answer №2

Include .pull-right in the a tag's class attribute.

<div class="box card content-block">
    <p class="content-text paragraph">Curious about the potential rental income for your property?&nbsp;<a href="#" class="btn btn-primary-outline pull-right">Schedule a Valuation</a></p>
</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

Retrieve the blob value from outside the canvas by using the ToBlob() function asynchronously

I have encountered an issue with the HTMLCanvas element where it returns a blob object outside of the async toBlob() function. Since this function does not return an output value, I have attempted to declare a variable outside and then access it through th ...

javascripthtmlpromise

Animating a spinning SVG path around its center within a larger rectangular box

Is there a way to rotate a smaller SVG path within a larger rectangle around its own center? The current code rotates the entire space. <animateTransform attributeType="xml" attributeName="transform" type="rotat ...

csssvg

Disable the moving of the DIV button with a left-margin of 0px

Having a bit of a challenge here. I'm attempting to craft my own slider using jQuery along with some css and javascript. I've managed to get my slider functioning, moving a Div 660px to the left and right upon button clicks. However, I'm h ...

javascriptjqueryhtmlcss

Box with decorative borders that adjust to different screen sizes

I need help creating a box with border lines separating different sections. After the H2 heading, I want a new border line followed by a paragraph. However, when I try using border-bottom:1px solid, the line does not reach the edges of the main border. Her ...

htmlcsstwitter-bootstrap

HTML row with interactive functionality that sends data via POST method to another PHP file

I am currently working on an HTML table where I am displaying data from a database. My goal is to make the entire row clickable so that I can trigger a PHP script using the data from that specific row as variables. However, I am facing a challenge in figur ...

phphtmlmysql

Mobile display issue with CSS columns when using the :checked pseudo class

I have embarked on the creation of a portfolio website that relies solely on CSS3 to present a grid and filter out thumbnail images. If you're curious about what I've accomplished so far, feel free to take a look here. To achieve the filtering ...

cssgridmobile-safaripseudo-class

Adjusting the size of a Video/Image Slider to perfectly fit the screen dimensions (both width and height

I have been using a slider code to display my images and videos. The code can be found here: Code:https://codepen.io/1wdtv/pen/jbjZeb The issue I am facing is that the slider is only responsive in terms of width. This means that when resizing the browser ...

javascriptjqueryhtmlcss

mobile-responsive vertical alignment using Bootstrap

Here is a jsbin that demonstrates the issue and here is the markup: <div class="row"> <div class="col-sm-4 xs-12"> <strong>UK Postcode</strong> </div> <div class="col-sm-4 xs-12"> <strong>Other Fie ...

csstwitter-bootstraptwitter-bootstrap-3

Shift the content downwards within an 'a' snippet located in the sidebar when it reaches the edge of the right border

I'm having an issue with my style.css file. As a beginner in programming, I am trying to position text next to an image attached in the sidebar. However, the text is overflowing past the border. Here's the HTML code: Please see this first to ide ...

javascripthtmlcssbootstrap-4

Conceal Content from Onsite Search

Is it possible to conceal text from on-page browser searches (e.g. Ctrl+F) in a dependable manner while keeping it visible? I thought that adding aria-hidden="true" would address the issue, but the text remains searchable by browsers. ...

csshtmlwai-aria

Ways to run a template multiple times within a single handler function

I'm working on implementing a progress bar that dynamically updates based on the progression of a command line argument within my Go code. I've been using a template to update the progress value every second by calling template.Execute(w, data) i ...

htmlgobootstrap-4

How can I utilize Material-UI's Grid component to make a single cell occupy the entire remaining horizontal space?

I am currently utilizing the Grid component from material-ui in my React 16.13.0 application. My objective is to create a row with three items. The first two items are supposed to occupy only the required space without specifying pixel values. I want the t ...

cssreactjsgridmaterial-ui

Enhance data validation in PHP

I love using Nicedit as a text editor because it allows me to easily add bold and italic formatting to my form fields. However, when I try to store this text in my database, Nicedit adds HTML tags for bold, italic, and other formatting styles. Is there a ...

javascriptjqueryhtmlnicedit

Easily transfer text between two separate browsers both accessing the identical website

I'm working on a website that requires a feature where I can choose an option and update the text on another browser window running the same site. Currently, I have the code set up to update the text on the first browser but I'm having trouble im ...

javascripthtmlserverbackend

I'm using Selenium XPATH or CSS to identify and select a checkbox within an HTML table based on the specified text. As a result, I have successfully

I am trying to select a checkbox from an HTML table with multiple columns. Specifically, I want to choose the checkbox that corresponds to the "CLEAN_AUDIT" option for the Name column. However, my current XPATH is selecting 4 checkboxes labeled CLEAN_AUDIT ...

cssseleniumxpathselenium-webdriver

Is there a way to retrieve the text of li elements without assigning them IDs?

I have a list of names with four items inside it. My goal is to display the text of the selected name while hiding the others. Only one name should be visible at a time on the page. <ul id="names"> <li>John</li> <li>Alex</ ...

javascriptjqueryhtml

What is the best way to prevent the collapse v-b-toggle event from being triggered by an

I am currently using a v-b-toggle to toggle another div on and off. However, within the div where the v-b-toggle is located, there is an input checkbox. The issue that I am facing is that when I click on this checkbox, the toggle functionality is activa ...

vue.jsbootstrap-4togglebootstrap-vue

Looking to showcase a .tif image in your Angular project?

This code is functioning properly for .png images. getNextImage(imageObj:{imageName:string,cityImageId:number,imgNumber:number}):void{ this.imgNumber= imageObj.imgNumber; this.imagePath=`assets/images/${imageObj.imageName}.png`; this.cityIma ...

htmlcssangulartypescript

The use of Img align:left results in text overflowing in Internet Explorer

I'm experiencing a problem where the text overflows within a column when an inline image is aligned to the left or right. It may be difficult to explain, so I have set up a sample page at This issue is specific to IE6 and IE7. Any suggestions on how ...

cssinternet-explorerfckeditor

One way to target a span inside a label element when a checkbox is checked using React Material UI createStyles is by using CSS selectors in combination with

I need help targeting the span element within a checkbox label in order to change its background color when the checkbox is checked. <div className={classes.container}> <input type="checkbox" id="checkboxid" /> <lab ...

cssreactjsmaterial-ui