An obstacle with alignment and customizing Bootstrap buttons

I have a unique design I need to create:

https://i.sstatic.net/ymPnN.png

The current setup appears as follows:https://i.sstatic.net/iAwZH.png

How do I use CSS to add an arrow pointer to the first buttons labeled "monthly donation" and "simple donation"? Additionally, I am facing difficulty aligning them horizontally as they currently appear misaligned.

Below is my code snippet:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo form</title>
     ...

(The font type details can be disregarded).

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Using a ::after pseudo-element creates the pointer as shown below:

.radio-toolbar input[type="radio"]:checked+label.with-pointer::after {
        content: '';
        width: 16px;
        height: 16px;
        background: #C8951C;
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: -1;
        transform: translate(-50%, 8px) rotate(45deg);
}

To achieve alignment, flex properties can be used on the container element.

For the full code example, please refer to the snippet below:

<!DOCTYPE html>
<html lang="en">
    <head>
       ... (Code continues)
    </head>

    <body style="background-color: #fbf9f7;">
        <div class="container-fluid text-center">
            ... (Code continues)
        </div>
    </body>
</html>

Answer №2

To create a pointer arrow, you can achieve this effect using CSS border properties:

button {position:relative; padding:10px; background:orange; color:#fff; border:none;}
button:before {
    content:''; position:absolute; top:100%; left:50%;
    transform:translateX(-50%);
    width: 0;
    height: 0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:15px solid orange;
}
<button>Button</button>

I'm not entirely sure what you mean by "horizontal alignment"? Let me know if you need further clarification.

Answer №3

There are numerous ways to meet those requirements. I have provided a sample design for the button, feel free to take a look.

styles

    /* Customizing Styles */
.radio-toolbar {
  margin: 10px 0px;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  /* position: fixed; */
  width: 0;
}

.radio-toolbar label {
  display: inline-block;
  background-color: white;
  padding: 5px 22px;
  font-family: sans-serif, Arial;
  font-size: 16px;
  border: 1px solid #E7E7E7;
  border-radius: 0px;
  position: relative;
  z-index: 5;
}

.radio-toolbar label:hover {
  background-color: #E7E7E7;
}

/* .radio-toolbar input[type="radio"]:focus+label {
border: 2px dashed #444;
} */

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #C8951C;
  color: white;
  border: none;
}
.btn-color{
  display: flex;
  justify-content: center;
}
.arrow{
  position: absolute;
  width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid #c8951c;
  z-index: 0;
}
<div class="radio-toolbar mb-5">
  <div class="row">
    <div class="btn-color">
        <input type="radio" id="monthly" name="frekvens" value="monthly" checked>
        <label for="monthly" class="button-month">
          Monthly Donation
        </label>
        <span class="arrow"></span>
    </div>
  </div>
</div>

https://codepen.io/njmsaikat/pen/gOXYzBe

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

Disabling the "X mark" feature while in IE11 compatibility mode

Currently working with GWT and attempting to remove the 'x mark' that appears in IE11. I tried using the CSS code below, but was unsuccessful in disabling the 'x mark': ::-ms-clear { display: none; width : 0; height: 0; } ...

htmlcssgwt

What is the best way to create interactive canvases that respond to multiple clicks using JavaScript?

Within the canvas, the code snippet below aims to generate a grid of 10x10 colored boxes with alternating reddish and bluish shades on a gray background. The intention is for each canvas to only respond to mouse interactions when the mouse is within its bo ...

javascripthtmlcanvas

You are unable to align a paragraph with a specific width in the center

I adjusted the width of a paragraph to make it less stretched out horizontally and more compact. However, when I attempted to center align the text within the paragraph using text-align: center;, only the direction of the paragraph was centered. The chall ...

htmlcss

enclosing text in a div container in WordPress

My WordPress website is built on the Bootstrap framework and includes content with images and text. I'm attempting to encase the text content in row and col-md-10 tags, while leaving the images as they are. This content is pulled into my single.php p ...

phpjqueryhtmlcsswordpress

Issues with JavaScript's getTime() function I am facing problems with

Currently, I'm developing a simple HTML quiz consisting of 10 questions, each on a separate HTML page. Upon the user clicking the START button on the index.html page, the following script is triggered: var s = new Date(); sessionStorage.start_test = ...

javascripthtml

