What is the best way to make a multi-line group using Bootstrap?

I'm a beginner exploring Bootstrap and attempting to design an HTML form using Bootstrap input-groups with captions in the input-group-prepend. I am looking to create a setup where a single caption is displayed before multiple styled lines inside the corresponding form-control element, similar to the image below:

This is what I have tried so far in my HTML code:

<div class="container"> 
    <div class="row">
        <div class="input-group mb-2 col-12">
            <div class="input-group-prepend">
                <span class="input-group-text">Caption<br/></span>
            </div>
            <span class="form-control">
                <p>Line 1</p>
                <p><strong>Line 2</strong></p>
                <p><strong>Line 3</strong></p>
            </span>
        </div>
    </div>
</div>

The current outcome appears as follows:

I need help on how to display multiple lines within the right-hand part of the bordered section. Any advice or suggestions are highly welcomed.

htmlcssbootstrap-4

Answer №1

Consider using the input-group-addon class instead of form-control

For example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container"> 
    <div class="row">
        <div class="input-group">
            <div class="input-group-addon">
                <span class="input-group-text">Heading<br/></span>
            </div>
            <span>
                <p class="form-control">Text 1</p>
                <p class="form-control"><strong>Text 2</strong></p>
                <p class="form-control"><strong>Text 3</strong></p>
            </span>
        </div>
    </div>
</div>

Check it out on Fiddle http://jsfiddle.net/bL6t8vrg/2/

Answer №2

To achieve this design, you can utilize a list-group along with list-group-item and customize it by adjusting the border-radius properties.

