Button styled with Bootstrap positioned at the top right corner

Currently, my Bootstrap page structure is as follows:

  <div class='container'>
    <div class='row'>
      <div class='col-sm-6 col-md-4 col-lg-3'>
        <p>column1</p>
      </div>
      <div class='col-sm-6 col-md-4 col-lg-3'>
        <p>column2</p>
      </div>
      <div class='col-sm-6 col-md-6 col-lg-4'>
        <p>column3</p>
      </div>
      <div class='col-sm-2 col-md-2 col-lg-1'>
        <button type="button">Button</button>
      </div>
    </div>
  </div>

On a PC screen, it appears as one row with columns and a button in the same line like this:

1 row
--------------------------------
|column1|column2|column3|button|
--------------------------------

Now, I want to restructure it for IPad in horizontal display mode (1024px) like this:

2 rows
--------------------------------
|column1|               |button|
--------------------------------
|column2|column3|
--------------------------------

I have attempted using pull-right, text-right, justify-content-end classes but unfortunately, they didn't work as expected.

htmlcssbootstrap-4ng-bootstrap

Answer №1

Check out this bootstrap solution I crafted for your issue. Feel free to experiment with the existing classes and don't hesitate to remove the background colors added for demonstration purposes. Have fun!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <div class='container'>
        <div class='row'>
            <div class='col-xl-4 col-6' style="background-color: red">
                <p>column1</p>
            </div>
            
            <div class='col-xl-1 col-6 order-xl-3 text-right text-xl-left' style="background-color: yellow">
                <button type="button">Button</button>
            </div>
            <div class='col-xl-7 order-xl-2' style="background-color: green">
                <div class="row">
                    <div class='col-6'>
                        <p>column2</p>
                    </div>
                    <div class='col-6'>
                        <p>column3</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer №2

Feel free to customize the layout by placing column 1 and button in the same line, while columns 2 and 3 are on the following row.

<div class='container'>
<div class='row'>
    <div class='col-sm-6 col-md-4 col-lg-3'>
        <p>column1</p>
    </div>
    <div class='col-sm-2 col-md-2 col-lg-offset-8 col-lg-1'>
        <button type="button">Button</button>
    </div>
</div>
<div class='row'>
    <div class='col-sm-6 col-md-4 col-lg-3'>
        <p>column2</p>
    </div>
    <div class='col-sm-6 col-md-6 col-lg-4'>
        <p>column3</p>
    </div>
</div>

Answer №3

<!doctype html>
<html lang="en-US">
  <head>
    <!-- Necessary meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Utilize Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Customize Your Title Here</title>
  </head>
<div class="row">
<div class="col-sm-12">
<a href="#" class="float-right btn btn-primary">**Button to Click**</a>
</div>
</div>
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15657a656570673b7f6655243b24233b25">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

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 Material UI Grid item shifted upwards as a result of the image loading

While working on a project using the Material UI grid system with create-react-app, I encountered an issue with two adjacent grid items. Initially, they display as intended: https://i.sstatic.net/i9jeP.png However, upon loading the page, there is a brief ...

cssreactjsmaterial-ui

Enhancing Material UI icons with a sleek linear gradient

Despite following the instructions in this post Attempting to incorporate a linear gradient into a MaterialUI icon, as per a comment's recommendation, I am unable to get it to work. I experimented with the idea that the icons could be considered text ...

javascriptcssreactjsmaterial-uimaterial-design

Rejuvenate your Bootstrap Accordion with these Settings

Using bootstrap documentation, I have implemented an accordion in my web application with the following code: <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class=" ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

"Picture positioned on the edge of the container, just on one

Using Bootstrap 4, I was able to create a container with a div positioned outside of the container on the right side. Now I am wondering if it is possible to achieve the same effect with a picture div. I managed to do so by using a pseudo-element :after an ...

htmlcss

What is the best way to create a sliding animation on a div that makes it disappear?

While I may not be an expert in animations, I have a question about sliding up the "gl_banner" div after a short delay and having the content below it move back to its original position. What CSS properties should I use for this animation? Should I use css ...

javascripthtmlcsscss-transitionscss-animations

Customize the colors of the arrows in Bootstrap's carousel