Rearrange elements within a div by clicking a button

I want to shuffle div elements with a click of a button using a dissolve animation in HTML5. An example of what I am looking for is similar to this website When you scroll on the page, there are links such as All, Intro, Solution. Clicking on any link sh ...

javascriptjqueryhtmlcssbootstrap-4

Align the center of table headers in JavaScript

I'm currently in the process of creating a table with the following code snippet: const table = document.createElement('table'); table.style.textAlign = 'center'; table.setAttribute('border', '2'); const thead ...

javascripthtmldom

Experiencing difficulties typing into a text/input field using electron

I am currently working on a calendar app using electron. In the app, I have created a menu to add new events and other features. One feature I want to implement is allowing users to enter the title of their event in a textbox/input field. However, when I t ...

javascripthtmlcsselectron

CSS regression testing through version control systems and continuous integration

Is there a tool that integrates with CI systems and VCS like Git to automatically assign regression test results to individual commits? Ideally, this tool would provide a concise summary on a main page showing passed/failed numbers for each commit, with th ...

csscontinuous-integrationcontinuous-deploymentregression-testing

Updating a table in Javascript after deleting a specific row

Is there a way to automatically reindex rows in a table after deleting a row? For example, if I delete row 1, can the remaining rows be reordered so that they are numbered sequentially? function reindexRows(tableID) { try { var t ...

javascripthtmlrows

No output is displayed in the absence of errors. The program is functioning correctly

app.js angular.module('app', ['ionic', 'ui.router']) .config(('$urlRouterProvider', '$stateProvider', function($urlRouterProvider,$stateProvider){ $urlRouterProvider.otherwise('/'); $sta ...

javascripthtmlangularjsnode.jsionic-framework

Condition for button functionality

I have a Submit button that, when pressed, triggers the onSubmit function. <b-form @submit.stop.prevent="handleSubmit(onSubmit)"> ... <b-button type="submit" >Submit</b-button> <script lang="ts ...

htmltypescriptvue.jsbootstrap-vue

JavaScript Issue - Script Not Responding

I've encountered an issue while dynamically adding elements to my webpage with the code provided below. Although it successfully adds the elements, it causes the page to freeze. Can someone shed light on why this might be happening? <script> $( ...

javascriptjqueryhtml

Ways to prevent continuous database record creation when refreshing the page

My form for adding records to the database looks like this: <form class="col s12" action="" method="post"> <div class="row"> <div class="input-field col s6"> <input placeho ...

phphtmlmysql

Implementing Node.js with browser cache and handling 304 responses

I am currently in the process of creating a single page application with a standard HTML layout as shown below: <html> <head> <title>...</title> <link rel="stylesheet" media="all" type="text/css" href="css/main.css"> ...

javascripthtmlnode.jshttphttp-headers

Is it true that iframe doesn't function as createpopup does?

I decided to use an iframe over window.createPopup, but I'm encountering an error in the console saying "oDocument is not defined". Check out my code below: function ShowDropdown(oMenu, oMenuDropDown){ //Setting up iframe html var iframe='<i ...

javascripthtmliframe

Utilize esbuild to load Bootstrap JavaScript libraries

I have been attempting to incorporate the bootstrap JS into my esbuild setup: // index.js import 'jquery-import' import 'bootstrap' // jquery-import.js import jquery from 'jquery' window.jQuery = window.$ = jquery; The build ...

javascriptnode.jsbootstrap-4es6-modulesesbuild

Issue with LAMP Stack: HTML table updates are not syncing correctly with the database

Greetings, I am currently working on an HTML form called Index.html <html> <body> <form action="update.php" method="POST"> Department: <input type="text" name="department"><br><br> Subname: <input type="t ...

phphtmllamp

Elements that are hidden or not displayed are still able to receive mouse over events

I am in the process of learning how to handle events within svgs and I have encountered a strange issue. Currently, I am working on an infovis project where I create an interface to display various column-graphs. This part is functioning well so far. Ho ...

javascriptcsssvg

I recently ran npm install --save bootstrap and now I am unable to locate the bootstrap.min.css file anywhere

Trying to follow a tutorial based on a video, I'm running into an issue where I can't locate the bootstrap.min.css file mentioned. Despite searching online, I haven't found any relevant information. The files I have access to are: https://i ...

cssnpm