The background color of the columns is overwhelming

I would like to create a TV remote control design using bootstrap, but I am encountering some issues. The background color is overflowing and I'm unsure how to fix it. Please take a look at the code and feel free to offer any suggestions!

@media screen and (min-width: 1200px) {
  .btn-circle {
    width : 90px;
    height: 90px;
    text-align: center;
    padding: 0;
    font-size: 30px;
    border-radius: 70px;
  }
}
@media screen and (min-width: 980px) and (max-width: 1200px) {
  .btn-circle {
    width : 82px;
    height: 82px;
    text-align: center;
    padding: 0;
    font-size: 25px;
    border-radius: 70px;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .btn-circle {
    width : 62px;
    height: 62px;
    text-align: center;
    padding: 0;
    font-size: 20px;
    border-radius: 40px;
  }
}
@media screen and (max-width: 767px) {
  .btn-circle {
    width : 32px;
    height: 32px;
    text-align: center;
    padding: 0;
    font-size: 12px;
    border-radius: 40px;
  }
}
.row {
  background-color: black;
}
#btn_key_f1 {
  background-color: green;
  color: #FFFFFF;
}
#btn_key_f2 {
  background-color: blue;
  color: #FFFFFF;
}
#btn_key_f3 {
  background-color: red;
  color: #FFFFFF;
}
#btn_key_f4 {
  background-color: yellow;
  color: #000000;
}
#btn_key_1 {
  background-color: #666666;
  color: #FFFFFF;
}
#btn_key_3 {
  background-color: #666666;
  color: #FFFFFF;
}
#btn_key_5 {
  background-color: #666666;
  color: #FFFFFF;
}
#btn_key_7 {
  background-color: #666666;
  color: #FFFFFF;
}
#btn_key_9 {
  background-color: #666666;
  color: #FFFFFF;
}
#btn_key_on {
  background-color: #666666;
  color: #FFFFFF;
}
#btn_key_off {
  background-color: #666666;
  color: #FFFFFF;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="remote.css">

  </head>
  <body>
    <div class="col-xs-offset-4 col-xs-5 col-sm-6 col-md-4 col-lg-offset-5 col-lg-3" id="shadow">
      <div class="row_outermost">
        <div class="row" id="row_1">
          <div class="col-xs-1 col-sm-2 col-md-1 col-lg-3 keypad">
            <button type="button" id="btn_key_on" class="btn btn-circle btn-default" data-keycode="116">
              <span class="glyphicon glyphicon-off"></span>
              <!-- On -->
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-5 col-lg-3 keypad">
            <!-- Empty1 -->
          </div>
          <div class="col-xs-1 col-sm-2 col-md-1 col-lg-3 keypad">
            <button type="button" id="btn_key_off" class="btn btn-circle btn-default" data-keycode="142">
              Off
              <!-- Off -->
            </button>
          </div>
        </div>
        <div class="row" id="row_2">
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_1" class="btn btn-circle btn-default" data-keycode="">
              <span class="glyphicon glyphicon-plus"></span>
              <!-- PageUp-->
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_2" class="btn btn-circle btn-default" data-keycode="103">
              <span class="glyphicon glyphicon-menu-up"></span>
              <!-- Up -->
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_3" class="btn btn-circle btn-default" data-keycode="14">
              <span class="glyphicon glyphicon-repeat"></span>
              <!-- BackSpace -->
            </button>
          </div>
        </div>
        <div class="row" id="row_3">
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_4" class="btn btn-circle btn-default" data-keycode="105">
              <span class="glyphicon glyphicon-menu-left"></span>
              <!-- Left -->
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_5" class="btn btn-circle btn-default" data-keycode="28">
              Ok
              <!-- OK -->
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_6" class="btn btn-circle btn-default" data-keycode="106">
              <span class="glyphicon glyphicon-menu-right"></span>
              <!-- Right -->
            </button>
          </div>
        </div>
        <div class="row" id="row_4">
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_7" class="btn btn-circle btn-default" data-keycode="109">
              <span class="glyphicon glyphicon-minus"></span>
              <!-- PageDown-->
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_8" class="btn btn-circle btn-default" data-keycode="108">
              <span class="glyphicon glyphicon-menu-down"></span>
              <!-- Down -->
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_9" class="btn btn-circle btn-default" data-keycode="1">
              <span class="glyphicon glyphicon-share"></span>
              <!-- ESC -->
            </button>
          </div>
        </div>
        <div class="row" id="row_5">
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_f1" class="btn btn-circle btn-default keypad-btn" data-keycode="59">
              F1
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_f2" class="btn btn-circle btn-default keypad-btn" data-keycode="60">
              F2
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_f3" class="btn btn-circle btn-default keypad-btn" data-keycode="61">
              F3
            </button>
          </div>
        </div>
        <div class="row" id="row_6">
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <!-- Empty2-->
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_f4" class="btn btn-circle btn-default keypad-btn" data-keycode="62">
              F4
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>
htmlcsstwitter-bootstrap

