The alignment of Bootstrap text is not in alignment

Hi there, I am pretty new to bootstrap and have been hunting for a solution regarding this specific layout that I want to achieve. Check out the image below:

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

The issue I am facing is that in my code, the name, code, status, and contact person are not aligning together as desired. Below is a snippet of the problem: https://i.sstatic.net/tCfrg.png

Furthermore, here is the snippet of the actual code:

<div class = "col-md-12 border " style ="padding:0px;margin:0px;">
   %{--                    Customer information--}%
   <div class="container-fluid well span6 ">
      <div class="row-fluid ">
         <div class="span8">
            <div class = "row">
               <div class = "col-md-6">
               </div>
               <div class = "col-md-6">
                  <div class = "row">
                     <div class = "col-md-6">
                        <g:if test="${cus.status =='Inactive'}">
                           <g:form class="activateStatus" controller="customer" action="activateStatus" id = "${cus.id}">
                              <button type="button" class="btn btn-success activate-Status" style ="color:white;font-weight: bold">Activate</button>
                           </g:form>
                        </g:if>
                        <g:if test="${cus.status =='Active'}">
                           <g:form class="changeStatus" controller="customer" action="changeStatus" id = "${cus.id}">
                              <button type="button" class="btn btn-danger change-Status" style ="color:white;font-weight: bold">Deactivate</button>
                           </g:form>
                        </g:if>
                     </div>
                     <div class = "col-md-3">
                        <g:link action="index" controller="customer"><button id = "back" type="button" class="btn btn-primary" style = "font-weight: bold">Back</button></g:link>
                     </div>
                     <div class = "col-md-3">
                        <g:link action="editCustomer" id="${cus.id}"><button id = "edit" type="button" class="btn" style = " font-weight: bold;color: white;background-color:#1f549c"><i id = "add-icon" class="fa fa-edit" aria-hidden="true"></i>Edit</button></g:link>
                     </div>
                  </div>
               </div>
            </div>
            <div class = "row">
               <div class = "col-md-12">
                  <h4 style = "text-align: center;font-weight: bold">Name : ${cus.name}</h4>
                  <h4 style = "text-align: center;font-weight: bold">Code: ${cus.code}</h4>
                  <h4 style = "text-align: center;font-weight: bold">Contact Person: ${cus.contactPerson}</h4>
                  <h4 style = "text-align: center;font-weight: bold">Status: ${cus.status}</h4>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Answer №1

Ensure your final row div follows this format:

<div class = "row">
                        <div class = "col-md-12">
                            <div class="row">
                                <div class="col-4 col-sm-2">
                                    <h4 class="text-left font-weight-bold">Name</h4>
                                </div>
                                <div class="col-2 col-sm-1">
                                    <h4 class="text-left font-weight-bold">:</h4>
                                </div>
                                <div class="col-4 col-sm-2">
                                    <h4 class="text-left font-weight-bold">${cus.name}</h4>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-4 col-sm-2">
                                    <h4 class="text-left font-weight-bold">Code</h4>
                                </div>
                                <div class="col-2 col-sm-1">
                                    <h4 class="text-left font-weight-bold">:</h4>
                                </div>
                                <div class="col-4 col-sm-2">
                                    <h4 class="text-left font-weight-bold">${cus.code}</h4>
                                </div>    
                            </div>
                            <div class="row">
                                <div class="col-4 col-sm-2">
                                    <h4 class="text-left font-weight-bold">Contact Person</h4>
                                </div>
                                <div class="col-2 col-sm-1">
                                    <h4 class="text-left font-weight-bold">:</h4>
                                </div>
                                <div class="col-4 col-sm-2">
                                    <h4 class="text-left font-weight-bold">${cus.contactPerson}</h4>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-4 col-sm-2">
                                    <h4 class="text-left font-weight-bold">Status</h4>
                                </div>
                                <div class="col-2 col-sm-1">
                                    <h4 class="text-left font-weight-bold">:</h4>
                                </div>
                                <div class="col-4 col-sm-2">
                                    <h4 class="text-left font-weight-bold">${cus.status}</h4>
                                </div>
                            </div>
                        </div>
                     </div>

The updated appearance can be viewed here: https://i.sstatic.net/FrFIm.png

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

The content's div is not extending completely in the horizontal direction

Just starting out with tailwind CSS and struggling a bit with the design aspect due to my lack of CSS skills. Need some assistance troubleshooting my layout, particularly in making sure the div container stretches to fit the screen size properly. https:// ...

Instructions for applying a border style to a dynamically generated table using jQuery

I'm currently working on adding CSS to a table that is generated dynamically when a button is clicked. The function that is triggered on the click event includes the following jQuery code to create the dynamic rows: $("#employeDetail").append('& ...

Navigating Dynamically between tabs - A How-to Guide