There seems to be a simple solution that I'm missing here. I have images with white backgrounds and I want to customize the arrows on Bootstrap's Carousel to make them more visible. I need help changing the color of the arrows (not the background ...

htmlcsstwitter-bootstrapbootstrap-4carousel

Position the division at the location of the cursor for particular usemap components

Looking for a way to position a division on top of an image using a usemap. Interested in having the div only appear when the mouse hovers over a particular area, and at the precise location of the cursor. Came across some examples using jQuery, similar ...

javascriptjqueryhtmlpositionimagemap

What is the best method for adding space around a Bootstrap card?

Here is the HTML template that I am working with: <div class='row'> <div class='col-md-6'> <div class='card mx-auto'> <div id='main'> {% for candidate ...

htmlcsstwitter-bootstrapbootstrap-4

How to toggle between displaying divs using JavaScript and Jquery

How can I use JavaScript to show or hide specific divs on page load and upon clicking different links? I want to display the "houseImages" div by default, while hiding the "landImages", "renovationImages", "UpcomingImages", and "voteForNext" divs. Then, w ...

javascriptjqueryhtmlhideshow

PHP's Encoding Woes Are Back in Action

I'm encountering encoding challenges on my website, and it's becoming quite frustrating. Allow me to elaborate My meta tag specifies utf8 as the charset. The scripts I'm using also have utf8 defined (<script type="text/javascript src=". ...

phphtmlajaxpostgresqlutf-8

Obtaining the checkbox status from a location other than immediately following the input by CSS alone

I am currently designing a custom checkbox feature where clicking on the label text will toggle the state and display or hide certain text based on the checkbox state, all achieved solely through CSS. The HTML code I have written for this purpose is as fol ...

csshtmlcheckbox

What is the best way to customize the endIcon of a styled-component button?

Presented here is a neatly styled button I've created import styled from 'styled-components'; import Button from '@material-ui/core/Button'; import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; const MyB ...

cssreactjsmaterial-uistyled-components

AngularJS combined with jVectorMap allows for the seamless rendering of small interactive

I am facing a similar issue to one discussed here, but with some minor differences. Initially, my map loaded without any problem on the site. However, after adding Angularjs to the site, I noticed a 'small' map issue. It seems like a simple code ...

javascriptjquerycssangularjsjvectormap

Differences in rendering of HTML select element between Chrome on macOS and Chrome on Windows

During testing of a section of the app at my workplace, it was discovered that dropdowns and select elements in a specific UI scenario appeared differently on Chrome for Windows and Ubuntu compared to Chrome for macOS. I attempted to analyze the elements ...

htmlcssgoogle-chromecross-platform

Ways to display closing tag in minimized code in JavaScript documents

I am encountering an issue where the closing tag of folded code is visible in my HTML file, but not in my JS files (specifically JSX syntax). I apologize if this is a trivial question, but I am hopeful that someone can assist me in making the closing tag ...

javascripthtmlreactjsvisual-studio-codejsx

Looking for a way to retrieve all HTML tags that have a particular string in their attribute values with Html Agility Pack?

I am currently focused on extracting all HTML tags that have a specific string in their attribute values from the code provided below <meta name="DCSext.oo_market" content="en-us"> <a href="http://office.microsoft.com/en-us/support/" title="Find ...

c#htmlhtml-agility-pack

Guide to Embedding a SQL Table into an HTML Table

I need to set up a table within my current webpage to showcase a list of movies along with their genres. Welcome to my Movies page. The index.php file contains all the necessary database credentials and establishes the connection. <?php session_start( ...

phphtmlmysql

The element's width set to 100% is not functioning properly when used within a container

Struggling to create a full-width image header but the image always ends up being the width of the container, not 100%. Tried various solutions without success, and the suggested answer here did not solve the issue. Modifying the .container width in custom ...

csshtmltwitter-bootstraptwitter-bootstrap-3

Discovering the second value with a matching CSS class using Selenium WebDriver

How can I select the second value from a list item that appears as a drop-down on a web page? In this case, the second value is 'Bellevue'. Refer to the screenshot below: I am implementing Page Objects and trying to locate elements using @FindBy ...

javacssseleniumwebdriver

Exploring the true column widths in Bootstrap 4 tables

I have been attempting to create a layout similar to this in Bootstrap 4, where the table columns are set in pixels with fixed values, causing a horizontal scroll within the card. However, I am facing issues as the columns do not have the desired sizes. Th ...

htmlbootstrap-4css-tables