Unique text: "Transformative custom checkboxes featuring checkboxes placed underneath descriptive

I am attempting to create custom inline checkboxes where the text is aligned above the checkbox. The goal is to have the checkbox horizontally centered compared to the text, resembling this example:

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

My initial approach involved adding the <br/> tag and repositioning the text over the control, as shown below:

  <label class="custom-control custom-checkbox">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this custom checkbox</span>
    <br />
    <input type="checkbox" class="custom-control-input">
  </label>

Unfortunately, my attempts were unsuccessful. You can view the failed plunker here.

For comparison, you can check out the normal inline checkboxes of Bootstrap v4 in this plunker.

htmlcsstwitter-bootstrapcheckboxbootstrap-4

Answer №1

.custom-checkbox {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
}
.custom-control-indicator {
  position: static; /* overriding the _custom-forms.scss styling */
}

By using this code snippet, you can achieve the desired outcome but keep in mind that the text and checkboxes will be aligned "vertically" rather than "horizontally".

.custom-checkbox {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
}
.custom-control-indicator {
  position: static; /* necessary to override position:absolute set by 
                      * _custom-forms.scss in bootstrap
                     */
}
<div>
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check 1</span>
  </label>
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check 2</span>
  </label>
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check 3</span>
  </label>
</div>

Answer №2

Check out this snippet...

<label for='productSelection'>Select Product</label><br>
<select id='productSelection'>
  <option value='1'>Product A</option>
  <option value='2'>Product B</option>
  <option value='3'>Product C</option>
</select>

in your JavaScript code...

$(function () {
    $("#productSelection").change(function () {
        var selectedValue = $(this).val();
        alert("You selected: " + $("#productSelection option[value='" + selectedValue + "']").text());
    });
});

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

What is the best way to align the navbar-brand link in the middle of a Bootstrap 4 navigation bar?

This question may seem like a duplicate, but it is not. I am specifically asking about Bootstrap version 4.3 and not any earlier versions. The answers I have found so far are either not applicable to the current version (useless for updated projects), or ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to incorporate a CSS file into this without explicitly mentioning the color?

I have successfully implemented a PHP solution for changing themes with a cookie that remembers the selected theme color when the user leaves the site. However, I now need to switch this functionality to JavaScript while still utilizing the CSS file. How c ...

javascriptphpcsscookiesthemes

The picture is not visible outside the parent container - why is it hidden?

Currently, I am working on project cards and using materialize css's image card to style them. One of the features that I particularly like is how it resizes the picture when included inside a container. This allows me to set a fixed height without wo ...

htmlcsstwitter-bootstrapmaterialize

Can you guide me on how to programmatically set an option in an Angular 5 Material Select dropdown (mat-select) using typescript code?

I am currently working on implementing an Angular 5 Material Data Table with two filter options. One filter is a text input, while the other is a dropdown selection to filter based on a specific field value. The dropdown is implemented using a "mat-select" ...

javascripthtmlangulartypescript

Use flexbox to manage the width of containers and control the wrapping of elements

Hello, I am a newcomer to utilizing flexbox in CSS. I have these "boxes" that need to maintain their width and wrap when the screen size is small. On a large screen: https://i.sstatic.net/dXnGC.png On a small screen: https://i.sstatic.net/8rZso.pn ...

cssflexbox

Choosing options from Bootstrap dropdown using Protractor

I am working with a Bootstrap single-button dropdown and I need to programmatically click on one of the options in the dropdown using Protractor. How can I achieve this? <div class="btn-group" ng-if="!persist.edit" dropdown> ...

javascripttwitter-bootstrapseleniumselenium-webdriverprotractor

Guide to Making a Responsive Carousel with Custom Dimensions using Bootstrap

Hello, I'm embarking on my journey into the world of web development and I have a specific vision in mind - to create a personalized carousel positioned under the navigation bar on the right side of my website within a designated section. However, I a ...