Answer №1

I have reviewed the code you provided.

It is important to remember that in Bootstrap, all elements must be covered by the 12 columns for backgrounds to align properly.

By following these guidelines, everything should work correctly:

<div class="row" style="background-color:black;">
   <div class="col-lg-offset-1 col-lg-10">
        <div class="">
             <!-- Make sure to include a col-lg-4 for each element here -->
        </div>
   </div>
  <div class="col-lg-offset-1"></div>
</div>

Answer №2

This is not just any answer, it's a fully functioning working sample!

@media screen and (min-width: 1200px) {
.btn-circle {
    width : 90px;
    height: 90px;
    text-align: center;
    padding: 0;
    font-size: 30px;
    border-radius: 70px;
}
}
@media screen and (min-width: 980px) and (max-width: 1200px) {
.btn-circle {
    width : 82px;
    height: 82px;
    text-align: center;
    padding: 0;
    font-size: 25px;
    border-radius: 70px;
}
}
@media screen and (min-width: 768px) and (max-width: 979px) {
.btn-circle {
    width : 62px;
    height: 62px;
    text-align: center;
    padding: 0;
    font-size: 20px;
    border-radius: 40px;
}
}
@media screen and (max-width: 767px) {
.btn-circle {
    width : 32px;
    height: 32px;
    text-align: center;
    padding: 0;
    font-size: 12px;
    border-radius: 40px;
}
}
.row {
background-color: black;
}
#btn_key_f1 {
background-color: green;
color: #FFFFFF;
}
#btn_key_f2 {
background-color: blue;
color: #FFFFFF;
}
#btn_key_f3 {
background-color: red;
color: #FFFFFF;
}
#btn_key_f4 {
background-color: yellow;
color: #000000;
}
#btn_key_1 {
background-color: #666666;
color: #FFFFFF;
}
#btn_key_3 {
background-color: #666666;
color: #FFFFFF;
}
#btn_key_5 {
background-color: #666666;
color: #FFFFFF;
}
#btn_key_7 {
background-color: #666666;
color: #FFFFFF;
}
#btn_key_9 {
background-color: #666666;
color: #FFFFFF;
}
#btn_key_on {
background-color: #666666;
color: #FFFFFF;
}
#btn_key_off {
background-color: #666666;
color: #FFFFFF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">

    <div class="col-xs-offset-4 col-xs-5 col-sm-6 col-md-4 col-lg-offset-5 col-lg-3" id="shadow">
        <div class="row_outermost">
            <div class="row" id="row_1">
                <div class="col-xs-1 col-sm-2 col-md-1 col-lg-3 keypad">
                    <button type="button" id="btn_key_on" class="btn btn-circle btn-default" data-keycode="116">
                        <span class="glyphicon glyphicon-off"></span>
                        <!-- On -->
                    </button>
                </div>
                <div class="col-xs-1 col-sm-2 col-md-5 col-lg-3 keypad">
                    <!-- Empty1 -->
                </div>
                <div class="col-xs-1 col-sm-2 col-md-1 col-lg-3 keypad">
                    <button type="button" id="btn_key_off" class="btn btn-circle btn-default" data-keycode="142">
                        Off
                        <!-- Off -->
                    </button>
                </div>
            </div>
            <div class="row" id="row_2">
                <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
                    <button type="button" id="btn_key_1" class="btn btn-circle btn-default" data-keycode="">
                        <span class="glyphicon glyphicon-plus"></span>
                        <!-- PageUp-->
                    </button>
                </div>
                <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
                    <button type="button" id="btn_key_2" class="btn btn-circle btn-default" data-keycode="103">
                        <span class="glyphicon glyphicon-menu-up"></span>
                        <!-- Up -->
                    </button>
                </div>
                <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
                    <button type="button" id="btn_key_3" class="btn btn-circle btn-default" data-keycode="14">
                        <span class="glyphicon glyphicon-repeat"></span>
                        <!-- BackSpace -->
                    </button>
                </div>
            </div>
            <div class="row" id="row_3">
                <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
                    <button type="button" id="btn_key_4" class="btn btn-circle btn-default" data-keycode="105">
                        <span class="glyphicon glyphicon-menu-left"></span>
                        <!-- Left -->
                    </button>
                </div>
                <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
                    <button type="button" id="btn_key_5" class="btn btn-circle btn-default" data-keycode="28">
                        Ok
                        <!-- OK -->
                    </button>
                </div>
                <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
                    <button type="button" id="btn_key_6" class="btn btn-circle btn-default" data-keycode="106">
                        <span class="glyphicon glyphicon-menu-right"></span>
                        <!-- Right -->
                    </button>
                </div>
            </div>
            <div class="row" id="row_4">
                <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
                    <button type="button" id="btn_key_7" class="btn btn-circle btn-default" data-keycode="109">
                        <span class="glyphicon glyphicon-minus"></span>
                        <!-- PageDown-->
                    </button>
                </div>
                <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
                    <button type="button" id="btn_key_8" class="btn btn-circle btn-default" data-keycode="108">
                        <span class="glyphicon glyphicon-menu-down"></span>
                        <!-- Down -->
                    </button>
                </div>
                <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
                    <button type="button" id="btn_key_9" class="btn btn-circle btn-default" data-keycode="1">
                        <span class="glyphicon glyphicon-share"></span>
                        <!-- ESC -->
                    </button>
                </div>
            </div>
            <div class="row" id="row_5">
                <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
                    <button type="button" id="btn_key_f1" class="btn btn-circle btn-default keypad-btn" data-keycode="59">
                        F1
                    </button>
                </div>
                <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
                    <button type="button" id="btn_key_f2" class="btn btn-circle btn-default keypad-btn" data-keycode="60">
                        F2
                    </button>
                </div>
                <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
                    <button type="button" id="btn_key_f3" class="btn btn-circle btn-default keypad-btn" data-keycode="61">
                        F3
                    </button>
                </div>
            </div>
            <div class="row" id="row_6">
                <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
                    <!-- Empty2-->
                </div>
                <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
                    <button type="button" id="btn_key_f4" class="btn btn-circle btn-default keypad-btn" data-keycode="62">
                        F4
                    </button>
                </div>
            </div>
        </div>
