htmltwitter-bootstrapbootstrap-4layouthtml-lists
HTML/Bootstrap layout
I'm trying to layout a section like the image here.
I'm using bootstrap 4. I've tried laying out with rows and cols but can never achieve this look. Right now I'm using a <ul> and <li>. Inside the <li> I have 3 inputs. I've tried putting all three inside a <div class="form-group form-inline"> and also tried separating them out to individual "form-group" divs with no luck. I'm sure I just don't understand enough about how to lay things out. I'm hoping someone can help me understand and maybe help me out here.
This is as close as I have come but I can't seem to get the widths correct and it seems to break onto the new line.
<div id="cardBody" class="card-body">
<div class="row">
<div class="container-fluid">
<div class="col-md-6">
<label class="control-label ml-2">Description</label>
</div>
<div class="col-md-4">
<label class="control-label">Link</label>
</div>
<div class="col-md-1">
<label class="control-label">Count</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form>
<ul id="itemList" class="list-group">
<li class="list-group-item">
<div class="form-group form-inline mb-0">
<label for="description">⋮⋮</label>
<input type="text" class="form-control ml-2 mr-2" id="description" placeholder="">
<label class="sr-only" for="link">Link</label>
<input type="text" class="form-control mr-2" id="link" placeholder="">
<label class="sr-only" for="count">Count</label>
<input type="text" class="form-control mr-2" id="count" placeholder="">
</div>
</li>
<li class="list-group-item">
<div class="form-group form-inline mb-0">
<label for="description2">⋮⋮</label>
<input type="text" class="form-control ml-2 mr-2" id="description2" placeholder="">
<label class="sr-only" for="link2">Link</label>
<input type="text" class="form-control mr-2" id="link2" placeholder="">
<label class="sr-only" for="count2">Count</label>
<input type="text" class="form-control mr-2" id="count2" placeholder="">
</div>
</li>
<li class="list-group-item">⋮⋮</li>
<li class="list-group-item">4</li>
<li class="list-group-item">5</li>
<li class="list-group-item">6</li>
</ul>
</form>
</div>
</div>
</div>
Anyway, thanks in advance for any help or insight you can provide.
Solution
This worked for me. You may want to put the inline styles in your css file.
<div class="container">
<div id="cardBody" class="card-body">
<div class="row">
<div class="container-fluid d-flex">
<div class="col-md-7">
<label class="control-label ml-4">Description</label>
</div>
<div class="col-md-4">
<label class="control-label">Link</label>
</div>
<div class="col-md-1">
<label class="control-label">Count</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form>
<ul id="itemList" class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-7 form-group form-inline mb-0">
<div class="d-flex" style="width: 100%;">
<label for="description">⋮⋮</label>
<input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
</div>
</div>
<div class="col-4 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
</div>
<div class="col-1 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-7 form-group form-inline mb-0">
<div class="d-flex" style="width: 100%;">
<label for="description">2</label>
<input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
</div>
</div>
<div class="col-4 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
</div>
<div class="col-1 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-7 form-group form-inline mb-0">
<div class="d-flex" style="width: 100%;">
<label for="description">3</label>
<input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
</div>
</div>
<div class="col-4 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
</div>
<div class="col-1 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-7 form-group form-inline mb-0">
<div class="d-flex" style="width: 100%;">
<label for="description">4</label>
<input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
</div>
</div>
<div class="col-4 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
</div>
<div class="col-1 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-7 form-group form-inline mb-0">
<div class="d-flex" style="width: 100%;">
<label for="description">5</label>
<input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
</div>
</div>
<div class="col-4 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
</div>
<div class="col-1 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
</div>
</div>
</li>
</ul>
</form>
</div>
</div>
</div>
</div>
- Setting the background of an input element as a combination of three colors
- jQuery button click not showing/hiding content
- How to style SVG with external CSS?
- How to Make an SVG Image Dynamically Match the Height (1em) and the Baseline of Surrounding Text?
- How can I count and show Unicode Characters when insert onclick to textarea?
- How to find my images in my folders using the picture element in HTML?
- How to Position an Image on Different Sides of a Container Using CSS?
- How remove border around image in css?
- HTML canvas not drawing image
- Show a message if a text is copied successfully(alternative to alert)
- Should I use the .htm or .html file extension? Which one is correct?
- TailwindCSS: SVG icon won't resize properly
- Float CSS attribute causing parent div not to inherit height?
- Save canvas in grayscale
- svg path not drawing for single point on chrome surface
- Any Way to Reduce File Size Using wkhtmltopdf?
- How to load a gzip compressed javascript without a webserver?
- How simulate CTRL+V keystrokes (paste) using C#
- How to get the value of a selected radio button
- Show text outside the div with clip-path
- Flask/Jinja content not centering
- How to create a scalable document element inside a container in HTML
- Custom directive and [ngClass] on same element does not work
- How can mock a component child to test the parent standalone component in Angular
- How to add Font Awesome icon into <input> button?
- I can't set text after modifying the text
- Change / Hack style of Facebook 'Like it' button
- Selector :last-child not working as expected?
- Convert an array of objects into an unordered HTML list with nested list items
- Why does this strange space start appearing at the bottom of the page only on mobile?