Here's a solution for fixing this layout issue: The alignment of the table titles with the content needs to be adjusted, and the content in each row should

I am attempting to create a layout that features a type column on the left that takes up more width compared to the other two items on the right. This is because the type and description may be lengthy. Additionally, I want the type and description of each item to line up vertically with the quantity select menu and the subtotal content.

I am a beginner user of Bootstrap and I am using the table component to achieve this layout. I am unsure if using the table component is the correct approach or if I should consider using a panel or another method.

The current layout I have achieved can be viewed here: https://jsfiddle.net/bcvm3ap2/. However, the table titles are not aligned with the content and the content of each row is not vertically aligned.

Can you provide guidance on how to fix this issue? And also, if using a table is the correct approach for this layout?

HTML:

<div class="row no-gutters bg-white">
  <div class="col-12 col-md-8 px-4 pb-4">
    <table class="table table-responsive-sm border">
      <thead>
        <tr class="d-flex justify-content-between">
          <th scope="col" class="mr-auto">Type</th>
          <th scope="col">Quantity</th>
          <th scope="col">Subtotal</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="">
            <span class="text-heading-blue font-weight-semi-bold">Type1</span>
            <small class="font-weight-light d-block">Description</small>
          </td>
          <td><select class="form-control font-weight-normal text-gray" id="exampleFormControlSelect1">
            <option selected class="selected">0</option>
            <option>1</option>
            <option>2</option>
            </select>
          </td>
          <td>0</td>
        </tr>
        <tr>
          <td class="">
            <span class="text-heading-blue font-weight-semi-bold">Type2</span>
            <small class="font-weight-light d-block">Description</small>
          </td>
          <td><select class="form-control font-weight-normal text-gray" id="exampleFormControlSelect1">
            <option selected class="selected">2</option>
            <option>1</option>
            <option>2</option>
            </select>
          </td>
          <td>2</td>
        </tr>

      </tbody>
    </table>
  </div>
</div>

Using panels is also not achieving the intended layout: https://jsfiddle.net/jdpr21qw/1/. The titles are misaligned with the content.

csstwitter-bootstrapbootstrap-4

Answer №1

Here is the code snippet to help you achieve the desired layout:

<!DOCTYPE html>
<html lang="en>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row no-gutters bg-white">
  <div class="col-12 col-md-8 px-4 pb-4">
    <table class="table table-responsive-sm table-bordered">
      <thead class='text-center'>
        <tr class="text-center ">
          <th scope="col" class="mr-auto">Type</th>
          <th scope="col">Quantity</th>
          <th scope="col">Subtotal</th>
        </tr>
      </thead>
      <tbody >
        <tr >
          <td class="">
            <span class="text-heading-blue font-weight-semi-bold">Type1</span>
            <br/><small class="font-weight-light d-block">Description</small>
          </td>
          <td><select class="form-control font-weight-normal text-gray" id="exampleFormControlSelect1">
            <option selected class="selected">0</option>
            <option>1</option>
            <option>2</option>
            </select>
          </td>
          <td>0</td>
        </tr>
        <tr>
          <td class="">
            <span class="text-heading-blue font-weight-semi-bold">Type2</span>
            <br/><small class="font-weight-light d-block">Description</small>
          </td>
          <td><select class="form-control font-weight-normal text-gray" id="exampleFormControlSelect1">
            <option selected class="selected">2</option>
            <option>1</option>
            <option>2</option>
            </select>
          </td>
          <td>2</td>
        </tr>

      </tbody>
    </table>
  </div>
</div>

</body>
</html>

Answer №2

In my opinion, Bootstrap 4 is actually simpler than Bootstrap 3, contrary to what Darren Sweeney believes.

Regarding the question at hand, using a table may not be the best choice for this layout. HTML tables in Bootstrap lack the flexibility to control column widths effectively. Tables are primarily for displaying tabular data, and when specific column widths are needed, tables may not be the optimal approach.

While Bootstrap can enhance the styling of HTML tables, it falls short when it comes to specifying individual column widths. Including width specifications in the HTML code may work, but this method is not responsive and does not align with the principles of Bootstrap.

If you replace 

<tr class="d-flex justify-content-between">
with <tr>, the table will still appear fine. However, the first column may not be wider than the others unless additional content is added to it: https://i.sstatic.net/5t015.png

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

Using only CSS to reverse the order of Bootstrap rows within a forEach statement in a .php file

I am facing a challenge in reversing rows within a forEach statement. For instance, in the first row, the content's div (title, text) should be on the left side and the image on the right side. In the second row, it should be reversed, with the image ...

javascriptphphtmlbootstrap-4sass

In IE8, displaying an element with jQuery does not cause the footer to be pushed down

I've tried various methods to solve this issue, but none have been successful so far. To better illustrate my problem, I have created a FIDDLE. When the button is clicked, a hidden element is displayed. However, it does not adjust the footer position ...

jqueryhtmlcssinternet-explorer-8

Achieving Vertical Centering in Bootstrap: A Step-by-Step Guide