bootstrap-4carousel

Error: Issue with parsing integer in JavaScript

I'm in the process of developing a dice game that involves rolling two dice and determining the sum. The goal is to display the running total next to the dice. However, I'm encountering an issue where NaN (Not a Number) is being displayed. Here i ...

javascripthtmlnanparseint

Modifying text appearance and design in material-ui release 0.15.4

I'm quite new to CSS and front-end web development, and I'm struggling with setting the style of a button on my page. I want to change the text color and possibly adjust the primary color of my theme from cyan to blue. I know that material-ui has ...

cssmaterial-ui

Select the fourth element in a list using CSS

Is it possible to style the fourth child differently using the ">" selector like so: .thisclass > ul > li > ul > li { color: blue; } I am working with WordPress and trying to avoid creating additional CSS classes. Is there a way to apply s ...

htmlwordpresscss

Adding a picture to the webpage and saving it temporarily on the site

After exploring all options on the site, testing it rigorously and closely following the instructions provided, I am still unable to determine where exactly I went wrong. Website Link: The main goal is to upload an image and temporarily store it within t ...

javascriptajaxhtml

CSS: What's with the weird gray element appearing in Safari?

Does anyone have a solution for removing the grey layer (cf the image) in Safari? This issue does not occur in Chrome. The structure is as follows: <div class="class1"> <div class="class2"> <select> ... </selec ...

csssafari

The space residing above my primary container division

I recently finished creating a basic web app, but I'm encountering an issue with the smallest media query where there is an unwanted top gap. Despite trying multiple methods and researching solutions online, I have not been able to resolve this proble ...

htmlcssresponsive-design

Creating a rhombus or parallelogram on a canvas can be easily achieved by following these simple

I'm new to working with the canvas element and I want to create some shapes on it. Can someone provide me with guidance on how to draw a Rhombus or Parallelogram on a canvas? Something similar to what is shown in this image: https://i.stack.imgur.c ...

javascripthtmlcanvas

Angular 5: Autosuggestion feature functions perfectly in Chrome, experiencing difficulties in Internet Explorer

I have integrated an autosuggestion feature using Angular 5, pulling suggestion values from an API. Here is the HTML Code : <div class="col col-lg-4"> <label for="insuranceCompanyName"> Insurance Company Name </label> ...

htmlangularangular5datalistautosuggest

Adapting the top margin dynamically for different screen sizes

I am attempting to style an HTML DIV so that the margin-top is adjusted responsively based on the height of the div: jsfiddle Within the wrapper, there is another div that is initially set to display: none, but this may change if the user enters an incorr ...

css

Having difficulty upgrading from BootStrap 3 to BootStrap 4

Need assistance updating from BootStrap 3 to BootStrap 4 on my local server. After trying to update, I ended up with a result that still reflects BootStrap 3. https://i.sstatic.net/Bs9H0.jpg Here's the code snippet I used for linking: <link rel=& ...

htmlcsstwitter-bootstrap

Move your cursor over an image to reveal another image on top without impacting the image underneath by using background-image

Is there a way to create an effect where hovering over a specific book image will display a checkmark, indicating selection upon click? Ideally, users should be able to press alt (cmd on mac) to select multiple books simultaneously. Check out the HTML bel ...

htmlcsshoverbackground-image

Tips for positioning a modal in the center specifically for zoomed-in mobile devices

I created a modal that uses the following function to center itself: center: function() { var top=Math.max($window.height() - $modal.outerHeight(),0) / 2; var left=Math.max($window.width() - $modal.outerWidth(),0) / 2; $modal.css({ ...

javascriptjqueryhtmlcssmobile

Switch from monochrome to color when hovering inside a clipping mask

I have successfully mastered the technique of changing an image from grey to color on hover using CSS and JavaScript. However, I am curious about whether it is possible to achieve the same effect using a clipping mask. Attached is an image that illustrate ...

csshovermaskclipping