Help with form

MaximM777Jan 12, 2022

Hello, can you tell me how to expand this form to 10 values?

<!-- Tabs Links
						============================================= -->
						<div id="price" class="pricing-tabs nav flex-column col-md-5" role="tablist">
							<!-- Tab 1 -->
							<label for="pricing-plan-nav-basic" class="d-flex align-items-center border rounded-1 p-3 ls0 mb-2 nott active">
								<input type="radio" checked name="pricing-plan-nav" id="pricing-plan-nav-basic" value="Basic" role="tab" data-bs-target="#pricing-plan-basic">
								<h4 class="mb-0 ms-2 fw-medium">Basic</h4>
								<h3 class="mb-0 ms-auto price">$11 <small>/ month</small></h3>
							</label>
							<!-- Tab 2 -->
							<label for="pricing-plan-nav-professional" class="d-flex align-items-center border rounded-1 p-3 ls0 mb-2 nott">
								<input type="radio" name="pricing-plan-nav" id="pricing-plan-nav-professional" value="Professional" role="tab" data-bs-target="#pricing-plan-professional">
								<h4 class="mb-0 ms-2 fw-medium">Professional</h4>
								<h3 class="mb-0 ms-auto price">$19 <small>/ month</small></h3>
							</label>
							<!-- Tab 3 -->
							<label for="pricing-plan-nav-business" class="d-flex align-items-center border rounded-1 p-3 ls0 mb-2 nott">
								<input type="radio" name="pricing-plan-nav" id="pricing-plan-nav-business" value="Business" role="tab" data-bs-target="#pricing-plan-business">
								<h4 class="mb-0 ms-2 fw-medium">Business</h4>
								<h3 class="mb-0 ms-auto price">$29 <small>/ month</small></h3>
							</label>
							<!-- Tab 4 -->
							<label for="pricing-plan-nav-enterprise" class="d-flex align-items-center border rounded-1 p-3 ls0 mb-2 nott">
								<input type="radio" name="pricing-plan-nav" id="pricing-plan-nav-enterprise" value="Enterprise" role="tab" data-bs-target="#pricing-plan-enterprise">
								<h4 class="mb-0 ms-2 fw-medium">Enterprise</h4>
								<h3 class="mb-0 ms-auto price">$39 <small>/ month</small></h3>
							</label>
						</div>

						<!-- Tab Contents
						============================================= -->
						<div class="col-md-7">
							<div class="tab-content rounded bg-light px-5 py-4">
								<!-- Tab Contentent 1 -->
								<div class="tab-pane fade show active" id="pricing-plan-basic" role="tabpanel">
									<div class="pricing-features border-0 py-0">
										<ul class="iconlist">
											<li class="mb-1 d-flex justify-content-between"><span>100 User Accounts</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-1 d-flex justify-content-between"><span>1 Year License</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-1 d-flex justify-content-between"><span>24/7 Support</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-0 d-flex text-black-50 op-04 justify-content-between"><span>Full Access</span><i class="icon-line-circle-cross fw-bolder text-danger"></i></li>
											<li class="mb-1 d-flex text-black-50 op-04 justify-content-between"><span>SEO Features</span><i class="icon-line-circle-cross fw-bolder text-danger"></i></li>
											<li class="mb-1 d-flex text-black-50 op-04 justify-content-between"><span>All Niche Demos</span><i class="icon-line-circle-cross fw-bolder text-danger"></i></li>
											<li class="mb-1 d-flex text-black-50 op-04 justify-content-between"><span>Premium Plugins</span><i class="icon-line-circle-cross fw-bolder text-danger"></i></li>
										</ul>
									</div>
								</div>
								<!-- Tab Contentent 2 -->
								<div class="tab-pane fade" id="pricing-plan-professional" role="tabpanel">
									<div class="pricing-features border-0 py-0">
										<ul class="iconlist">
											<li class="mb-1 d-flex justify-content-between"><span>100 User Accounts</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-1 d-flex justify-content-between"><span>1 Year License</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-1 d-flex justify-content-between"><span>24/7 Support</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-1 d-flex justify-content-between"><span>Full Access</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-0 d-flex text-black-50 op-04 justify-content-between"><span>SEO Features</span><i class="icon-line-circle-cross fw-bolder text-danger"></i></li>
											<li class="mb-1 d-flex text-black-50 op-04 justify-content-between"><span>All Niche Demos</span><i class="icon-line-circle-cross fw-bolder text-danger"></i></li>
											<li class="mb-1 d-flex text-black-50 op-04 justify-content-between"><span>Premium Plugins</span><i class="icon-line-circle-cross fw-bolder text-danger"></i></li>
										</ul>
									</div>
								</div>
								<!-- Tab Contentent 3 -->
								<div class="tab-pane fade" id="pricing-plan-business" role="tabpanel">
									<div class="pricing-features border-0 py-0">
										<ul class="iconlist">
											<li class="mb-1 d-flex justify-content-between"><span>100 User Accounts</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-1 d-flex justify-content-between"><span>1 Year License</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-1 d-flex justify-content-between"><span>24/7 Support</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-1 d-flex justify-content-between"><span>Full Access</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-1 d-flex justify-content-between"><span>SEO Features</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-1 d-flex text-black-50 op-04 justify-content-between"><span>All Niche Demos</span><i class="icon-line-circle-cross fw-bolder text-danger"></i></li>
											<li class="mb-0 d-flex text-black-50 op-04 justify-content-between"><span>Premium Plugins</span><i class="icon-line-circle-cross fw-bolder text-danger"></i></li>
										</ul>
									</div>
								</div>
								<!-- Tab Contentent 4 -->
								<div class="tab-pane fade" id="pricing-plan-enterprise" role="tabpanel">
									<div class="pricing-features border-0 py-0">
										<ul class="iconlist">
											<li class="mb-1 d-flex justify-content-between"><span>100 User Accounts</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-1 d-flex justify-content-between"><span>1 Year License</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-0 d-flex justify-content-between"><span>24/7 Support</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-1 d-flex justify-content-between"><span>Full Access</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-1 d-flex justify-content-between"><span>SEO Features</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-1 d-flex justify-content-between"><span>All Niche Demos</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
											<li class="mb-1 d-flex justify-content-between"><span>Premium Plugins</span><i class="icon-line-circle-check fw-bolder text-success"></i></li>
										</ul>
									</div>
								</div>
							</div>

