Bootstrap offers an improved method for arranging elements in columns and rows, especially when you need to omit certain ones

Is there a more efficient method for aligning elements using Bootstrap?

Here is my current approach:

                <div className="row">
                    <div className="col-3 font-weight-bold">
                        Item Name
                    </div>
                    <div className="col-3 font-weight-bold">
                        # of Item
                    </div>
                    <div className="col-3 font-weight-bold">
                        Total
                    </div>
                </div>
                <div className="row">
                    <div className="col-3 font-weight-bold">
                        Total Cost
                    </div>
                    <div className="col-3 font-weight-bold">
                    </div>
                    <div className="col-3 font-weight-bold">
                        ${this.state.total.toLocaleString()}
                    </div>
                </div>

For the second set of elements in my row, I created an empty div with the class col-3 font-weight-bold. This was done to ensure that my Total Cost and 

${this.state.total.toLocaleString()}
align properly with Item Name and Total.

While this practice works for my personal project, I'm concerned that it may not meet the standards for a professional code review. Are there better techniques available for aligning columns when skipping certain ones?

javascriptcssreactjsbootstrap-4react-bootstrap

Answer №1

To create space between columns, you can utilize the offset feature.

To modify the layout of your second row, remove the empty div and apply an offset to the last column:

<div className="row">
  <div className="col-3 font-weight-bold">
    Total Cost
  </div>
  <div className="col-3 offset-3 font-weight-bold">
    ${this.state.total.toLocaleString()}
  </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

If the span id includes PHP data that contains a certain phrase

Hey there, it's my first time posting and I'm in a bit of a bind with this script... Let me give you some background information first I am trying to create a click function for a register button that will check the span id (e.g. $("#username_r ...

javascriptphpjqueryhtml

Steps for including an animation class in a div

Is it possible to add the sweep to top blue color animation to the red box using a set-timeout function instead of hover? I tried using the following code but it doesn't seem to be working. Can you help me troubleshoot? setTimeout(function() { $( ...

javascriptjquerycss

Using AngularJS directives in Markdown

I am currently working on creating a custom HTML directive using AngularJS that will allow me to display Markdown content in the browser. My goal is to have a <markdown> element with a src attribute that will dynamically load and render the specified ...

javascripthtmlangularjsmarkdown

Determine the position of a nested object within a multidimensional array using JavaScript/TypeScript

My objective is to obtain the complete index of a complex object within a multidimensional array. For example, consider the following array: var arr = [ { name: "zero", children: null }, { name: "one", children: [ { ...

javascripttypescript

Is it possible to alter the HTML structure using JavaScript?

Looking to shift the positions of 2 divs using JavaScript DOM manipulation, all without altering the HTML. <div class="div1"> this should move downwards</div> <div class="div2"> while this should move upwards</div&g ...

javascripthtmldom

Currently, my focus is on creating a robust slash command handler for discord.js version 13

I've been attempting to update my command handler to support slash commands, but I keep encountering an Invalid Form Body error when trying to activate the bot. I'm hesitant to switch handlers since I use this one for all my bots, but I can&apos ...

javascriptnode.jsdiscorddiscord.js

Tips for creating brief animations

I am currently working with a moving div in JavaScript that continues to move for a period of time after the key is released. I am looking for a way to immediately stop the animation upon releasing the key. The animation is controlled by a switch statemen ...

javascript

What is the best way to resolve the CSS border styling issue surrounding the anchor element?

I created a simple sign-up form for my school project where users can choose their roles. I'm facing an issue with the border under the anchor tag and I need help fixing it. How can I ensure that the space at the top is equal to the bottom as well? T ...

htmlcss

Generating fresh objects to establish a Many-to-Many connection with Sequelize

I am currently utilizing NodeJS, Express, Sequelize, and PostgreSQL in my project. Within my application, I have defined two models: a "User" model and a "Social" model. My goal is to establish a many-to-many relationship where a user can be associated wi ...

javascriptnode.jspostgresqlexpresssequelize.js

Select a picture at random from a directory

As a student embarking on an art project, I am in the process of selecting one out of 500 images to display on a webpage. My coding knowledge is quite limited, primarily focused on HTML and CSS, with only a basic understanding of JavaScript. I am encounter ...

javascripthtmlarraysundefined

Issue with modal input causing directive template to not render

I am working on an angular-bootstrap modal where I created a custom directive to automatically focus on the input field when opened. However, after adding the directive template to my input tag, I couldn't see it when inspecting the element. Here is t ...

javascriptangularjsangularjs-directivebootstrap-modalangular-bootstrap

Preventing Repeated Clicks in AngularJS

Looking for a better approach to handle double clicks in AngularJS other than using ng-disabled. I have a solution to disable double/multi-click functionality on button click and re-enable it after completing an ajax process. Any suggestions? When our cod ...

javascriptajaxangularjs

Syntax for the expression used in the ng-click directive

I have two variables named wkidx and dyidx. My goal is to create multiple collapsible elements on the same page using the angular ui bootstrap directive. I am currently facing an issue with the following code snippet: <a href="" class="" ...

javascriptjsonangularjs

React unit tests experiencing issues with MSW integration

After creating a basic React application, I decided to configure MSW based on the instructions provided in order to set it up for unit tests in both node environment and browser. The main component of the app utilizes a custom hook called useFormSubmission ...

javascriptreactjsjestjsmsw

The attempt to update several partial views using Jquery, MVC, and Json is currently malfunctioning

I am facing issues with updating multiple partial views using jQuery, MVC, and JSON. The partial views on my page are not getting updated. Below is the code for my view: Here is the code for my controller: public class GetStudentsController : Controlle ...

javascriptjqueryjsonasp.net-mvc-4

Transferring data between two "Data" elements using Jquery Datatable

Utilizing the JQuery datatable, I have made the first column of my table clickable, which is labeled as RequestNo. Here's the code snippet: "ajax": { "url": "/Request/Search/LoadData", "type": "POST", "datatype": "j ...

javascriptjquerydatatabledatatables

Changing the text field label color with React and Material-UI when it's in focus

https://i.stack.imgur.com/xpIAs.png My goal is to make the text "First Name" appear in red color. To achieve this, I used the following code snippet: <TextField id="outlined-basic" label="First name" variant="outlined" ...

reactjsmaterial-ui

Include the selected class in the relative URL

I am attempting to apply a highlight class to my selected category: My code looks like this : <div id="category"> <ul> <a href="category.php?c=electronic"> <li>Electronic</li> </a> ...

javascriptphpjquery

Is there a way to smoothly incorporate a new animation into a page, while ensuring that existing elements adjust to make room for it?

I am looking to smoothly fade and move a hidden element (display:none) within the page, shifting other elements to animate into their new positions as necessary. When I reveal the hidden element by changing it to "display:initial," it should seamlessly a ...

htmlcss

Challenges with implementing @Html.EditorForModel

Currently, I am developing a web application using asp.net's mvc-5 framework. In this project, I have implemented the following model class: public class Details4 { [HiddenInput(DisplayValue=false)] public string RESOURCENAME { se ...

cssasp.netrazorhtml-helperasp.net-mvc-5