Trying to apply css to a responsive grid

WEB WEB Feature Requests
1

From chatGpt amongst other versions( I am still learning) I have the following :

procedure TForm1.UpdateGridUsers(const AResponse: string; const FilterIndexStr: string);
var
  LJsonValue: TJSONValue;
  LJsonArr: TJSONArray;
  LUserObj: TJSONObject;
  FilterIndex: Integer;
  Name, Email, OrgName, Telephone: string;
  NewItem: TResponsiveGridItem;
begin
  // (Optional debug)
  ShowMessage('UpdateGridUsers called with index: ' + FilterIndexStr);

  // Clear existing grid items
  rGridCompanyDetails.Items.Clear;

  // Validate and convert the filter index
  FilterIndex := StrToIntDef(FilterIndexStr, -1);
  if FilterIndex < 0 then
  begin
    ShowMessage('Invalid filter index: ' + FilterIndexStr);
    Exit;
  end;

  // Parse the JSON response
  LJsonValue := TJSONObject.ParseJSONValue(AResponse);
  if not Assigned(LJsonValue) then
  begin
    ShowMessage('No JSON parsed.');
    Exit;
  end;
  if not (LJsonValue is TJSONArray) then
  begin
    LJsonValue.Free;
    ShowMessage('JSON is not an array.');
    Exit;
  end;
  LJsonArr := TJSONArray(LJsonValue);

  // (Optional debug) Show the JSON array content
  // ShowMessage('JSON Array: ' + LJsonArr.ToString);

  try
    if FilterIndex < LJsonArr.Count then
    begin
      LUserObj := LJsonArr.Items[FilterIndex] as TJSONObject;

      // Build the display values using the SafeValue helper
      Name      := SafeValue(LUserObj.GetValue('client_name')) + ' ' +
                   SafeValue(LUserObj.GetValue('client_surname'));
      Email     := SafeValue(LUserObj.GetValue('client_email'));
      OrgName   := SafeValue(LUserObj.GetValue('client_org_name'));
      Telephone := SafeValue(LUserObj.GetValue('client_telephone_number'));

      // Create a new grid item manually with an enhanced layout
      NewItem := rGridCompanyDetails.Items.Add;
      NewItem.HTML := Format(
        '<div class="company-card" style="border: 1px solid #dee2e6; padding: 20px; margin-bottom: 20px; border-radius: 8px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">' +
        '  <h3 style="margin-top:0; color:#1a4789;">User Details</h3>' +
        '  <div class="company-field" style="margin-bottom: 15px;">' +
        '    <label style="display:block; font-weight:bold; margin-bottom:5px;">Name</label>' +
        '    <input type="text" class="company-input" value="%s" style="width:100%%; padding:8px; border:1px solid #dee2e6; border-radius:4px;"/>' +
        '  </div>' +
        '  <div class="company-field" style="margin-bottom: 15px;">' +
        '    <label style="display:block; font-weight:bold; margin-bottom:5px;">Organization</label>' +
        '    <input type="text" class="company-input" value="%s" style="width:100%%; padding:8px; border:1px solid #dee2e6; border-radius:4px;"/>' +
        '  </div>' +
        '  <div class="company-field" style="margin-bottom: 15px;">' +
        '    <label style="display:block; font-weight:bold; margin-bottom:5px;">Email</label>' +
        '    <input type="text" class="company-input" value="%s" style="width:100%%; padding:8px; border:1px solid #dee2e6; border-radius:4px;"/>' +
        '  </div>' +
        '  <div class="company-field" style="margin-bottom: 15px;">' +
        '    <label style="display:block; font-weight:bold; margin-bottom:5px;">Telephone</label>' +
        '    <input type="text" class="company-input" value="%s" style="width:100%%; padding:8px; border:1px solid #dee2e6; border-radius:4px;"/>' +
        '  </div>' +
        '</div>',
        [Name, OrgName, Email, Telephone]
      );
    end
    else
      ShowMessage('Filter index out of range. Array count: ' + IntToStr(LJsonArr.Count));
  finally
    LJsonArr.Free;
  end;
end;

However I see the data but there is no CSS applied and it looks awful.

How do I achieve this ?

2

With just this code snippet it is hard to tell.
How does it look like? Did you inspect in the browser console if the HTML/CSS is all properly rendered? Is the bootstrap library propely loaded? Any other errors in the browser console?