MaximM777Jan 13, 2022

Thanks, found another solution

MaximM777Jan 13, 2022

Tell me how to place 2 such blocks with different content on one page.

that link

						&lt;div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"&gt;
							&lt;div class="modal-dialog modal-lg"&gt;
								&lt;div class="modal-content"&gt;
									&lt;div class="modal-header"&gt;
										&lt;h4 class="modal-title" id="myModalLabel"&gt;Modal Heading&lt;/h4&gt;
										&lt;button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"&gt;&lt;/button&gt;
									&lt;/div&gt;
									&lt;div class="modal-body"&gt;
										&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;
										&lt;p&gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;
										&lt;p&gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.&lt;/p&gt;
										&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;
										&lt;p class="mb-0"&gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;
									&lt;/div&gt;
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;

SemiColonWebSTAFFJan 14, 2022

Hello,

You can simply use this code:

<!-- Large Modal 1 -->
<button class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target=".bs-example-modal-lg-1">Large Modal 1</button>

<div class="modal fade bs-example-modal-lg-1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Large Modal 1</h4>
				<button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button>
			</div>
			<div class="modal-body">
				Lorem ipsum dolor sit amet consectetur adipisicing, elit. Tempora, natus, quas, impedit fuga a expedita delectus inventore pariatur aut laudantium, explicabo reiciendis sunt sequi voluptatibus. Iure pariatur nostrum perferendis dicta.
			</div>
		</div>
	</div>
</div>

<!-- Large Modal 1 -->
<button class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target=".bs-example-modal-lg-2">Large Modal 2</button>

<div class="modal fade bs-example-modal-lg-2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel2" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Large Modal 2</h4>
				<button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button>
			</div>
			<div class="modal-body">
				Lorem ipsum dolor sit amet consectetur adipisicing, elit. Tempora, natus, quas, impedit fuga a expedita delectus inventore pariatur aut laudantium, explicabo reiciendis sunt sequi voluptatibus. Iure pariatur nostrum perferendis dicta.
			</div>
		</div>
	</div>
</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

MaximM777Jan 14, 2022

Yes, it really solved the problem! Thank you very much!