Sets a minimum width for a Bootstrap panel

I have a panel panel-default on my page to display some data. I want the panel's min-width to be 720px, and if the window is resized to less than 720px, I want a horizontal scrollbar to appear. However, the panel cannot shrink below 720px similar to using table-responsive with tables. This is how I achieve it with tables:

HTML
<div class="example-table table-responsive">
    <table id="example-table" class="table table-hover">
    </table>
</div>

CSS
.example-table{
    max-width: 720px;
}
#example-table{
    min-width: 720px;
}

When I tried applying the rule .panel{min-widht:720px;}, it didn't work.

How can I achieve the same effect with my panel?

EDIT: After testing this on jsfiddle, I found that even when I set min-width: 760px, the content in the panel-body (two col-sm-6) creates two rows instead of staying as two columns. Initially, I thought this was due to min-width, but now I'm unsure why this happens even with the horizontal scrollbar present.

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

In response to your revised question, it seems that you would like your columns to stay in line regardless of the screen width. To achieve this, you can simply switch from using col-sm-6 to col-xs-6. Here is an example:

<div class="col-xs-6">
    <strong>Content goes here</strong>
</div>
<div class="col-xs-6">
    <strong>More content here</strong>
</div>

Check out the jsFiddle for a live example: https://jsfiddle.net/rvzy9s5k/1/

Answer №2

Implementing media-queries can be done in the following way:

@media (min-width: 720px) {
    .example-table {
        <!-- Add your custom css styles here -->
    }

}

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 the form is submitted, I am unable to record the checkbox value

Hi, I have a question regarding submitting a form to the "/delete" route when a checkbox is checked. Although I am able to submit the form successfully, I am facing an issue retrieving the checkbox value that I assigned using ejs. Below are the relevant co ...

javascripthtmlnode.jsexpressejs

When clicked, the DIV expands to fit the size of the window

Is there a way to use jQuery to expand a div to full screen when clicked, and change the content or layout of the div? I have a small div on my webpage with text or images inside, and I want it to enlarge when clicked so it fills the entire window with m ...

jqueryhtmljquery-uicss

Ensure that the divs are properly aligned and construct columns within a single column

I've been working on creating a step bar that needs to adapt to any number of steps provided by the backend. Here's what I have so far: https://i.sstatic.net/cj4qZ.png It looks fine, but connecting the circles with bars would be beneficial. How ...

htmlcssangular

jQuery Autocomplete - struggling to pinpoint the exact location where the width of the suggestions div is being defined

I have successfully implemented jQuery Autocomplete, but I am facing an issue with adjusting the width. Currently, it is set to 268px in Firebug, however, I would like it to be 520px. After checking the stylesheet, I couldn't locate where the width o ...

javascriptjquerycssstylesheetclient-side

The footer seems to detach on certain pages

Currently, I am facing a frustrating issue while working on a website. The footer seems to be disconnected from the main body content on certain pages, while on others, it appears to be properly attached. Despite my efforts to troubleshoot by removing elem ...

css

Load a form using ajax and submit it using jQuery

For a while now, I have been facing challenges in figuring out what's going wrong with my code. The issue arises when I try to submit a form using jQuery that was loaded through ajax. The form loads perfectly fine within a div after invoking the ajax ...

phpjavascriptjqueryhtmlajax

Capture all parameters in the URL, regardless of their names

Hello, I am currently utilizing the s:url tag to create a URL in my JSP file for pagination purposes. The issue I am facing is that when clicking on the previous link, it generates a URL in the address bar like someAction?previuos=prev. Similarly, when cli ...

htmljspstruts2

I seem to be encountering a z-index dilemma

Is there a way to make my slogan float above an image on a wide screen? I've tried adjusting the z-index without success. You can find the site here: Here is the CSS code: The #Slogan contains the words: Fitness Bike Guides - Top Models - Discount ...

css

Which library does stackoverflow utilize to showcase errors (utilizing Bootstrap popover for error help-block)?

Currently, I am using bootstrap's has-error and help-block classes to display validation error messages in my form. However, I find the error message display in Stackoverflow's Ask Questions Form to be very appealing. Are they using a specific js ...

javascripttwitter-bootstrapcss

A confined space that is scrollable, yet keeps any overflow hidden without displaying a scroll bar

Is there a method for creating a overflowing div that conceals the overflow, does not display a scroll bar, but remains scrollable (via mouse wheel or touch input)? For example: <!DOCTYPE html> <div id="longtext" style="width:100px; height ...

htmlcssscrollscrollbaroverflow

I am facing a challenge with my data, as it includes start and end values representing character indexes for styles. I need to find a way to convert this information into valid HTML tags

I have some content from another source that I must transform into proper HTML. The content contains a string such as: "Hello, how are you?" Additionally, there is a separate section detailing styling instructions. For example: 'bold:star ...

htmlnestedformattingtags

Is there a way to extract the text that is displayed when I hover over a specific element?

When I hover over a product on the e-commerce webpage (), the color name is displayed. I was able to determine the new line in the HTML code that appears when hovering, but I'm unsure how to extract the text ('NAVY'). <div class="ui ...

pythonhtmlseleniumbeautifulsoupscrapy

Improving the efficiency of CSS animations

Is it possible to improve the performance of CSS animation by preventing it from running when the animated object is not visible on the viewport? Thank you! ...

csscss-animations

The class within the div element will fail to pick up the specified CSS styles

I've been troubleshooting an issue with a newly created div that's not picking up its corresponding styles from the stylesheet. It's frustrating and I could really use some help. Here is the HTML: <div class="2columnlayout"> < ...

htmlcss

Adjust the number of columns displayed when rendering with Datatables

I've utilized DataTables to create a dynamic datatable. $('table').DataTable( { dom: 'Bfrtip', buttons: [ 'copy', 'excel', 'print', ], responsive: true } The table I created c ...

jqueryhtmldatatabledatatables

Utilizing media queries and page width in a Moodle theme designed with Bootstrap framework

I currently have my LMS set up with Moodle 4 and the boost theme which is based on bootstrap (github) However, the default page layout appears very narrow on all devices and I would like to utilize the responsive design features of Bootstrap for different ...

csstwitter-bootstrapsassmedia-queriesmoodle

Is the use of div:after content really affecting the width? I am having trouble getting my transition to work

Here is a simple code snippet that represents my actual code: #myDiv { background: black; color:white; float:left; min-width:45px; max-width:450px; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #myDiv:hover:after { width ...

javascripthtmlcss

My preference is to launch a pgsql query in a separate window instead of saving it as a CSV file

I have a code snippet that successfully downloads the results of a pgsql query as a csv file upon form submission. However, when I tried changing the attachment to inline, it generated a downloaded php file with all the data instead. My ultimate goal is to ...

phphtmlpostgresql

Obtain the following image with every click

I have a div with images inside. I created two arrows (previous, next) within a larger div using the src of one of the images as the background URL for each arrow. My goal is to make the next arrow change the large image to the src of the following image w ...

javascriptphpjqueryhtmlcss

Blazor: Passing a CSS class as a parameter to a child component

Is there a way to ensure css isolation works properly when passing a class as an argument to a child component? In the following code snippet, I anticipated the child component would display in blue, but that's not happening. Parent.razor <div cla ...

cssblazor-webassembly