Creating a mobile-optimized website using bootstrap 4. Currently struggling to vertically center an element within the available space. The element consists of a title with fixed size, a message, and 2 buttons in a div. Need to ensure it is vertically cent ...

htmlcssbootstrap-4

Styling text and images with Bootstrap

Currently, I'm utilizing bootstrap to structure a row with 2 div elements. The first div contains an image while the second div holds text content. The challenge I am facing is aligning the text to the edge of the image. However, since the image does ...

htmlbootstrap-4

How to Align Two Headers Vertically Next to Each Other Using HTML and CSS

Looking for a solution for aligning the orange date: Here is the current setup: Check out the JsFiddle example: http://jsfiddle.net/N4gpA/ (Including code as jsfiddle-only is not permitted) HTML: <div class="Box1"><a href="#"&g ...

htmlcsstextalignment

Guide to Embedding Dynamic Images in HTML Using VUE

I am venturing into the world of VUE for the first time, and I find myself in need of a header component that can display an image based on a string variable. Despite my best efforts to search for tutorials, I have not been able to find a solution. Header ...

javascripthtmlcssvue.js

Automatically scroll the chat box to the bottom

I came across a solution on Stackoverflow, but unfortunately, I am having trouble getting it to work properly. ... <div class="panel-body"> <ul id="mtchat" class="chat"> </ul> </div> ... The issue lies in the JavaScript t ...

javascriptjqueryhtmlcss

Utilizing JavaScript for manipulating arrays and displaying images

After asking this question previously without a satisfactory solution, I am hoping to provide better clarification. Imagine having an array with 3 items and it lands on 0 - a code is set up to display this in a div. Now, I want the image to be shown righ ...

javascripthtmlcss

What is the best way to insert a line break following a font awesome icon within a list?

My goal is to design a menu similar to LinkedIn's, featuring buttons made from icons positioned above text. However, I'm facing difficulty in inserting line breaks in CSS format after my FontAwesome icons. Despite having 'display:block' ...

htmlcssresponsive-design

I noticed a significant space below the footer on my webpage. As a first-time website creator, are there any solutions to this

I'm currently in the process of working on my very first website for a study project using HTML and CSS. There's an issue where there is a large gap below the footer that I can't seem to eliminate. I've only completed 3 pages so far, bu ...

htmlcss

I am encountering a problem with the $invalid property in AngularJS

Hey there, I've got a coding dilemma involving three number inputs, which I will refer to as the first input, second input, and third input for clarity. Here's the setup: <div> <form name="formOpenMax"> <div clas ...

javascripthtmlangularjstwitter-bootstrapvalidation

"What is the purpose of using the `position: absolute` property for movement transitions while deleting an item from a list

Click here to see an example where items smoothly move in a list when one item is removed. To achieve this effect, the element needs to be styled with: .list-complete-leave-active { position: absolute; } I'm curious as to why it doesn't work w ...

javascriptcssanimationvue.js

Angular formarray radio buttons not toggling properly in the UI

I have a FormArray that iterates through several test steps. Next to each test step, I am trying to include a radio button group with PASS or FAIL options. When I choose a radio option, it works fine. However, when I select PASS or FAIL on a different row, ...

angularbootstrap-4

Is it not possible to collapse in webkit?

Check out this jsfiddle link for a visual example: http://jsfiddle.net/qrbhb/ If you use the following HTML markup: <div>There should be no gap between us</div> <br /> <div>There should be no gap between us</div> along with ...

csscross-browser

Tips for utilizing the data-target feature in Bootstrap?

<button id="btn-id" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-navbar-collapse-1"> <span class="navbar-toggler-icon"></span> <span c ...

htmlcssformsbootstrap-4

Struggling with CSS float problems

I'm currently working with the Pure CSS framework and my code resembles this: <div class="container pure-g"> <header class='pure-u-1'> <h1 class='logo'> <a href="#">TEST</a> </h1> &l ...

htmlcssyui-pure-css

Using jQuery to remove all inline styles except for a specific one

Just a quick inquiry: Our Content Management System (CMS) utilizes CKEditor for clients to modify their websites. The front-end styles include the use of a pre tag, which we have customized to our desired appearance. However, when their team members copy a ...

javascriptjqueryhtmlcss

Text alignment issues cause animation to vanish

Utilizing particles.js, I set up a full-screen particle effect by specifying the animation to be full-screen with height: 100vh;. This worked perfectly as intended. However, when attempting to add text on top of the particle animation and center it vertica ...

javascripthtmlcss

Styling columns to be inline-flex without taking up the full height

I'm currently working on a project similar to "Trello" or "Zenhub," using a Kanban board with 4 columns placed in a div#board. The columns are set to display: inline flex, creating a neat horizontal alignment. However, I encountered an issue where eac ...

jqueryhtmlcssflexboxmaterialize

How can I search for a particular string in JavaScript?

I have a unique custom div that has been modified to function as an input element. Inside this custom div input element, there is a <p> tag with a default placeholder text. My goal is to verify whether the content of this div is empty or contains new ...

javascriptjqueryhtmlcss