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

Need help integrating Bootstrap into my Laravel project using npm install in my Blade file - any tips?

In my current project using Laravel 5.6, I have installed Bootstrap via npm. Here is an excerpt from my blade file: <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name ...

twitter-bootstraplaravelnpm

Bootstrap 4's form validation feature is malfunctioning

link to plunker Here's what I'm looking to achieve. I am currently using Bootstrap 4 for my website. Specifically, I have a basic contact form that I am attempting to enhance with tooltip validation. Unfortunately, the form validation is not ...

htmlcsstwitter-bootstrapbootstrap-4

Image failing to appear in .php document

I am experiencing an issue with my basic webpage where images are not appearing when I link to them locally. Oddly enough, when using a full URL linking to an external site, the image displays perfectly fine. Here is the code snippet in question: <html ...

phphtmlimage

Unveiling the hidden secrets of HTML code through scraping

Looking to extract data from the cadastral records in Poland available at . Specifically, I am interested in retrieving information from the element tagged with id 'gfi_0'. The challenge is that this element is not immediately accessible; it only ...

pythonhtmlseleniumweb-scrapinghtml-table

File not being successfully sent through form submission using Jquery

I have created a form setup like this: <label for="pdffile">Please Upload File</label> <form class="form-horizontal" role="form" method="POST" name="upload" id="upload" enctype="multipart/form-data"> {{ csrf_fi ...

phpjqueryhtmllaravel

Troubleshooting Problems with CSS Three-Column Layout

Struggling with aligning domain names in a 3 column setup, I have been attempting this for some time now without success. I am new to this and could use some guidance. Here is the code: TPL file <div> <p class="center">{foreach key=num it ...

htmlcsssmarty

Creating a button in HTML that performs a POST request without redirecting involves using specific code techniques

Looking for a way to create an HTML button that triggers a POST request to a quick route with parameters passed through req.params. The challenge is preventing the button from redirecting me to the route when clicked, but instead staying on the same page w ...

javascripthtmlnode.jsexpressbackend

How can I create a responsive navigation bar in Bootstrap that displays a menu button and collapses the list items when the browser is resized?

I am looking to create a navigation bar that transforms into a menu button and collapses when the browser window is minimized. I would like it to function similarly to the one found at . While I have searched for tutorials, most only cover how to create ...

htmlcsstwitter-bootstrap

Tips for Customizing the Width of Your Material UI Alert Bar

At the moment, I have refrained from using any additional styling or .css files on my webpage. The width of the Alert element currently spans across the entire page. Despite my attempts to specify the width in the code snippet below, no noticeable change ...

javascriptcssreactjstypescriptmaterial-ui

Is there a way for me to produce a random choice depending on the option selected by the user in the <select> menu?

As a beginner in JavaScript, I am attempting to create a feature where users can select a genre from a dropdown list and receive a random recommendation from that genre displayed on the screen. In essence, my goal is to allow users to get a random suggest ...

javascripthtmllistarraylist

Looking for a solution to fix the VueJS calculator that only works once?

My calculator project using VueJS, HTML and CSS is almost complete. However, I'm facing an issue where it only works once. For example, if I input 6x3, it correctly gives me 18. But if I then clear the result and try to input a new calculation like 3 ...

javascripthtmlcssvue.jscalculator

iOS: Incorrect element is currently being scrolled by the user

I encountered an unusual scrolling problem on iOS (7 or 8) while browsing www.cahri.com/tests/scroll How can you replicate this issue? Visit the example page on your iPhone/iPad/iOS Simulator in landscape mode Use your right thumb to touch and scroll th ...

ioscssscroll

The second entry is not being styled by CSS, is there an issue with the code in this section?

I am facing a challenge while trying to set the same background image for two div elements: .abc { background: url('images/autogen.png') no-repeat 0px -133px; width: 256px; height: 256px; }; .def { background: url('images/autogen.png' ...

htmlcss

Tips for ensuring a static html element remains visible at the bottom of the screen even when the soft keyboard is opened in iOS Safari

Within a webpage, there is an input field and a fixed div positioned at the bottom of the window using CSS properties such as position:fixed; and bottom:0;. To better illustrate this setup, I have created a Codepen demo which can be viewed here: https://c ...

htmlioscsssafarikeyboard

Alter the app's entire background color in React.js with a button click

I am facing an issue with changing the background color of my entire React App when a button is clicked. Currently, I am able to change the color of the button itself but not the background. I have imported the App.css file into my project and I am looking ...

javascriptcssreactjs

Search field in DataTables appears to be misaligned

I'm in the process of developing a small website using JSP and DataTables (currently only for the first table). Here's what I have so far: As you can observe, there seems to be an alignment issue with the search field position. I'm n ...

javascriptjqueryhtmlcssdatatables

Using dots instead of lines for the carousel indicators in PrimeNG

I'm currently working on a carousel feature, but I want to change the indicators from lines to small dots. I know the solution lies within the CSS files, but I'm not sure how to implement it. I think I need to create a new CSS class, but I could ...

cssangularprimeng

Ways to create a smooth transition in element height without a known fixed target height

Is it possible to create a smooth height transition for an element when the target height is unknown? Replacing height: unset with height: 100px allows the animation to work, but this presents a problem as the height needs to be based on content and may v ...

javascripthtmlcss

When attempting to use the ResponsiveSlides plugin, the functionality of 'Image links' seems to be disabled in the Chrome browser

While everything is functioning perfectly in Firefox and IE, I've encountered an issue with Chrome. It only works after right-clicking and inspecting the element; once I close the Inspector, it stops working - displaying just an arrow cursor as if the ...

jqueryhtmlcss

Prevent the ability to capture photos using the HTML input file feature within an iOS application

Is there a way to restrict users from taking photos within an iOS app that is WKWebView based, and instead only allow them to select photos from their library or iCloud? Currently, I am aware of the ability to force users to utilize the camera with the ca ...

ioshtmlimage-uploadingwkwebview