How can I center two div buttons within a bootstrap column?

My issue is as follows:

I currently have two circles stacked on top of each other, but I would like to position them side by side. Below is the HTML for the existing layout:

<div class="col-lg-6">
    <div class="page-scroll" style="text-align:center !important;"  id="arrow2">
        <a href="#feature2" class="btn btn-circle" style="border: 4px solid black !important;color:black">
           <i style="font-weight:bold" class="fa fa-angle-double-down animated"></i>
        </a>
    </div>

    <div class="page-scroll" style="text-align:center !important;">
        <a href="#intro" class="btn btn-circle" style="border: 4px solid black !important;color:black">
            <i style="font-weight:bold" class="fa fa-angle-double-up animated"></i>
        </a>
    </div>
</div>

I tried following the steps outlined in this tutorial, and I modified my code as shown below:

Here is the updated HTML:

<div class="col-lg-6">
    <div class="page-scroll" style="text-align:center !important;float:left;"  id="arrow2">
        <a href="#feature2" class="btn btn-circle" style="border: 4px solid black !important;color:black">
            <i style="font-weight:bold" class="fa fa-angle-double-down animated"></i>
        </a>
    </div>

    <div class="page-scroll" style="text-align:center !important;float:left;">
        <a href="#intro" class="btn btn-circle" style="border: 4px solid black !important;color:black">
           <i style="font-weight:bold" class="fa fa-angle-double-up animated"></i>
        </a>
    </div>
</div>

My question now is how can I align these two buttons side by side at the center of the text block?

htmlcsstwitter-bootstrap

Answer №1

To achieve the desired alignment, consider placing both elements within a single div container and apply the "display: block" style to each element. This will allow your text-align center property to effectively center them on the page. Additionally, removing the float left attribute may be beneficial as it could be pushing the elements too far to the left.

Answer №2

The top answer chosen is:

<div style="display: inline-block; margin-left: auto; margin-right: auto;">
                        <div class="page-scroll" style="text-align:center !important;float:left;padding-right:2%"  id="arrow3">
                            <a href="#section3" class="btn btn-circle" style="border: 4px solid black !important;color:black">
                                <i style="font-weight:bold" class="fa fa-angle-double-down animated"></i>
                            </a>
                        </div>

                        <div class="page-scroll" style="text-align:center !important;float:left;" id="arrow5">
                            <a href="#welcome" class="btn btn-circle" style="border: 4px solid black !important;color:black">
                                <i style="font-weight:bold" class="fa fa-angle-double-up animated"></i>
                            </a>
                        </div>
                    </div>

Answer №3

Combine both of your icons within the same div to prevent them from stacking on top of each other, which was happening because they were in separate divs. Then, apply text-align: center; to the parent div containing both icons.

Here's an example for better understanding:

<div class="col-md-6">
    <div class="page-scroll text-center">
        <a href="#"><i class='fa fa-angle-double-up'></i></a>
        <a href="#"><i class='fa fa-angle-double-down'></i></a>
    </div>
</div>

I have personally tested this in a bootstrap project I am currently working on, and it worked as you intended.

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

Adjusting the height of a table column to accommodate lengthy text without disrupting the layout of adjacent columns

I am encountering an issue while creating an invoice using an HTML table. The problem arises when the customer address value is too long, causing the sold by column to shift downwards. I need a way to break the customer address value when it reaches the ma ...

htmlcss

Disabling the ripple effect on the primary action in React Material lists: A Step-by-Step

I was attempting to include two action buttons at the opposite ends of a list component. https://i.stack.imgur.com/juv8F.gif When clicking on the secondary action (delete icon on the right), the ripple effect is confined to just the icon. On the othe ...

javascriptcssreactjsmaterial-uimakestyles

Tips for customizing CSS for the ValidatorCallout Extender in an ajax tool

I am currently attempting to implement the ValidatorCallout Extender feature from the asp.net Ajax website. However, I am struggling with customizing the CSS for the popup validator. ...

asp.netajaxasp.net-mvccssajaxcontroltoolkit

Why does the container overflow when the child is floated in CSS?

Can you explain why a parent div element stops adjusting its height when its child is floated? Here is the HTML snippet: <!DOCTYPE html> <html> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="in ...

htmlcssuser-interface

Is it possible to exclusively focus on the specified data attributes?

Is there a method to specifically target the 'data-season' attribute with the value "winter"? This is my HTML: <li data-season="summer">summer <ul class="groups"> <li data-item="beach">beach</li> <li data-item ...

