diff --git a/web/src/settings_bots.js b/web/src/settings_bots.js
index a314ba9ac1..9b012f3a2f 100644
--- a/web/src/settings_bots.js
+++ b/web/src/settings_bots.js
@@ -397,19 +397,19 @@ export function set_up() {
         user_deactivation_ui.confirm_reactivation(user_id, handle_confirm, true);
     });
 
-    $("#active_bots_list").on("click", "button.regenerate_bot_api_key", (e) => {
+    $("#active_bots_list").on("click", "button.bot-card-regenerate-bot-api-key", (e) => {
         const bot_id = Number.parseInt($(e.currentTarget).attr("data-user-id"), 10);
         channel.post({
             url: "/json/bots/" + encodeURIComponent(bot_id) + "/api_key/regenerate",
             success(data) {
                 const $row = $(e.currentTarget).closest("li");
-                $row.find(".api_key").find(".value").text(data.api_key);
-                $row.find("api_key_error").hide();
+                $row.find(".bot-card-api-key").find(".value").text(data.api_key);
+                $row.find(".bot-card-api-key-error").hide();
             },
             error(xhr) {
                 if (xhr.responseJSON?.msg) {
                     const $row = $(e.currentTarget).closest("li");
-                    $row.find(".api_key_error").text(xhr.responseJSON.msg).show();
+                    $row.find(".bot-card-api-key-error").text(xhr.responseJSON.msg).show();
                 }
             },
         });
@@ -419,13 +419,13 @@ export function set_up() {
         e.preventDefault();
         e.stopPropagation();
         const $li = $(e.currentTarget).closest("li");
-        const bot_id = Number.parseInt($li.find(".bot_info").attr("data-user-id"), 10);
+        const bot_id = Number.parseInt($li.find(".bot-card-info").attr("data-user-id"), 10);
         const bot = people.get_by_user_id(bot_id);
         user_profile.show_user_profile(bot, "manage-profile-tab");
     });
 
     $("#active_bots_list").on("click", "a.download_bot_zuliprc", function () {
-        const $bot_info = $(this).closest(".bot-information-box").find(".bot_info");
+        const $bot_info = $(this).closest(".bot-information-box").find(".bot-card-info");
         const bot_id = Number.parseInt($bot_info.attr("data-user-id"), 10);
         $(this).attr("href", generate_zuliprc_url(bot_id));
     });
@@ -447,7 +447,7 @@ export function set_up() {
 
     const clipboard = new ClipboardJS("#copy_zuliprc", {
         text(trigger) {
-            const $bot_info = $(trigger).closest(".bot-information-box").find(".bot_info");
+            const $bot_info = $(trigger).closest(".bot-information-box").find(".bot-card-info");
             const bot_id = Number.parseInt($bot_info.attr("data-user-id"), 10);
             const bot = bot_data.get(bot_id);
             const data = generate_zuliprc_content(bot);
diff --git a/web/styles/settings.css b/web/styles/settings.css
index 8e819a5f09..0db2efe0dd 100644
--- a/web/styles/settings.css
+++ b/web/styles/settings.css
@@ -848,11 +848,11 @@ input[type="checkbox"] {
     list-style-type: none;
     margin-left: 0;
 
-    .image {
+    .bot-card-image {
         vertical-align: top;
     }
 
-    .name {
+    .bot-card-name {
         font-weight: 600;
         font-size: 1.1rem;
         margin: 7px 5px;
@@ -863,7 +863,7 @@ input[type="checkbox"] {
         white-space: pre;
     }
 
-    .regenerate_bot_api_key {
+    .bot-card-regenerate-bot-api-key {
         position: relative;
         margin-left: 5px;
         color: hsl(0deg 0% 67%);
@@ -930,13 +930,13 @@ input[type="checkbox"] {
 
         overflow: auto;
 
-        .details {
+        .bot-card-details {
             display: inline-block;
             width: calc(100% - 75px);
         }
     }
 
-    & img.avatar {
+    & img.bot-card-avatar {
         margin: 10px 5px 0 10px;
         height: 50px;
         width: 50px;
@@ -945,13 +945,13 @@ input[type="checkbox"] {
         box-shadow: 0 0 4px hsl(0deg 0% 0% / 10%);
     }
 
-    .email,
-    .type {
+    .bot-card-email,
+    .bot-card-type {
         margin-bottom: 5px;
     }
 
-    .email .value,
-    .api_key .api-key-value-and-button {
+    .bot-card-email .bot-card-value,
+    .bot-card-api-key .bot-card-api-key-value-and-button {
         display: block;
         margin-left: 0;
         word-wrap: break-word;
@@ -959,17 +959,17 @@ input[type="checkbox"] {
         white-space: normal;
     }
 
-    .api_key .api-key-value-and-button {
+    .bot-card-api-key .bot-card-api-key-value-and-button {
         font-family: "Source Code Pro", monospace;
         font-size: 0.85em;
         display: flex;
     }
 
-    .bot_info {
+    .bot-card-info {
         padding: 10px;
     }
 
-    .field {
+    .bot-card-field {
         text-transform: uppercase;
         font-weight: 600;
         color: hsl(0deg 0% 67%);
diff --git a/web/templates/settings/bot_avatar_row.hbs b/web/templates/settings/bot_avatar_row.hbs
index d6e84abf2d..7d55c2897a 100644
--- a/web/templates/settings/bot_avatar_row.hbs
+++ b/web/templates/settings/bot_avatar_row.hbs
@@ -1,8 +1,8 @@
 <li class="bot-information-box white-box">
-    <div class="image overflow-hidden">
-        <img src="{{avatar_url}}" class="avatar" />
-        <div class="details">
-            <div class="name">{{name}}</div>
+    <div class="bot-card-image overflow-hidden">
+        <img src="{{avatar_url}}" class="bot-card-avatar" />
+        <div class="bot-card-details">
+            <div class="bot-card-name">{{name}}</div>
             {{#if is_active}}
             <div class="edit-bot-buttons">
                 <button type="submit" class="btn open_edit_bot_form tippy-zulip-delayed-tooltip" data-sidebar-form="edit-bot" data-tippy-content="{{t 'Edit bot' }}" data-email="{{email}}">
@@ -29,26 +29,26 @@
             {{/if}}
         </div>
     </div>
-    <div class="bot_info" data-user-id="{{user_id}}">
-        <div class="type">
-            <div class="field">{{t "Bot type" }}</div>
-            <div class="value">{{type}}</div>
+    <div class="bot-card-info" data-user-id="{{user_id}}">
+        <div class="bot-card-type">
+            <div class="bot-card-field">{{t "Bot type" }}</div>
+            <div class="bot-card-value">{{type}}</div>
         </div>
-        <div class="email">
-            <div class="field">{{t "Bot email" }}</div>
-            <div class="value">{{email}}</div>
+        <div class="bot-card-email">
+            <div class="bot-card-field">{{t "Bot email" }}</div>
+            <div class="bot-card-value">{{email}}</div>
         </div>
         {{#if is_active}}
-        <div class="api_key">
-            <span class="field">{{t "API key" }}</span>
-            <div class="api-key-value-and-button no-select">
+        <div class="bot-card-api-key">
+            <span class="bot-card-field">{{t "API key" }}</span>
+            <div class="bot-card-api-key-value-and-button no-select">
                 <!-- have the `.text-select` in `.no-select` so that the value doesn't have trailing whitespace. -->
-                <span class="value text-select">{{api_key}}</span>
-                <button type="submit" class="button no-style btn-secondary regenerate_bot_api_key tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Generate new API key' }}" data-user-id="{{user_id}}">
+                <span class="bot-card-value text-select">{{api_key}}</span>
+                <button type="submit" class="button no-style btn-secondary bot-card-regenerate-bot-api-key tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Generate new API key' }}" data-user-id="{{user_id}}">
                     <i class="fa fa-refresh" aria-hidden="true"></i>
                 </button>
             </div>
-            <div class="api_key_error text-error"></div>
+            <div class="bot-card-api-key-error text-error"></div>
         </div>
         {{else}}
         <button class="button round btn-warning reactivate_bot" data-user-id="{{user_id}}">{{t "Reactivate bot" }}</button>