What is the best way to display label text beside each other?

I am currently utilizing bootstrap 3 to style my website. I am facing an issue where I cannot get the label text 'mycomp account number' to appear on a single line:

.lab {
  display: inline-block;
  font-weight: 10px !important;
}
<section className="serviceDetails">
  <div className="row">
    <div className="col-lg-3">
      <div className="col-lg-2">
        <img src="/pic.png" width="30px" height="60px" alt="" />
      </div>
      <div className="col-lg-9 lab">
        <label className="lab" htmlFor="accountNr">mycomp account number</label>
        <span> 1378173871237817</span>
      </div>
    </div>
  </div>
</section>

Despite using inline block, the text still wraps to the next line after "mycomp account". How can I ensure that 'mycomp account number' appears on one line?

csstwitter-bootstrapreactjs

Answer №1

Divide into two columns

<div className="col-lg-9 lab">
    <div className="col-sm-6">  
        <label className="lab" htmlFor="accountNr">My Company Account Number</label>
    </div>
    <div className="col-sm-6">
        <span>1378173871237817</span>
    </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

Achieve full height Bootstrap styling by nesting it inside a row div

Is there a way to make the height of the left sidebar div equal to 100% within a row, based on the height of the right content? I have tried setting the height to 100%, but it doesn't seem to work. Any advice would be appreciated. <body> < ...

htmlcsstwitter-bootstrap

Require this form to be centered flawlessly

<form class="form-horizontal" role="form" id="contactf" action="http://titan.csit.rmit.edu.au/~e54061/wp/form-tester.php" method="post"> <div class="form-group"> <label class="control-label col-sm-2 lb" for="email">Email : </ ...

htmlcsstwitter-bootstrap

I found myself continuously revolving four images along a circular border, each time revealing the corresponding content. However, I only required the content from one of the images at a time

I attempted to animate the rotation of a circle and display the content of a specific image by pausing it for a period of time. However, I am unsure how to halt the animation and display the content of the specified image. Here's what I tried: HTML C ...

htmlcsssassbootstrap-5

Are there any other potential factors that could lead to CSS files not being located within a Django project?

Apologies for asking the same question repeatedly. Despite trying for several days, I am unable to figure out where I went wrong. Can anyone provide guidance on my issue? I attempted to create a library program using Django. Below is the directory structu ...

pythoncssdjango

100% Footer Visibility on iPad

Seeking assistance as I am facing an issue with my Joomla website. The footer width is not extending to 100% on an iPad, it seems stuck at the footer content limit. Can anyone help me by providing the correct CSS code? The website in question is: www.webk ...

cssipadfooter

Body becomes overwhelmed by the presence of white space when margins are reduced to zero

I am puzzled by this issue because I have checked the developer tools and can't find anything causing the body to extend beyond the white space. The only thing that appears over the whitespace is when I hover my mouse over the HTML in the source code ...

htmlcsswhitespacegutter

The div is unable to keep up with the quickly changing colors

I am facing an issue with the color changing too frequently on mouse move. I want it to be delayed and smooth, but the current code is not working as expected. I tried adding delay(), but it doesn't seem to be effective. I need help understanding wh ...

javascriptjqueryhtmlcss

Using states repeatedly in redux-toolkit

Currently, I am utilizing Redux-ToolKit to construct an application that retrieves data from an API. Within my Redux store, I have multiple slices and I am seeking a way to access the search state of the searchSlice within the bookingSlice. However, I have ...

reactjsreduxreact-reduxredux-toolkit

Iterating through elements with JavaScript and dynamically replacing them in the HTML code

I'm struggling with the code I found on CodePen and need some help with it since I'm not very good with JS. How can I prevent the items from repeating endlessly? Currently, they scroll indefinitely with 20 items per 'page' before the ...

javascriptjqueryhtmlcss

Is there a way to retrieve both the items within a specific category and its corresponding subcategories simultaneously?

Presently, I am managing two models for Category and subcategory. The category model provides an array of data as shown below: category = [ {_id: '1', name: 'Appliances', slug: 'appliances'}, {_id: '2', na ...

javascriptreactjsredux

What role does the single colon play in the setState function when dealing with Arrays?

Adhering to the correct standards of maintaining immutability for this.state const name = this.refs.name.value; const updatedNames = [ ...this.state.names, name ]; //add new name to names array, and finally this.setState({ names: updatedNames }); I am ...

arraysreactjs

An issue arises with Express, React, and Heroku when a file cannot be located

I'm facing an issue while trying to deploy my app on Heroku. Everything works fine in development, but once I push it to Heroku, the server can't find the images. The API requests return JSON correctly, the routes are working, but the images are ...

node.jsreactjsexpressheroku

What is the best way to spin a paragraph in Bootstrap?

I've been attempting to rotate this div by 90 degrees, but for some reason, it refuses to cooperate. I've tried using various bootstrap classes with no success, and even plain CSS doesn't seem to have any effect on it. #socials { transf ...

htmlcssbootstrap-4

How can you pass an authorization token in a Next.js post request when using Django REST framework?

Is there a way to successfully pass a Django authorization token in Next.js using Axios? I attempted this method, but encountered a 404 error. let token = "Token 8736be9dba6ccb11208a536f3531bccc686cf88d" await axios.post(url,{ headers ...

javascriptreactjsdjangonext.jsfetch-api

Creating a Horizontal Scrollbar in HTML

Recently, I came across a family treeview design like the one showcased here. However, the layout seems to fall apart when there are numerous children and doesn't fit on the screen properly. Is there a way to implement a horizontal scrollbar to addres ...

htmlcssscroll

How to Retrieve the Default Value in a React Hook?

I have a certain input field with a default value assigned to it. <input type="text" name="default" value="one" /> To handle the state of this input, I am utilizing a react hook. const [def, setdef] = useState({Defaul ...

reactjsinputreact-hooks

Identifying a change in the source location of an iframe element

I am working with an iframe object that is currently set to a specific page's URL. Here is an example: <iframe src="http://en.wikipedia.org/wiki/Special:Random"></iframe> My goal is to display an alert whenever the location of the iframe ...

javascripthtmlcss

live-server does not store JavaScript code in cache when using the live server

My current project is built on React.js/Babel.js. Despite having no errors in my code, the live server does not respond to JavaScript changes. Strangely, modifications made to the HTML file reflect without any issues. However, altering the JavaScript file ...

reactjsbabeljsbrowser-cacheliveservernpm-live-server

The functionality of useState is not compatible with Material-UI

I am currently working with an array of objects that I need to filter in order to display specific data based on user selection using material ui. The problem I am facing is that the filtering works perfectly during the first select, showing me the desired ...

reactjsmaterial-uiuse-state

The array is arranged properly, yet React is failing to render it in the correct order

Here's the code snippet I am working with: { this.state.rows.map((qc) => qc.BinsByDayByOrchardsQCs.map((qc2) => qc2.BinsByDayByOrchardsQCsDefects.map((qc3) => !defectsArray.includes(qc3.Defect) &am ...

javascriptarraysreactjssorting