Tips for creating a unique custom UI headline using ReactJS, CSS, and bootstrap

Looking to create a design that is responsive in ReactJS using Bootstrap or CSS if needed. I need assistance with placing separators between columns and ensuring the values of each label are aligned in the same column but on the next line. The layout should be equally spaced, left-aligning all items in each column, and should not overflow when resizing the browser window.

Check out my Sandbox Code -

https://codesandbox.io/s/runtime-sunset-2t7yyz?fontsize=14&hidenavigation=1&theme=dark

Here's the UI Design - https://i.sstatic.net/ARuOB.png

javascriptcssreactjsflexboxbootstrap-5

Answer №1

Using a combination of 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>

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

Answer №2

Take on more CSS challenges independently. Appreciate your effort.

.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>

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

Show a caution message when there has been no activity on the page for 3 minutes

I am currently developing a PHP page that includes timed tests. The maximum duration for a test is 1 hour, however the session times out after just 10 minutes of inactivity. Interestingly, when the timeout occurs, the test page does not automatically refre ...

javascriptjqueryajax

Mesh with custom lighting effects in Three.js using specific light sources

In my current scene, I have various objects, including spheres that I want to be illuminated by pink and blue lights. However, there is also a tube geometry that should only be affected by a white light, without picking up the pink and blue colors. To ill ...

javascriptthree.js3dlight

Exploring the JSON object tree through recursion using underscore and backbone

If I have a JSON object with nested arrays of unknown depths and I want to pass each array into a _.template function, how can I make that happen? Here's an example of what my JSON object might look like: $start_elements = array ( array( ...

javascriptjquerybackbone.jsunderscore.js

Challenges faced while deploying a TypeScript and React application using Express on Heroku

I encountered some errors when attempting to host my application: 2018-07-03T23:32:25.175363+00:00 heroku[web.1]: Starting process with command `npm start` 2018-07-03T23:32:28.093779+00:00 heroku[web.1]: State changed from starting to crashed 2018-07-03T2 ...

node.jsreactjsexpressherokuwebpack

MUI5 TextField remains unaffected by the RTL direction setting

I recently implemented right-to-left (RTL) support in my application using material-ui v4 and everything was working perfectly. import React from "react" import { create } from "jss" import rtl from "jss-rtl" import { StylesPr ...

reactjsmaterial-uidirection

Opacity of absolutely positioned elements

I am currently working on creating a popup box that will gray out the surrounding area. The problem I'm facing is that the opacity of the shadow div seems to be overriding that of the popup. I have tried changing the position from absolute to fixed an ...

htmlcss

Using clearfix on every div element is essential to avoid container collapsing

Would it be beneficial to include clearfix in every div element to avoid container collapse issues? Or is it more practical to apply it only to specific classes, like so? <div class="container"> Additional div elements... </div> .containe ...

htmlcss

Update Tagged Page with axios Integration in NextJs 13

In the latest version of NextJS 13, we have the option to revalidate tagged pages by using the fetch function. However, what if I want to use axios instead of fetch? Is there a way to set tags with axios? At the moment, the code for setting tags using fet ...

javascriptreactjsnext.jsnext.js13

Can someone show me how to implement RequestPromise in TypeScript?

I recently integrated the request-promise library into my TypeScript project, but I am facing some challenges in utilizing it effectively. When attempting to use it in the following manner: import {RequestPromise} from 'request-promise'; Reque ...

javascripttypescript

"pre and post" historical context

Is there a way to create a stunning "Before and After" effect using full-sized background images? It would be amazing if I could achieve this! I've been experimenting with different examples but can't seem to get the second 'reveal' di ...

javascriptjquerycss

Determining if an element corresponds to a By-object in Selenium using JavaScript

Is it possible to determine if a given WebElement matches a specific By object? The function should return either true or false. For example: foo(myWebElement, By.className("myClass myClass2")); foo(myWebElement, By.css("div")); foo(my ...

javascriptselenium-webdriver

Using AngularJS to access the properties of a header within a $http request

As I navigate through the github API's pagination documentation, I am attempting to retrieve event items and extract the Link header (as recommended) in order to construct the pagination. However, I am facing difficulty in understanding how to work wi ...

javascriptangularjspaginationhttp-headersrequest-headers

How can we refresh the React-query cache?

My app is pretty straightforward - it fetches a user and allows for changing their name. I use React query to fetch the user so I can take advantage of the cache feature, which works perfectly. However, when it comes to updating the user, I resort to a ty ...

reactjsasynchronousasync-awaitreact-query

Accessing Facebook through Login with only a button visible

I need help with checking the user's login status on Facebook. I have implemented the code provided by Facebook, but all I see is the login button. How can I determine if the user is already logged in or not? function testAPI() { console.log(&apo ...

javascriptjqueryhtmlfacebook

Tips for resolving the error: finding the right loader for handling specific file types in React hooks

data = [{ img: '01d' }, { img: '02d' }] data && data.map((item) => ( <img src={require(`./icons/${item['img']}.svg`).default} /> )) I am facing an issue with the message Error: Module parse failed: U ...

javascriptreactjstypescriptnext.js

Is it possible to iterate through div elements using .each while incorporating .append within an AJAX call?

After sending AJAX requests and receiving HTML with multiple div elements (.card), I am using .append to add new .card elements after each request, creating an infinite scroll effect. However, I am facing issues when trying to use .each to iterate over all ...

javascriptjqueryhtmlcssajax

Tips for choosing elements in jQuery that do not contain a particular element

How can I target elements in jQuery that do not contain a specific element within them? I am trying to create a sidebar that will close when the user clicks either the menu or the sidebar itself, excluding dropdown menus. Below is the structure of the menu ...

jqueryhtmlcss

Creating a dynamic anchor scrolling effect within a dropdown select menu

Having trouble achieving smooth scrolling with a select option element, only works with a link. Any suggestions? Check out the jsfiddle demo to see what I mean! $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location. ...

javascriptjqueryhtml

What is the best way to generate a random string output from an object in JavaScript?

I'm struggling with extracting a random value from the object provided below, can anyone help me out? const hellos = { English: "Hello", Japanese: "Konnichiwa", German: "Hallo", Spanish: "Hola", Arabic: "Ah ...

javascriptstringobjectmathrandom

The Javascript document refuses to load

I am currently working on a website with the main file named index.html: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Title</title> </head> ...

javascripthtmlexpresssocket.io