Transform the table into a div structure according to the Bootstrap v4 beta guidelines

I'm currently utilizing bootstrap v4 beta and have successfully created a table. Now, I would like to replicate the same table structure using div elements.

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th class="text-center"><b>Id</b></th>
        <th class="text-center"><b>Name</b></th>
        <th class="text-center"><b>Munit</b></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> 1</td>
        <td class="text-center"> 294</td>
        <td class="text-center"> nimai</td>
        <td class="text-center"> kg</td>
      </tr>
      <tr>
        <td> 2</td>
        <td class="text-center"> 200</td>
        <td class="text-center"> nitai</td>
        <td class="text-center"> kg</td>
      </tr>
    </tbody>
  </table>
</div>

I am aiming to achieve the same appearance as depicted in the image below:

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

csshtml-tablebootstrap-4

Answer №1

You can easily create this layout using the flexbox feature.

.table {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.table-row {
  width: 100%;
  height: 10vw;
  display: flex;
  border-bottom: 1px solid #ccc;
}

.table-header {
  font-weight: bold;
}

.table-row div:first-child {
  width: 10% !important;
}

.table-row-column {
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="container">
  <div class="table">
    <div class="table-row table-header">
      <div class="table-row-column table-row-index">#</div>
      <div class="table-row-column table-center">Id</div>
      <div class="table-row-column table-center">Name</div>
      <div class="table-row-column table-center">Munit</div>
    </div>
    <div class="table-row">
      <div class="table-row-column table-row-index">1</div>
      <div class="table-row-column table-center">294</div>
      <div class="table-row-column table-center">nimai</div>
      <div class="table-row-column table-center">kg</div>
    </div>
    <div class="table-row">
      <div class="table-row-column table-row-index">2</div>
      <div class="table-row-column table-center">200</div>
      <div class="table-row-column table-center">nitai</div>
      <div class="table-row-column table-center">kg</div>
    </div>
  </div>
</div>

Answer №2

Check out this code snippet

.col {
display: inline-block;
}

row {
display: block;
}
<div class="row">
   <div class="col">
     <div>First column</div>
     <div> 1</div>
     <div> 2</div>
      <div>3</div>
   </div>
   <div class="col">
     <div>Second column</div>
     <div>1</div>
     <div>2</div>
     <div>3</div>
   </div>
   
      <div class="col">
     <div>Third column</div>
     <div>1</div>
     <div>2</div>
     <div>3</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

Creating a dynamic lineup of images that adjust seamlessly to different screen sizes

Trying to figure out how to create a row of images that adjust responsively to the width of the window. Here's what I have so far: <div class="image-slider"> <div><img src="/img1.jpg"></div> <div><img src="/img2.j ...

htmlcssresponsive-designflexboxmedia-queries

While working on creating a game prototype using CSS and Javascript, I encountered an issue where the icons were losing their color when trying to print the document

When I try to print, the icons like ...

javascriptcssprinting

Using jQuery to update the CSS background of a selected element among multiple elements sharing the same class

I am currently developing a basic jQuery script that will enable the background color of the clicked element to change. Below is the code I have so far: <dt> <input id="p_method_banktransfer" value="banktransfer" type="radio" name="payment[metho ...

javascriptjqueryhtmlcss

Introducing a variety of sub-menu fonts within an elegantly designed jQuery vertical accordion menu

I am struggling to achieve different font sizes, colors, and weights for top and sub-menu level links in my simple jQuery vertical accordion. Despite changing the CSS, I can't seem to get it right. What am I missing? Is there an easy way to accomplish ...

jqueryhtmlcssaccordion

Tips for eliminating the white border in a stacked column Google chart

Is there a way to eliminate the white border in a stacked column google chart? If anyone has any tips or suggestions, please share! Here is an example of what I am referring to: my current chart ...

javascripthtmlcssgoogle-visualization

Utilizing Consistent Styles Across Multiple Components within an Angular 2 Application

In my Angular 2 app, I have some CSS rules that are shared among multiple components. I don't want to duplicate these rules in each component's styles. Currently, I am considering two approaches: Storing common CSS rules in a static CSS file an ...

cssangulartypescriptstylesheet

Customizing the image border at the top of the navigation bar

I'm in need of assistance with my navigation bar design. I have a specific vision for it, and I even have an image of the "rough texture" that I want to incorporate into the navigation menu. However, I've been struggling to figure out how to use ...

htmlcssimagepseudo-elementnavigationbar

Can CSS be utilized to choose every second set of three elements?

Is there a way in CSS to style every second group of three elements? If so, how can this be achieved? For example, in the code snippet below, how can we style the 4th-6th and 10th-12th li elements? <ul> <li>1</li> <li>2< ...

csscss-selectors

Creating a horizontal split with HTML's div tag and CSS

Can someone assist me in creating two horizontal divisions using the <div> tag in HTML? I have been struggling to achieve this and would appreciate any help with utilizing HTML and CSS for the task. ...

htmlcsslayoutalignment

Troubleshooting Issue: Bootstrap 4 Hide Functionality Not Responsive for XS and SM Devices

As I work on creating an XS view for my app, I encountered a problem with hiding a specific div on small and extra small devices. Despite following Bootstrap 4 documentation, the extra small breakpoint is not functioning as expected. <div class="header ...

htmlbootstrap-4

Intercepts clicks outside of element borders when heading has a line-height lower than 1

Right after an anchor tag, I have an H1 element. The line-height of the H1 element is set to '0.9' for design purposes. As a result, the computed height of the H1 becomes shorter, but the actual Text element inside overflows and covers part of t ...

htmlcss

Elevated CSS: Convert submenu to vertical dropdown layout rather than horizontal

My website features a superfish menu here, and I am seeking a way for the submenu to drop down vertically. Currently, I can achieve this by applying the following CSS: .sf-menu.sf-style-white.sf-navbar li ul { width: 150px; left: 100px; } However, th ...

jquerycsssuperfish

Is it possible to add additional text to an input field without modifying its existing value?

I have a numerical input field labeled "days" that I want to add the text " days" to without altering the actual numerical value displayed. <input type="number" class="days" (keyup)="valueChanged($event)"/> Users should only be able to edit the num ...

htmlcsstypescriptinput

Expandable Bootstrap collapse and accordion open horizontally, not vertically

I want to use Bootstrap collapse but I want to keep my div-s with the content beneath each link, mainly because that's how i need it to work on mobile (the menu is a column and that the content opens under each link). Unfortunately, on website I have ...

htmlbootstrap-4

Creating a grid layout: Is there a way to instruct the renderer to disregard any additional tags in between

I have been setting up a grid layout with some divs, following this structure: CSS .grid { width: 300px; display: grid; grid-template-columns: 50% 50%; } HTML <div class="grid"> <div>First cell</div> <div>Second cell&l ...

htmlangularcssgrid-layout

The .on() function in Jquery seems to be malfunctioning when it comes to handling dynamically

Despite my efforts to find a solution after exploring other questions and attempting various possible fixes, I am still unable to correctly bind the click event. Any assistance would be greatly appreciated. My current project involves a webpage that intera ...

jquerycssajaxdom

Aligning Your Header and Wrapper in Bootstrap 4

I am attempting to align my header with my 1024px wrapper. Below is the code snippet: https://codepen.io/anon/pen/wLRgyN. My goal is to align the 300x100 section to the right and the navigation to the left of each side of the wrapper in order to achieve a ...

bootstrap-4

display the entire calendar for the chosen month

I am currently using Foundation Datepicker and Full Calendar. My requirement is as follows: 1) When I select a date in the calendar, For example, let's say it's July 2016. If I choose a date in November or any other month in the Foundation Date ...

jquerycssdatepickercalendar

Tips for aligning links and a button vertically within a div:

Thank you for this amazing opportunity. I am currently facing a challenge that I am finding difficult to solve due to my limited front-end development skills: I am trying to align links vertically with a button. Here is the HTML code: <nav> &l ...

javascripthtmlcss

How to Implement Flexbox Display Across Various Browsers Using jQuery?

Running into an issue here. I'm trying to switch from display: none to display: flex, display: flex-box, and display: -ms-flexbox but for some reason it's causing errors in my code.. Here's what I've been working on: $(elem).css({&apos ...

javascriptjquerycssflexbox