Bootstrap's Well Size Has Been Set into Place

Is there a way to keep the size of a text display container fixed while still making it responsive when cycling through different lengths of text with a button click?

        <div class ="col-md-6">
            <p id="quote">Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him. </p><button type="button" class="btn btn-success btn-lg" onclick = "cycle()">&gt</button>                
        </div>

function cycle() {
var randomNumber = Math.floor(Math.random() * (testimonials.length))
document.getElementById('quote').innerHTML = textimonals[randomNumber];
}
var testimonials = ["ex.", "ex.", "ex."]
javascriptloopsgrid-layout

Answer №1

You should consider using the CSS property min-height to ensure that your content stays at a minimum height while remaining responsive.

function cycle() {
   var randomNumber = Math.floor(Math.random() *    (testimonials.length))
   document.getElementById('quote').innerHTML = testimonials[randomNumber];
}

var testimonials = ["ex.", "ex.", "ex.", "Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for myself, family members, and friends I have referred. I just purchased my 4th car from him."];
#quote {
  min-height: 50px;
}
<div class ="col-md-6">
            <p id="quote">Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for myself, family members, and friends I have referred. I just purchased my 4th car from him. </p><button type="button" class="btn btn-success btn-lg" onclick = "cycle()">&gt</button>                
</div>

Answer №2

Definitely! Simply establish a suitable height that will encompass all the reviews.

#testimonials{
    height: 500px;
}

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

Experiencing difficulty incorporating JSON and JS into jQueryhandleRequestJSON and JS integration with jQuery

I'm having trouble fetching the 'sigla' field from a JSON file and inserting it into an HTML 'option object'. I could use some assistance with this issue, so if anyone out there can lend a hand, it would be much appreciated! Here ...

javascriptjqueryjsonajax

Encountering a CORS-like error causes issues for Swagger

Unable to retrieve data from the server. The access-control-origin settings may not be configured correctly. I have encountered this issue in the past, but it is crucial for me to get Swagger UI working properly this time. The JSON file I am attempting to ...

javascriptjavaxmlhttprequestcorsswagger

Sort a JSON array alphabetically in Angular.js even when there are no key/value pairs specified

I'm having trouble alphabetizing a list using a JSON array in my code. Despite my efforts, the sorting doesn't seem to be working correctly. You can view my current code by following this link to the jsfiddle http://jsfiddle.net/hxxLaxL3/ Here i ...

javascriptangularjs

NextJS - The server attempted to execute the find() function, which is only available on the client side

When attempting to utilize the .find method within the server component, I encounter an error. export async function TransactionList() { const transactions = await fetch('/transactions'); return ( <ul> {transactions.m ...

javascriptreactjstypescriptnext.js

Enhance your Highmap R or JavaScript visualization with a unique custom legend feature

Provided below is my code snippet, output$map <- renderHighchart({ region_map = hcmap("countries/nz/nz-all") highchart(type = "map") %>% hc_title(text = "Average") %>% hc_add_series_map(map = region_map, df = data1, joinBy = " ...

javascriptrhighchartshighmapsr-highcharter

Struggling with filtering an array fetched from an API using VueJS

Currently, I am working on a Nativescript-Vue app and facing some challenges that I need help with. The Scenario I have data coming in from an API. Here is the structure of the data I receive: { "count": 9, "results": [ { "id": 1, "c ...

javascriptvue.jsvuejs2nativescriptnativescript-vue

Django Ajax filter displaying issue on HTML page

I'm uncertain about the correctness of my Ajax implementation. When using Django's built-in tags, the objects I pass through Ajax are not appearing on my template HTML page. view_results.html <div> <input id="search" name="search" t ...

javascriptjquerypythonajaxdjango

Leverage the power of Angular and Node.js to dynamically generate and configure a new subdomain on an

Currently, I am tackling a project that involves generating sub domains dynamically based on the prefixes entered by users on my website. While everything is functioning properly on my localhost using diet.js and express-subdomain, errors are being encount ...

javascriptangularjsnode.jsamazon-web-servicessubdomain

Utilize the dimensions of one image to resize others using the JavaScript method .getBoundingClientRect

I am attempting to transfer the width and height measurements of the initial image to all subsequent images on the page. Currently, I have successfully applied the dimensions of the first image to the second one, but I am facing difficulties with the thir ...

javascripthtmlcssimage

the session data is being mishandled

I have integrated express-session and express-mysql-session in my application to handle sessions and store them in a MySQL database. The session data is saved in a table named "sessions". const express = require('express'); const session = requir ...

javascriptmysqlnode.jsexpressexpress-session

Nextjs attempting to access local storage without proper initialization

I'm currently working on a feature where I have a sidebar with two buttons, contact and profile. When a user clicks on either of them, the URL updates to: /?section=clickedItem, allowing the user to save the state and return to that specific page upon ...

javascriptreactjsnext.js

If the key for an object is already in existence, then append another object to

Currently, I am parsing through a considerable JSON file and handling key:value pairs within an object. The problem arises when I encounter a key that requires me to append another object to it, rather than simply overwriting it. For instance: var collec ...

javascriptangularjs

Bootstrap 4 tooltip/popover with automatic fallback placement (utilizing two possible placement options)

In the past, Bootstrap 3 offered functionality to handle data-placement="left auto", which would display the tip on the left if there was sufficient space, or calculate an automatic placement if not. However, Bootstrap 4 does not support the use of two pl ...

javascriptbootstrap-4position

What is the correct way to add a library to webpack configuration?

Currently, I am working with Rails 6 and webpack in my project. I am interested in integrating the library jquery-textcomplete, but I am unsure about how to properly include it in the application.js file. Here are the steps I have taken so far: I instal ...

javascriptjqueryruby-on-railswebpackruby-on-rails-6

Enhancing your website's design with dynamic CSS variables using JavaScript

Is there a way to update CSS variables specifically scoped under a certain CSS class (or even other complex CSS selectors) that are predefined in a stylesheet? This question extends beyond just CSS variables and includes other CSS properties as well, quest ...

javascripthtmlcssdomcss-variables

Adjusting the width of a select box to match the size of its child table using CSS

Within my Vue application, I've implemented a select box that contains a table component. When the select box is clicked, the table becomes visible in a container. However, I'm facing an issue where I can't dynamically adjust the width of th ...

javascripthtmlcssvue.js

The closing brackets in PHP substr() function are causing style issues

Here's the scenario: I entered a large amount of content in a text editor (WordPress). Now, I want to display this content on my homepage using PHP queries. In order to limit the content size to 100-200 characters, I used the substr() function i ...

javascriptphphtmlwordpress

Tips for incorporating symmetrical values using jquery

I am facing a challenge with the following markup: <div class="container"> <figure></figure> <figure></figure> <figure></figure> </div> My task is to add a symmetrical element for each of the fi ...

javascriptjquerycsssymmetric

Guide on utilizing JSON data sent through Express res.render in a public JavaScript file

Thank you in advance for your assistance. I have a question that has been on my mind and it seems quite straightforward. When making an app.get request, I am fetching data from an external API using Express, and then sending both the JSON data and a Jade ...

javascriptjsonexpresspug

Determining age in a Class upon instance creation

Is there a way to encapsulate the age calculation function within the Member Class without resorting to global space? I want to automatically calculate and set an age when creating an instance. Currently, I have a function that works, but I'm curious ...

javascriptclass