</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

Creating a Jquery method to handle multi-line ellipsis for long text

Check out this fiddle I made: http://jsfiddle.net/mupersan82/JYuSY/ This snippet handles multiline ellipsis: $(function() { var ellipsisText = $('.multilineEllipseText'); var textContainer = $('.incidentCellBottomRight').height(); whi ...

jqueryhtmlcss

"Troubleshooting: Fixing the issue with jQuery datepicker not

After implementing the jQuery Datepicker on a field, I noticed that even though assigning a value to the field shows in Chrome's developer tools... Unfortunately, the assigned value does not show on the front end. I am aware that we can set a defaul ...

javascriptjqueryhtmljquery-uidatepicker

Incorporating an external script within a Next.js application

I've been having trouble incorporating an external JavaScript source into my Next.js application and I keep encountering the following error: Failed to execute 'write' on 'Document': It isn't possible to write into a documen ...

javascripthtmlreactjsnext.js

Struggling to effectively align the footer div in a responsive design

Check out this GitHub link to access the HTML file and CSS: https://github.com/xenophenes/pgopen-splash2016 I'm facing an issue with the footer text alignment. Despite my efforts, I can't seem to center it properly as it keeps appearing slightly ...

htmlcss

Encasing extracted content in <p> tags

On my Wordpress Site, I have extracted images and text separately to use in different sections of my single.php file. Utilizing HTML within the Bootstrap 3 framework: <div class="row"> <div class="col-md-12"> <?php ...

javascriptphpjqueryhtmlcss

Experience the potential of HTML5 by playing dual audio MKV/AVI videos

After conducting some research, it seems that Chrome has the necessary codecs to play MKV videos. However, I have yet to come across any information on how to select audio tracks in MKV and AVI files using Javascript/HTML5. Does anyone have any insight in ...

javascripthtmlhtml5-video