I am working on a mat-tab Angular app where I need to dynamically generate links and transfer them to a navLinks object. Despite ensuring that the concatenation is correct, it seems like my approach is not working as expected. Here's a glimpse of what ...

Expanding canvas due to the utilization of column-count

I am currently working with chart.js and have a setup that includes two pie charts and a bar chart that I would like to display in a single row. In order to achieve this layout where the bar chart is larger than the pie charts, I implemented the following ...

Side by side CSS list item with before element

Currently, I am working on displaying a list of 3 items where the list item number is larger than the actual text. I have been successful in achieving this part, but now my goal is to place them side by side. This is the code snippet I have implemented: ...

jQuery UI smooths out the transitions, making the effect more gradual and fluid

Is there a way to make my toggle sidebar scroll smoothly using jQuery UI? Currently, it has a jerky behavior and I would like it to have a smoother left/right effect. I want the outer shell to slide smoothly just like the inner container does, instead of ...

Implementing conditional ng-show based on checkbox status in AngularJS

I have created this code to filter out the out-of-stock products using ng-show. When the checkbox is checked, only the available products should be displayed. HTML: <input type="checkbox" id="chkStock" value="Exclude Out of Stock" ng-model="exclude" / ...

What is preventing me from modifying the icon on a dropdown menu?

I've been struggling to change my dropdown icon from the default "carrot" to a Fontawesome one. Despite researching other questions, I still can't find a solution that works for me. <form> <div class="form-group"> <select disab ...

Issue with ng2 pdf-viewer: Text becomes less visible as you zoom in

This custom implementation includes a zoom-in and zoom-out feature. When clicking on zoom in, the value of [zoom] increases by 0.25, and when clicking zoom out, the value decreases by 0.25. The PDF container div has a width of col-md-6 and a maximum heigh ...

How to Style CSS specifically for Internet Explorer?

I'm dealing with a simple div that has a 2px thick border and absolute positioning, but it's hidden until its parent element is hovered over. The issue arises in IE due to the box model, causing the position of this div to be somewhat off in IE c ...

Utilizing the scrollTop method to display the number of pixels scrolled on

My goal is to show the number of pixels a user has scrolled on my website using the scrollTop method in jQuery. I want this number of pixels to be displayed within a 'pixels' class. Therefore, I plan to have <p><span class="pixels"> ...

Saving the subtracted value from a span into a cookie until the checkbox is unchecked - here's how to

I am working on a piece of code that includes numeric values within a span. When the checkbox is clicked, it subtracts 1 from the main value, essentially reducing the total value. How can I achieve this so that even after the form is submitted, the deducte ...

Having trouble with Jquery CSS transform not functioning properly in Internet Explorer 8?

When it comes to utilizing CSS3 features that are not supported by older browsers such as IE8, I tend to apply them using jQuery instead. However, I have noticed that the CSS transform in jQuery does not work... Here is my code: http://codepen.io/vincentc ...

In ReactJS, ensure only a single div is active at any given moment

I'm working on a layout with three divs in each row, and there are multiple rows. Only one div can be selected at a time within a row, and selecting a new div will automatically unselect the previously selected one. Here is a simplified version of my ...

How can I make Firefox render the padding in a textarea the identical way as in a div?

In my efforts to ensure a consistent line width inside a textarea across IE8, Firefox, and Safari, I have encountered an issue where Firefox seems to add an extra pixel of padding compared to the other browsers. This results in text wrapping differently an ...

Repair the navigation bar once it reaches the top of the screen using ReactJS

I have a webpage that contains specific content followed by a bar with tabs. My goal is to have this bar stay fixed at the top of the screen once it reaches that position while scrolling down, and only allow the content below the fixed bar to continue scro ...

Most left-aligned icon on the left, most right-aligned icon on the right, and evenly spaced icons in between

Imagine a scenario where you are presented with a questionnaire that allows you to respond using a slider (HTML range element). Below the div containing the range selector (slider), I have arranged icons that need spacing. The icon on the far left should ...

Tips for disabling viewport resizer while accessing the Console panel in Chrome using Control+Shift+J

Currently, I am utilizing the viewport resizer in Chrome to preview how my code appears on various devices. However, I have encountered an issue - whenever I try to access the console using ctrl + shift + j, the viewport resizer opens instead. You can obs ...

Is there a way to dynamically update one input field while another input field is being modified? [HTML / JS]

I have a form with 3 input fields. One of the inputs is disabled, while the other two are enabled. The goal is to combine the values entered in the enabled fields to populate the disabled field. How can this be achieved? Is it possible for the value in th ...

A JavaScript code snippet that stores the total number of bytes read from a CSV file in a variable

I currently have a CSV file located on a web server that is regularly updated with numeric and string data of varying lengths. I am seeking a solution to calculate the total byte values of each row when reading the file, as the byte count is crucial due ...