Top and bottom fieldset legends in Bootstrap 4

Looking for suggestions on how to include legend text on the bottom border in bootstrap 4.

I attempted to use position and margin, but it didn't work.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<fieldset class="border p-2">
   <legend  class="w-auto">Head</legend>
</fieldset>

Expected output:

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

Appreciate the help!

htmlcssbootstrap-4

Answer №1

At the moment, there isn't an official method to accomplish this task, but with a bit of CSS, it can be done...

Give this a try...

<fieldset style="padding-bottom: 1rem;">
<legend>Personal:</legend>
Name: <input type="text" size="30"><br><br>
Email: <input type="text" size="30"><br><br>
Date of birth: <input type="text" size="10>

Make sure you have at least one field above the Hello Label, otherwise it will be hidden...I hope this helps

Adjust the margin-left as per your needs...

See the output here

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

Transmit information using $broadcast when a button is clicked, and retrieve that information using $scope.$on

I am trying to create a function that will broadcast data from the server upon button click, and then navigate to a new route using $state.go('new-route'). In the controller of this new state, I want to retrieve the transmitted data. However, whe ...

javascripthtmlangularjseventsangular-ui-router

JavaScript: Retrieving the names of children within a <div> element

Within my structure setup, there is a tower div with inner elements like this: <div class="tower"> <div class="E0">abc</div> <div class="GU">123</di </div> The challenge I am facing is that I need to access the in ...

javascripthtmlclass-names

The React production build is experiencing a problem where the Jumbotron background image fails to render

I am experiencing an issue where my image is not showing up in my React App that uses Bootstrap 4.3 after running npm run build. The image has been relocated to the Public Directory (/images/bg.jpg). While I can see it rendering correctly in the Developme ...

reactjsbootstrap-4babeljsjsx

Tips for Including a Parallax Image Within a Parallax Section

Currently, I am working on implementing a parallax effect that involves having one image nested inside another, both of which will move at different speeds. My progress has been somewhat successful, however, the effect seems to only work on screens narrowe ...

javascriptjquerycsstwitter-bootstrapparallax

Looking to create circular text using HTML, CSS, or JavaScript?

https://i.sstatic.net/pnu0R.png Is there a way to generate curved text in HTML5, CSS3, or JavaScript similar to the image linked above? I've experimented with transform: rotate(45deg); but that just rotates the text without curving it. Additionally, ...

javascriptcsstext

Design a unique border for a div element that extends a top-border all the way through the header and a bottom-border that

I am trying to achieve the design displayed in this mockup: https://i.sstatic.net/sYEPu.png Here is my current progress: https://codepen.io/raney24/pen/VOmjBY .header-border { width: 100%; margin-bottom: 10px; border-left: red solid 1px; border ...

htmlcssborder

The Enigmatic Gap Amidst Flex Elements

I have a situation where two divs are placed within a flex container. However, the second div is incorrectly aligning to the right side of the page rather than next to the first div. Despite the default values for flex-flow being row and justify-content b ...

htmlcssflexbox

What is the best way to extract the image tag from HTML code and use it as the image source in Glide for images

I recently came across a method to extract image links from HTML img tags using the Html Java library. It requires using the fromHtml method. After pulling some HTML code from an RSS feed, I wanted to display the images it contained. The code snippet belo ...

javaandroidhtml

Troubleshooting: How to Fix Missing Sum Display in HTML Input Fields

I am new to the world of website programming and I am currently working on creating a basic sum equation using two input fields from the client-side. <!DOCTYPE html> <html> <head> </head> ...

javascripthtmlinputalerthtml-input

Tips to prevent browser from freezing while creating a large number of HTML elements

I am currently utilizing Selection.js to develop a customizable grid on my website. To make this work effectively, I need a specific number of div elements to establish the selectable area. In my scenario, I generate all the divs using a for loop and then ...

javascripthtmlreactjs

Issue with JavaScript not executing upon clicking the submit button on a form within the Wordpress admin page

In the admin pages of my Wordpress installation, I have created an HTML form. My goal is to validate the data inputted when the submit button is pressed using a Javascript function. If the data is not correctly inserted, I want alerts to be displayed. Desp ...

javascriptphphtmlwordpress

The URL "http://packagist.org/p/provider-3.json" was unable to be retrieved due to a bad request error (HTTP/1.1 400 Bad Request)

Encountering a 400 bad request issue when trying to connect over HTTP, despite the package only being installable via HTTP. Attempting to override in composer.json to force HTTPS as suggested by others for a workaround, but that solution doesn't seem ...

htmlcssangularlaravel-5

Getting to grips with accessing HTML elements within a form

<form name="vesselForm" novalidate> <input type="text" id="owner" name="ownerEdit" required ng-blur="vesselForm.btnCC.attr('value', 'Change Customer')"/> <input type="button" name="btnCC" value="Customer" /> </fo ...

htmlangularjs

Is AngularJS governed by a distinct set of guidelines for ARIA implementation?

I am currently working on updating a website to ensure compliance. The site is predominantly built using AngularJS, which I am still in the process of learning. I encountered an interesting situation where there is a label targeting a div element without a ...

htmlangularjslabelwai-ariawcag2.0

display information in a structured table format

I am in need of HTML code that will render headers aligned above corresponding values when displayed. header1 header2 header3 List item 1 value111 value112 value113 value121 valueb122 valueb123 List item 2 value211 value212 value213 value221 valueb2 ...

htmlcsslayout

What steps should I take to include a Follow - Unfollow Button on my Website?

I need to add a button on my website that allows users to either follow or unfollow a specific game. Here is the table for the follow buttons: Follow Button Table When a user clicks on the button related to the game ID, it should update the game_follow d ...

javascriptphpjqueryhtmlmysql

Does adding the async attribute to a script impact the timing of the onload event?

I am facing an issue with a webpage that contains a script tag in the HEAD section: <script src="somescript.js" type="text/javascript" async></script> Since it has the async attribute, this script loads asynchronously, allowing the browser to ...

javascripthtmldom

Does Less undergo a compilation process in a single pass?

Does Less execute a single pass on the files, or does it perform multiple passes? I am particularly worried about what will happen if I include another file that redefines variables and mixins. Will the generated output use the original values, or will it ...

cssless

I am unable to reach POST; instead, I keep receiving GET

After deciding to expand my knowledge, I delved into the world of NodeJS and ReactJS, excited about learning something new. However, there is a dilemma that requires assistance. On the server side, I installed several packages such as MySQL, body-parser, n ...

htmlnode.jsreactjsexpressaxios

Arrange two Angular 2 divs in a single row, with one positioned below the

Good Evening, I have a project in angular and I need help with styling. Specifically, I have 3 divs - card, table, and map. I want the card and table to be in the same row, and the map to be below them with double the size. The top left should have item in ...

htmlcssangular