Question 251121 in CSS Question posted in
Some basic documentation can be found here.

How to design the following custom UI headline with ReactJS, CSS and bootstrap?

I want to develop the following type of design in a responsive in ReactJS using Bootstrap or CSS(if necessary). This is not a header. How should I put the separators between each column and make the values of each label in the next line in the same column?
I need to have it equally spaced and should be responsive in a way when I resize the browser window it should not overflow. All the items are left aligned in each column.

My Sandbox Code –

Edit runtime-sunset-2t7yyz

The UI Design –
Design

Tags:

2

Answers


  1. 0

    do more CSS by yourself. Thank you.

    .container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.left {
  padding-inline: 20px;
  border-right: 2px solid black;
}
    <div class="container">
  <div class="left">
    <p>OrderNumber</p>
    <p>12345</p>
  </div>
  <div class="left">
    <p>OrderName</p>
    <p>Tesla Car</p>
  </div>
  <div class="right">
    <p>CarPrice</p>
    <p>CarPrice</p>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    With bootstrap css and custom css

    <div className="bg-opacity-100 bg-light border" style={{paddingTop:10, paddingBottom:10}}>
      <div className="col-1"/>
      <div className="row col-11 border p-2 border bg-opacity-10 w-100" style={{marginLeft:10}}>
        <div className="col-3 text-start">
          <div className="text-muted" style={{ fontSize: 10 }}>
            Order Number
          </div>
          <div style={{ fontSize: 10 }}>12345</div>
        </div>
        <div className="border-start col-3 text-start">
          <div className="text-muted" style={{ fontSize: 10 }}>
            Order Name
          </div>
          <div style={{ fontSize: 10 }}>12345</div>
        </div>
        <div className="border-start col-3 text-start">
          <div className="text-muted" style={{ fontSize: 10 }}>
            Country
          </div>
          <div style={{ fontSize: 10 }}>12345</div>
        </div>
        <div className="border-start col-3 text-start">
          <div className="text-muted" style={{ fontSize: 10 }}>
            Price
          </div>
          <div style={{ fontSize: 10 }}>12345</div>
        </div>
      </div>
    
    </div>

    screenshot

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search