javascriptjquerycsstarget

Setting expiration dates for cached images

I am interested in optimizing the loading speed of my webpage by setting an expiration date for images. However, I am unsure about where to specify this. The images on my website are loaded via CSS from Cloudfront using an S3 bucket in AWS. Can you provid ...

cssamazon-web-servicesamazon-s3amazon-cloudfront

I'm attempting to slightly adjust the alignment of the text to the center, but it keeps causing the text to shift

I am facing an issue where I want to slightly center text, but whenever I add just 1px of padding-left, it moves to a new line. In my layout, I have 2 columns each occupying 50% width of the screen. One column contains only a photo while the other has a ba ...

htmlcss

The Element should take up the entire page with the exception of a 20px margin

I am struggling to create an element that covers the entire page except for a 20px margin on all sides. I have tried implementing a solution using this code, which works in webkit browsers and Firefox but seems to have issues with Internet Explorer (10) an ...

css

The functionality of collapsing rows of cards in Bootstrap does not seem to work efficiently for multiple

There is a button that appears and the #more div is hidden. However, when I click "Show more," the hidden content does not appear. Could this be due to multiple rows? Should I add collapse to every card? I am using Bootstrap 4. Here is the code snippet: ...

htmlwebbootstrap-4frontend

Unique ways to serialize an HTML element efficiently: JavaScript tricks

Is there a way to store a reference of an HTML tag for future use? For instance, if I click on a div and save a pointer to that div in JavaScript, is it possible to serialize this pointer and then de-serialize it to use in another part of the web applicat ...

javascripthtmlcssdomserialization

Using `margin: auto;` alone will center a div horizontally, but it won't

My goal is to perfectly center the text within the anchors in my li container, both horizontally and vertically. I've come across a method that involves using text-align: center; on the container for horizontal alignment. However, vertical alignment r ...

htmlcssmargincenter

How can I access multiple icons using jQuery?

Below is the JavaScript code I am using: $(document).ready(function() { $.getJSON("Stations.php", function(jsonData){ $.each(jsonData, function(key,value) { $('#selectStation') .append($("<option></option>") ...

javascripthtmlcssjqueryicons

Implementing Dynamic Checkbox Selection using JavaScript

Could someone please assist me with this coding challenge? HTML <div id="toggle"> <ul> <li class="active"><input type="checkbox" id="test" value="2014" name="test" checked/> 2014</li> <div style="display:block;" id ...

javascriptjqueryhtmlcheckbox

What could be causing the position sticky to not function properly in my script?

Can someone help me troubleshoot an issue with the TopOptions image and component sticking to the top of the page? {!categorySearch && ( <div className="max-w-2xl mx-auto z-40 relative overflow-x-hidden font-metropolis_semibold" ...

htmlcsscss-positiontailwind-css

Perform mathematical operations on numbers using jQuery based on their index

Trying to manipulate numbers in the HTML with this less-than-ideal code. The display starts like this at the beginning: 1/ 6 And ends up like this at the final index: 6/ 6 Utilizing this in conjunction with pageslide.js as a workaround for the default ...

jqueryhtml

Chrome fails to read font family correctly

I created a jsfiddle that demonstrates an interesting behavior with setting and reading the font-family using jQuery. When I set the font-family to "Arial . . ." it reads back okay, enclosed in a single set of double quotes. However, when I set the font-fa ...

javascriptjquerycssgoogle-chrome

The dimensions of the box remain fixed and do not change when the screen is resized

Just starting out with HTML and CSS and trying to create a responsive website. Running into an issue where the black striped box on my page is not moving up when I resize the screen. It appears to be stuck in place, causing a gap between it and the slide s ...

csshtml

Switch up the styling of a component by updating its properties with a switch statement

Although there is a similar question, my query has a unique requirement. I have defined the common styles for my button and implemented a function using a switch statement with different properties for various buttons across different pages. However, for ...

cssreactjstypescriptnext.jsstyled-components

Create a variety of charts using the same data object in Highcharts

Is it possible to display two (or three) different charts on the same page using Highcharts without creating separate div elements and only utilizing one object? I have created a screenshot to illustrate my question: You can view the code example on JSFi ...

javascripthtmlhighcharts

IE9 fails to display li::before element correctly

I have created a utility navigation bar using an unordered list and I am attempting to use li::before to add a pipe "|" symbol between each link in the navigation. Below is my utility navigation... <div class="horizontalnavlinks"> <ul> ...

htmlcsspseudo-elementcss-content