Updating the div#content dynamically with Jquery without the need to refresh the page

After spending countless hours on this forum, I have yet to find a solution that perfectly fits my needs, so I will pose my question. Here is the gist of what I am attempting to accomplish: When the page loads, the default page fades in and displays. Wh ...

javascriptphpjqueryhtmlajax

Utilize the identical button and modify the text displayed on it for implementing my jQuery function that toggles visibility

Is there a way to modify my current jQuery function for displaying and hiding a contact form using the same button? Currently, I have two buttons that toggle the visibility of the form: "Write me" shows the form on click and changes to "I don't want ...

jqueryhtml

Struggling to connect with PouchDB within my HTML-based Web application

I am looking to integrate pouchDB into my WebApp so that upon clicking a button, the data from a JSON file will be saved to pouchDB. In the initial stage in my index.html, I included the following: <script type="module" src="pouchdb/packa ...

javascripthtmlnode.jscouchdbpouchdb

Trouble with displaying the NVD3 sample chart

I seem to be missing something simple... I've copied the code for an nvd3 example exactly, but I'm getting a blank page without any error messages. Both the nvd3 and d3 libraries are showing up when I check in the console by typing "nv" or "d3", ...

javascripthtmld3.jsnvd3.js

Is it possible to use JavaScript to make a CSS animation mimic the behavior of a :hover effect?

My CSS animation looks like this: HTML: <div class="container" id="cont"> <div class="box show"></div> </div> CSS: .container { width: 100vw; height: 100vh; } .box { position: absolute ...

javascripthtmlcss

Personalize the option for yiiootstrap4ActiveField::radioList in Yii2

I am currently using yii\bootstrap4\ActiveField::radioList and I am attempting to include HTML tags inside the options of my radioList. $list = [ 0 => '<strong>Option1</strong><br> lorem ipsum lorem ipsum&ap ...

htmlyii2radiobuttonlist

Remove the 'name' attribute from the input tag within the URL

Is there a way to make the server update the URL format to localhost:3000/userinput instead of localhost:3000/?name=userinput when submitting a name? Any suggestions would be greatly appreciated. Thank you in advance. ExpressJs FILE <!DOCTYPE html> ...

javascripthtmlnode.jsexpressinput

Add a preventDefault event listener to a submit button that triggers a specific function

$(function() { $('#login').submit(function(e){ preventSubmission(); e.preventDefault(); }); }); function preventSubmission() { $('#btnLogin').attr('disabled','disabled'); $("#btnLogi ...

javascriptjqueryhtml

space allocated beneath a table cell

I am currently utilizing the foundation framework for emails and have encountered a formatting issue on my Test Page. There seems to be an unwanted whitespace just below the racoon image that I am struggling to remove. Despite setting the height to 250px, ...

htmlcss

Refresh numerous HTML <div>'s using data from a JSON object

Looking to automatically update the homepage of my website with the ten most recent "posts" from the server. Here's an example HTML format: <div id="post1"> <p id="link"> </p> </div> <div id="post2"> <p id="li ...

javascriptjqueryhtml

"Need help solving the issue of generating a random number for a Firebase DB column after adding a new user

Whenever I add a new user using JavaScript, it generates a random number below the Admins column like this. However, I want to adjust this so that it appears as shown in these tables, displaying the username value. If anyone can help me modify the code acc ...

javascripthtmljsonfirebasefirebase-realtime-database

Arranging cells within a table with numerous rowspan configurations

I need some help creating a table that will be divided using rowspans for a PDF rendering with BFOreports. I have included an example layout below (numbers are just for reference): https://i.stack.imgur.com/Wbe96.png However, the output I am currently ge ...

htmlhtml-tablebfo

Adding an additional stroke to a Material-UI Circular Progress component involves customizing the styling properties

I am attempting to create a circular progress bar with a determinate value using Material-UI, similar to the example shown in this circular progress image. However, the following code does not display the additional circle as the background: <CircularP ...

javascriptcssreactjsmaterial-ui

Lighthouse Issue: Facing PWA Challenges with a "Request Blocked by DevTools" Error

For hours now, I've been struggling to make Lighthouse work in Chrome for my initial PWA project. I feel completely lost as nothing seems to be making sense despite the basic code I have included below. The issue arises when I load the page normally ...

javascripthtmlgoogle-chromeprogressive-web-appslighthouse