.input-group .list-group .list-group-item {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.input-group .input-group-prepend {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container"> 
  <div class="row">
    <div class="input-group mb-2 col-12">
      <div class="input-group-prepend">
        <span class="input-group-text">Caption<br/></span>
      </div>
      <ul class="list-group">
        <li class="list-group-item">Line 1</li>
        <li class="list-group-item"><strong>Line 2</strong></li>
        <li class="list-group-item"><strong>Line 3</strong></li>
      </ul>
    </div>
  </div>
</div>

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 content momentarily flashes on the page during loading even though it is not visible, and unfortunately, the ng-cloak directive does not seem to function properly in Firefox

<div ng-show="IsExists" ng-cloak> <span>The value is present</span> </div> After that, I included the following lines in my app.css file However, the initial flickering of the ng-show block persists [ng\:cloak], [ng-cloak], ...

javascriptcssangularjshtmlangular-directive

Tips for utilizing the <base> element in HTML5 for selective anchor tags

I only have one base tag in the head section of my HTML document, and there are two anchor tags with different URLs as shown below: <!DOCTYPE html> <html lang="en"> <head> <base href="https://www.youtube.com"/> </head> &l ...

javascriptjqueryhtml

What is the reason behind a flex-item collapsing when it has a display property set to flex, unless it is assigned an explicit width of 100%

.container { display: flex; } .component { display: flex; //width: 100%; height: 10px; ...

htmlcss

The Ajax request is frozen in the POST method

Currently, I have a basic webform consisting of textareas that are used to input data through CGI into a SQL database and this is functioning as expected. However, my issue arises from the fact that besides using <input type='submit'/> to ...

jquerypythonhtmlajaxcgi

JavaScript and Angular are used to activate form validation

Update: If I want to fill out the AngularJS Forms using the following code snippet: document.getElementById("username").value = "ZSAdmin" document.getElementById("password").value = "SuperSecure101" How can I trigger the AngularJS Form validation befo ...

javascriptjqueryhtmlangularjs

Avoid displaying hidden images or loading content upon clicking a tab

Check out my website here I have created four tabs on my website, and I want each tab to display a different gallery (Nextgen Pro gallery) when clicked. However, the performance is currently very poor because I am loading all the images at once. I plan to ...

javascriptjqueryhtmlajaxwordpress

Using AJAX to showcase data from a table in a database using the <select> tag but with an unfinished submit process

I am encountering an issue with my code. When I submit the value in getinv.php, it only returns a partial value. For example, when I click '2016-08-27', it only retrieves '2016'... My question is, how can I ensure that the exact value ...

javascriptphpjqueryhtmlajax

The CSS class is specifically assigned to a single element

After every two seconds, my JavaScript function is triggered and based on certain logic, I aim to add a CSS class with an effect to an HTML element on the page. var counter = 0; $interval(function () { counter++; ...

javascriptjqueryhtmlcssangularjs

Tips for obtaining the sources of every image on a webpage and consolidating them in a single section

My goal is to preload all images on a webpage into a single division before the page loads. For example, if there are 5 images on the page (eg1.png, eg2.jpg, eg3.bmp, eg4.jpg, eg5.png), I want them to be contained within a div with the id 'pre'. ...

javascriptphpjqueryhtmlcss

Use the color specified within the string

Recently, we have been revamping an outdated product using VueJs. The original application utilized Spring Web Flow, where all the text editing information was stored in a string. After some research, I discovered that adding white-space: pre-line; as a ...

htmlcssvue.js

Is there a way to incorporate an icon into the heading of an accordion-group in ngx-bootstrap?

Is it possible to include an icon in the heading of an accordion-group using ngx-bootstrap? For instance: <accordion-group heading="<i class='fa fa-users'></i> Users"> The content goes right in the template. </accordion ...

angularbootstrap-4accordionngx-bootstrap

How to stop AngularJS onClick event from causing scroll to jump to top of

As I work on developing a website using Angular JS and Bootstrap, I encountered an issue with the hamburger menu button on my homepage. Whenever I scroll halfway down the page and click the hamburger icon, it automatically scrolls me back to the top of the ...

javascriptjqueryhtmlangularjs

Contrasting text-transform: uppercase; and the use of all capital letters

Could you explain the distinction between <span style="text-transform: uppercase;">some text</span> and <span>SOME TEXT</span> They appear identical visually, but I've come across a suggestion that it's preferable to k ...

htmlcss

CSS: Create a form with two input fields where the left field is adjustable in width and the right field fills up

------------- -------------------------------------------------- | some unique text | | some more original content, varying length | ------------- -------------------------------------------------- |<---------------------- 100% width ------------------ ...

css

JavaScript and jQuery code: Trigger the vjs-fade-out class to toggle when the userActive value in video.js changes

I am currently utilizing video.js to develop a player that is compatible with various devices. One crucial feature I have included is a custom "return to menu" button located in the top right corner of the video player. The challenge I am facing is dynamic ...

javascriptjquerycssvideovideo.js

How can I ensure my card div is responsive in Bootstrap?

My current section consists of only 6 cards, with 3 cards in a row of 2. When the screen size reduces (to mobile phone size), I want each card to be on its own row, displaying one by one as the user scrolls. Although it functions as desired when I resize ...

htmlcssresponsive-designbootstrap-5

Checking if the group of radio buttons has been selected using JQUERY

Need help with validating a group of radio buttons. If none are checked, display an error message in the span element to prompt users to select an option. The strange issue I am facing is that the validation code works only when placed below the radio butt ...

javascriptjqueryhtml

Is it possible to separate a portion of HTML into a template and reuse it in multiple locations within a webpage?

In my HTML, I have an issue with duplicate code. In Java, I typically use IntelliJ to mark the code and select "extract method" => "replace 2 occurrences". I am looking for a similar solution in HTML, but the current method seems messy: <ng-template ...

htmlangular

Trouble arises when attempting to compare two JSON files with an undefined issue

data-info.json {"price-comparison":[[{"Price":"0.0"},{"Code":"C0358102"}],[{"Price":"2.0"},{"Code":"C0876548"}]],"isEmployeeOJ":"Y"} script.js var dataInfo = $http.get("data/data-info.json").then(function (response) { $scope.dataInfo = response.data; ...

javascripthtmlangularjsjson

What is the best way to distribute multiple inline-block elements evenly?

Is it feasible to evenly distribute numerous elements in a div with adjustable width? Check out this example that doesn't work. While using text-align:center; will center the elements, margin:0 auto; does not have any effect. I am aiming for somethin ...

htmlpositioningcss