What is the best way to stack two pull-right elements on top of each other within the Bootstrap grid system?

I have set up a bootstrap grid system on my webpage and I am trying to align two elements to the right, one below the other. Currently, this is how it appears: https://i.sstatic.net/UcpAJ.png

When I try to align the "Active" and "Primary" buttons underneath each other to the right using the following code snippet, it looks correct but causes layout issues on mobile devices:

<button type="button" class="btn btn-w-m btn-primary" style="margin-left: 261px;">Primary</button>

https://i.sstatic.net/27gBX.png

This is the progress so far. How can I modify the code to achieve the desired layout?

<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row  border-bottom white-bg dashboard-header">
        <div class="col-md-3">
            <h4>Dummy Name</h4>
            <small>Dummy Street</small><br>
            <small>Dummy Apt, Some City, Some State</small><br>
            <small>United States</small><br>
        </div>

        <div class="col-md-3">
            <h5>123-456-7890</h5>
        </div>

        <div class="col-md-3">
            <h5><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53203c3e360c3d32`efdceeec2auceeebcedecdc3eeecc3dec">[email protected]</a></h5>
        </div>

        <div class="col-md-3">
            <h2 class="pull-right" style="margin-top: -5px">Active</h2><br>
            <button type="button" class="btn btn-w-m btn-primary">Primary</button>
        </div>
    </div>
</div>
htmlcss

Answer №1

To align the text of the heading and the button to the right, you can simply use text-align:right in the CSS or apply the text-right class to the parent div. Keep in mind that for a better view, it's recommended to open this snippet in fullscreen mode due to the small preview window.

It is advisable to separate the CSS into its own stylesheet rather than using inline styles. By setting text-align: right as a style rule, you can easily adjust alignment based on screen sizes using media queries.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container"> 
  <div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row  border-bottom white-bg dashboard-header">
        <div class="col-xs-3 col-md-3">
            <h4>Dummy Name</h4>
            <small>Dummy Street</small><br>
            <small>Dummy Apt, Some City, Some State</small><br>
            <small>United States</small><br>
        </div>


        <div class="col-xs-3 col-md-3">
            <h5>123-456-7890</h5>
        </div>

        <div class="col-xs-3 col-md-3">
            <h5><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5b6aaa8a09aaba4a8a085b6aaa8a0a6aaa8b5a4abbceba6aaa8">[email protected]</a></h5>
        </div>

        <div class="col-xs-3 col-md-3 text-right">
            <h2>Active</h2><br>
            <button type="button" class="btn btn-w-m btn-primary">Primary</button>
        </div>
    </div>
  </div>
</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

The z-index of 999 in CSS is not functioning as expected on both Google Chrome and Safari browsers

To ensure the slider text is readable in white color, we have applied a black background with 0.65 opacity CSS on the slider image. This allows the white text to stand out effectively. The following CSS code was used for this effect: .zlslides .ms-slide- ...

csswordpressgoogle-chromez-indexopacity

jquery carousel slider dynamically append

I have been tasked with creating a dynamic carousel using jQuery AJAX, and my supervisor recommended that I utilize the .append() method. Below is the HTML code for my carousel: <div id="myCarousel"> </div> <div cla ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Aligning an SVG icon at the center of a button

I have elements that are currently being used as buttons, but I want to switch them out for actual button tags. This would improve accessibility and allow keyboard navigation using the tab key to focus on my buttons. Each button contains a centered SVG ima ...

htmlcsssvgbutton

The label is not displaying the specified font-family in CSS

Below is a snippet of code that I am having trouble with: testing some content Additionally, here is the CSS code for it: label { font-family: "Andale Mono"; } The issue I am facing is that no matter which font style I try to apply, it does not seem to ...

csslabelfont-family

Incorporating React into an already existing webpage and accessing URL parameters within a .js file

Following the official guidelines: To include React in a website, visit https://reactjs.org/docs/add-react-to-a-website.html I have created a file named test.html with the following content: <!DOCTYPE html> <html> <head> < ...

javascripthtmlreactjs

Ensure that only valid numbers can be inputted into an HTML number type field

My input number is as follows: <input type="number" id="quantity" name="quantity" (change)="firstRangePointChanged($event)" > I need to ensure that users cannot input invalid values like --99 (--) instead of ...

javascripthtmlangular

What is the best method for placing an element above all other elements on a page, regardless of the layout or styles being used?

I want to create a sticky button that remains fixed on the page regardless of its content and styles. The button should always be displayed on top of other elements, without relying on specific z-index values or pre-existing structures. This solution must ...

javascripthtmlcss

Using array map to create a centered table in a React web application

In my React project, I created a table using the array.map function. However, I'm facing an issue where the output of array.map is always aligned to the left, even before the table itself. I want to center the entire table. JSX: <div className=&qu ...

javascriptcssreactjs

Arrange components with minimal spacing

I am currently working on a design that requires a perfectly aligned table using divs. Here is what I have done so far: My goal is to have the time section placed on the left side of the entire row, while keeping the text right-aligned to avoid creating a ...

htmlcsstwitter-bootstrapalignmentcss-tables

Tips for restricting navbar-fixed to the width of the container

Welcome to my first project utilizing Twitter Bootstrap. While using Twitter Bootstrap, I've noticed that whether I use container-fluid or just container for my fixed top navbar, it expands to full width of the browser once it reaches around 980px. T ...

htmlcsstwitter-bootstrap

Looking to access files from the Android asset folder within an HTML document?

I'm currently developing an HTML-based app for Android. I've successfully displayed the HTML file using this code: "file:///android_asset/index.html" Now, my goal is to load local image files or fonts within that HTML file from the assets folder ...

androidhtml

Using Jquery to store input values from within <td> elements in an array

I'm trying to capture user input from a dynamically changing table with 2 columns. How can I retrieve the data from each column separately? The size of the table is adjusted by a slider that controls the number of rows. Below is the structure of my ta ...

javascriptjqueryhtmlfirebase-realtime-databasecss-selectors

"CSS styles applied to the body element do not automatically transfer to the h1

Explore the World of Coding: <body class="pageDesign"> <h1>CSS - A Creative Journey</h1> <p><strong>Discover the beauty of coding</strong> and unlock a world of possibilities with CSS. Let your imagination soar as you d ...

htmlcss

Is it possible to choose only half of the elements using the :nth-child selector in

Consider this code snippet: <ul> <li>Hello Universe</li> <li>Hello Universe</li> <li>Hello Universe</li> <li>Hello Universe</li> </ul> Can we select exactly half of the total elements by ...

htmlcsscss-selectors

Having trouble getting the Twitter Bootstrap navbar to display properly on mobile and iPad browsers

Is there a way to make the navigation bar float on mobile browsers when using the "navbar" and "navbar-fixed-top" classes? I've tried this on various devices like iPad (Safari, Chrome), Android (Firefox), and Windows Phone (IE), but it doesn't se ...

htmlmobiletwitter-bootstrap

What is the most effective way to assign multiple functions to the onClick event of a button, based on a specific property,

I have a special button that generates a specific type of code when rendered: <button>{this.props.text}</button> This button is named ButtonCustom. In the render method of the main container, I am trying to achieve the following: function my ...

javascripthtmlreactjs

Whenever I try to include something within the `componentWillUnmount` function,

I'm currently learning React on my own. I've been trying to save session data in my componentWillUnmount method. However, when I add code inside componentWillUnmount, nothing seems to happen. I tried debugging by adding console logs and debugger ...

javascripthtmlreactjsreduxmaterial-ui

When using the HTML code <p></p>, the empty paragraph tag does not create a line break

We have a .NET application that saves messages in axml format. Our task is to convert these messages into html. After some research, I came across a 3rd party library called "HtmlFromXamlConverter" that does this job, but with one issue: when the axml cont ...

htmlcss

I am interested in creating some CSS styles to modify the color of a toggle switch's plus sign icon

Can anyone help me customize my Wordpress theme? I'm trying to change the color of my toggle plus signs to white using CSS, but I can't figure it out. Your assistance would be greatly appreciated. Here is the URL: This is the CSS code I attempt ...

css

Modifying the TITLE dynamically post header insertion: A guide

Is there a way to dynamically change the title of an HTML page based on the content included below the header section using PHP? For example: <html> <header><title>I would like to change</title></header> <!--CONTENT--> ...

phphtml