Reducing the gridview size with the help of the Bootstrap framework's stylesheet

Seeking advice on adjusting the size and alignment of a Gridview in asp.net web forms using bootstrap stylesheets. Here's the code snippet in question:

      <table class="table table-sm" >
                       
                <asp:GridView   ID="grdTest"  runat="server" GridLines="Horizontal"  CssClass="table  table-sm table-bordered table-condensed table-responsive-sm table-hover table-striped" >   
                </asp:GridView>
                            
            </table>

View the resulting bootstrap table image here:

https://i.sstatic.net/Z71MW.png

How can I adjust the size and center the table on the screen? Currently, it is extending across the entire content page.

Appreciate any guidance. Thank you.

htmlcssbootstrap-4flexbox

Answer №1

Wrap it in a 'table-responsive' container

<div class="table-responsive">
  <table class="table">
...
 </table>
</div>

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

Preventing repetition of data and storing submitted form inputs in a cache

I am facing an issue with my code that checks for duplicate entries based on the USER ID in the database. When I submit the form and the USER ID already exists, it clears all other fields on the form, requiring me to re-enter all details again. This is fru ...

phphtmlmysql

Adjusting the opacity of the background image in the section - focus solely on the background

This section is what I'm working on. <section ID="Cover"> <div id="searchEngine">hello</div> </section> I am trying to achieve a fade in/out effect specifically for the background image of the Cover section. T ...

javascriptjqueryhtmlcss

Is there a way to modify a button's aspect ratio when it is clicked?

Currently, I am utilizing the MUI v5 AppBar to craft a navigation bar with Tabs. My aim is to have the background of the Tab blend seamlessly with the main page background upon being clicked, as illustrated here: https://i.sstatic.net/e4bDn.png However, a ...

cssreactjsmaterial-ui

PHP Lightweight HTML Content Scraper

I have been experimenting with a basic web crawler and here is the simple HTML code I used for learning purposes: input.php <ul id="nav"> <li> <a href="www.google.com">Google</a> <ul> <li&g ...

phphtmlsimple-html-dom

Mysterious anomaly observed: Peculiar trajectory detected in canvas image during left

I have a fascinating HTML5 Canvas that showcases the movement of two identical objects to both the right and the left. Although the right side operates flawlessly, I've noticed that the left object leaves behind an intriguing trail with a hint of gree ...

javascriptjqueryhtmlcsshtml5-canvas

Information is not transferring to Bootstrap modal

I attempted to send a value to a modal by following the instructions on the Bootstrap documentation here. However, I am facing an issue where the data is not being successfully passed. To trigger the modal, use the following button: <button type=" ...

javascripthtmltwitter-bootstrapbootstrap-modal

How to position the figcaption within a card?

My card design features a masonry-style layout similar to what you can see here https://codepen.io/daiaiai/pen/VPXGZx I'm trying to add some additional information on top of the images using figcaptions, but my attempts with position:relative haven&a ...

htmlcss

Ensure an element stays in its position relative to another element by utilizing the CSS property "position: absolute"

I want to incorporate a circle with an image inside into a navbar. The circle should be larger than the navbar, similar to the image shown here: https://i.sstatic.net/kpJgC.png I have been using "position: absolute" to keep the circle in place, but the is ...

htmlcssbootstrap-5navbar

The color of the Angular md-switch .md-thumb is not showing up properly when switching the toggle

In Safari, the md-switch displays a yellow section on the md-thumb when toggled. However, other browsers handle the switch without any issues. The md-bar appears fine, but the md-thumb is yellow. I have tried setting everything to the blue color I am using ...

htmlcssangularjssafariless

Issues with HTML keycodes not functioning properly in Firefox

Here is the code I am using: function restrictInput(e) { var charCode = (e.which) ? e.which : ((e.charCode) ? e.charCode : ((e.keyCode) ? e.keyCode : 0)); if((charCode < 48 || charCode > 57) && ( ...

javascripthtml

Issues with the functionality of the contact form

I have recently purchased a new template that comes with a contact form featuring ajax and validation. I have tried to implement my script, but it doesn't seem to be working. I suspect there might be an issue on the server-side with my script. Can any ...

phphtmlajaxpost

The website's scrolling speed is painfully slow

Currently, I am working on enhancing the performance of this site at . If you scroll through the site or navigate using the Up and Down Arrow Keys, you may notice a sluggish and slow Scroll Behaviour. I am utilizing HTML5 and simple img tags with 85% wid ...

performancehtmlcss

Challenges arise when creating responsive map regions in Vue 3

I am currently working on a project in Vue 3 that involves an image map with click events on certain areas. The challenge I'm facing is that the images scale according to the browser size, but the coordinates of the image map are fixed pixel sizes. I& ...

htmlimagevue.jsdictionaryvuejs3

Are you looking to analyze inputs and tally up any duplicates?

I am working on a form that requires users to input up to 20 1-4 character codes. My goal is to count each code entered and present the output in the following format: AB //entered once EFOO //entered once AACC x 2 //because AACC was entered twice into fo ...

phphtml

What is the best way to eliminate extra space at the bottom of glide.js?

Looking for assistance to eliminate the whitespace at the bottom of an image or slider. Can anyone help? Here is a preview of the image: https://i.stack.imgur.com/mEYY3.png If you'd like to take a look, here is the project code link: I had to down ...

javascripthtmlcssglidejs

How can I eliminate the time axis in FullCalendar's agenda view?

Is there a way for me to use multiple calendars and remove the time axis in the agenda view? I have tried using the axisFormat option to eliminate the numbers/content in that column, but I'm struggling to set the width to 0 or make any other adjustmen ...

jqueryhtmlcssfullcalendar

Implement dynamic page titles with breadcrumbs in Laravel 8 for a seamless user experience

I am currently utilizing the laravel-breadcrumbs package created by diglactic in conjunction with laravel 8, which is a fork from davejamesmiller/laravel-breadcrumbs. My goal is to incorporate a dynamic page title that aligns with this breadcrumbs package. ...

phphtmlcsslaravel-8bootstrap-5

The issue of a malfunctioning Customized Bootstrap Carousel when used with flex and gap is causing

I have created a unique bootstrap carousel where instead of displaying one div, I showcase three (one in the middle and half of each on the sides). The issue arises when I add borders to my divs and attempt to create spacing between them using display: fle ...

csssassbootstrap-5

Adjust the opacity of a div's background without impacting the children elements

I am currently working on a dynamic content display in my HTML page using some knockout code. The setup looks like this: <section id="picturesSection" class="background-image" data-bind="foreach: { data: people, as: 'person'}"> <div ...

javascripthtmlcssknockout.js

Assistance required for JavaScript with Image and Hyperlinks

In the provided code snippet, I have included a javascript onclick function to the image tag. After clicking the image and then going back, the page remains on the current page rather than returning to the original page. Is there a way to prevent this beha ...

javascripthtmlcss