Merging columns in Bootstrap 4 grid system

I have been working on creating a Bootstrap grid with the following structure:

.facevalue {
  background: #ffffff61;
  font-family: Dubai;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  padding: 0 30px;
  border: 1px solid #e9e9e9;
  margin: 1px 0;
}

.faceid {
  background: #dcdcdc;
  font-family: Dubai;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  padding: 0 30px;
  border: 1px solid #e9e9e9;
  margin: 1px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row no-gutters">
  <div class="col-md-6">
    <div class="row no-gutters">
      <div class="col-md-3">
        <div class="faceid">Name</div>
      </div>
      <div class="col-md-9">
        <div class="facevalue">ABC</div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="row no-gutters">
      <div class="col-md-3">
        <div class="faceid">DOB</div>
      </div>
      <div class="col-md-9">
        <div class="facevalue">11/12/2020</div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <div class="row no-gutters">
      <div class="col-md-3">
        <div class="faceid">About Me</div>
      </div>
      <div class="col-md-9"><textarea class="facevalue w-100 p-1" type="text" id="myComment" rows="1" cols="50" value="">About me text....... </textarea>
      </div>
    </div>
  </div>
</div>

I am aiming for the columns to display similar to each row as shown in the image.

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

Is there a way to combine the first column of the second row, so that it matches the output in the provided image?

htmlcssbootstrap-4

Answer №1

.identity {
  background: #ffffff61;
  font-family: Dubai;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  padding: 0 30px;
  border: 1px solid #e9e9e9;
  margin: 1px 0;
}

.identifier {
  background: #dcdcdc;
  font-family: Dubai;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  padding: 0 30px;
  border: 1px solid #e9e9e9;
  margin: 1px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row no-gutters">
  <div class="col-sm-3">
    <div class="identifier">Name</div>
  </div>
  <div class="col-sm-3">
    <div class="identity">ABC</div>
  </div>
  <div class="col-sm-3">
    <div class="identifier">DOB</div>
  </div>
  <div class="col-sm-3">
    <div class="identity">11/12/2020</div>
  </div>
</div>
<div class="row no-gutters">
  <div class="col-sm-3">
    <div class="identifier">About Me</div>
  </div>
  <div class="col-sm-9"><textarea class="identity w-100 p-1" type="text" id="myComment" rows="1" cols="50" value="">About me text....... </textarea>
  </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

When I click on the event target, it selects the button within the span. What is the next step I should take

I have a button element that contains a span, and I want to extract the value associated with the button when it is clicked. However, if I click on the span inside the button, I am unable to retrieve the desired value because the event target points to the ...

htmlvue.jsbuttonvue-component

Anchors that need to be clicked multiple times before activating

'I recently encountered a strange bug. My CSS3 anchors/buttons, which I have been simplifying by removing properties, sometimes require multiple clicks to function. This is completely new to me and quite perplexing. The issue seems to occur randomly, ...

htmlcss

Once the image is requested in HTML, three.js makes a subsequent request for the same image

This is a block of code. let image = new THREE.TextureLoader().load("http://odf9m3avc.bkt.clouddn.com/1493817789932.jpg") <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script> <img class='preLoad&apo ...

javascripthtmlperformancethree.jsrequest

Completely enlarge this inline-block CSS div scan-line

I am looking to create a unique scan line effect that gradually reveals text from left to right, mimicking the appearance of a cathode-ray burning text into a screen's phosphors. The concept involves sliding across black rows with transparent tips. Y ...

javascriptjquerycssscanline

How do I stop Bootstrap from taking over my custom navbar design?

My website's navbar stopped working after adding Bootstrap to my HTML pages. I suspect that Bootstrap is overriding my custom CSS. Here is the code for my navbar: .navbar { overflow: hidden; !important; background-color: #333; !important; } .. ...

htmlcssbootstrap-4thymeleafnavbar

Manipulating strings within strings with JavaScript

It's been a strange discovery I made while working with JavaScript. Whenever I try to assign a two-word string to a CSS property, like setting the fontFamily property of an HTML element to "Arial Black", it ends up looking something like thi ...

javascriptcssstring

What is the best way to insert text into a span element within a for loop using JavaScript?

I am currently working on form validation using an array and a loop. In each required field, I have created empty span elements. Here is the JavaScript code that I have set up: var name = document.querySelector('#Name').value, firstLastName = ...

javascripthtmlloops

Attempting to retrieve an element by its ID from a div that was dynamically loaded using AJAX

I am having trouble retrieving the value of an element with getElementById from a div that is loaded via ajax. Let me explain: In 'example.php' I have the following JavaScript code: <script type= "text/javascript"> var page=document.getE ...

phpjavascriptjqueryhtmlajax

Having trouble with the Document.createElement function not functioning properly when trying to download a

ISSUE While my PDF download feature functions properly in Chrome, it encounters difficulty when attempting to work in IE 11/10/9. When using IE, I receive a security warning prompt. After selecting Yes to allow the download, nothing happens. SOURCE CODE ...

javascripthtmlreactjs

From Spring MVC to JSON data output

I have a JAVA EE backend and I am using Spring MVC. Currently, I have an AJAX call set up as follows: function getAllProjects() { $.getJSON("project/getall", function(allProjects) { ??? }); } In my backend system: @Reques ...

javahtmlajaxjsonspring-mvc

What is the most dependable method for referencing a CSS class through programming?

Within my Sharepoint project, I am dynamically generating controls in the overridden CreateChildControls() method. I am uncertain which approach is more preferable when it comes to referencing the .css file: protected override void CreateChildControls() { ...

htmlcsssharepoint-2010createchildcontrols

Utilizing flexbox for dynamic width adjustment with flex-grow functionality

Currently, I am in the process of configuring a menu bar using this particular template I have been attempting to achieve this layout utilizing FlexBox, but it appears that there is an issue. Here is the HTML code: <nav> <ul> < ...

htmlcssflexbox

Determine the hue of the scrollbar

My web page features a customized vertical scrollbar within a div box, and I have managed to create a horizontal scrollbar using CSS and jQuery. Now, I am looking for a way to match the color of the custom horizontal scrollbar with the rest of my design. ...

jquerycsscolorsscrollbar

Looking to switch up the background color while scrolling, any tips?

I'm trying to change the background color of my navbar section on scroll, but I've had no luck so far. Below is the code I have been using: const [colorChange, setColorChange] = useState(false); const changeColor = () => { if (window.scro ...

javascriptcssreactjsjsx

Is it required for IDs in CSS to always correspond to a single element? How should IDs be handled if the same element is repeated multiple times on

Is it possible to have a menu that is visible at both the top and bottom of an extensive HTML page using the following code: <div id="menu"><ul><li>Home</li><li>About</li></ul></div> Would it be appropriate ...

htmlcss

Retrieve the text content of a datalist option by accessing the label with jQuery

Utilizing data from a Json, I am populating a data-list in html. The options are added to the data-list with both value and label text. Upon clicking an option, I aim to insert both the value and text into a form text field. While accessing the option&apo ...

javascriptjqueryhtmljsonhtml-datalist

Manipulating jQuery Element Values

I have a set of checkboxes that I need to bind to my MVC model. To achieve this, I am trying to capture the checkbox values and store them in a hidden input field with the appropriate Id for binding to my model. @foreach (var answer in question.Answers) { ...

jqueryasp.net-mvc-3html

Issue with CSS not loading correctly when switching routes in AngularJS using Gulp and Router

I currently have a router set up in my application: var mainmodule.config(function($routeProvider){ $routeProvider.when('/home',{ templateUrl:'src/home/home.html' }; $routeProvider.when('/home/sports',{ ...

cssangularjsgulpangular-routing

Select a different radio button to overwrite the currently checked one

I am facing a situation where I have two radio buttons. The default checked state is one of them, but I want to change that and make the other one checked by default instead. Here is the HTML code: <div class="gui-radio"> <input type="radio" v ...

javascriptjqueryhtmlformsradio-button

Deleting a division with the help of media queries

As a challenge, I am attempting to eliminate the .navbar-brand>img element once the screen size exceeds 768px by using media queries. Unfortunately, my efforts have not been successful so far. Although the styling applied to the img is successfully remo ...

cssbootstrap-4media-queries