I'm trying to make my footer stretch to fit the default container width from bootstrap. Even though it's inside a row, which is inside the container tag, it still stretches to fill the entire screen width.
Is there a way to prevent this?
You can see it in action here: https://codepen.io/jcrr1985/pen/wRKdzL
The footer should be placed outside the container class to resolve the issue. Additionally, consider using the <footer> tag instead of a div with a class .footer for defining the page footer. It's always advisable to utilize semantic tags whenever possible.
body{
background-color: #E4E4E4;
}
.navbar-brand{
font-weight: bold;
}
.form-inline input,button{
font-size: 13px!important;
}
.barraNav{
border: 1px solid black;
}
.section1Title{
font-size: 26px;
}
.edit{
background-color: #0066FF;
border: 1px solid #00CCFF;
padding: 5px 8px;
border-radius: 7px;
}
.footer{
padding: 10px;
background-color: #666666;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/css/tether.min.css" />
<!--bootstrap.min.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<!--jquery.min.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<body ng-controller = "evalController">
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12">
<div class="barraNav">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
<img src="logo.png">
</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Buscar usuarios" aria-label="Buscar usuarios">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Nuevo usuario +</button>
</form>
</div>
</nav>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12">
<div class="section1">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link section1Title" href="#"><strong>LISTA DE USUARIOS</strong>
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Buscar usuarios" aria-label="Buscar usuarios">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Nuevo usuario +</button>
</form>
</div>
</nav>
</div>
</div>
</div>
<div class="row section2">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Nombre de Usuario</th>
<th scope="col">Cargo</th>
<th scope="col">E-mail</th>
<th scope="col">edit</th>
<th scope="col">Password</th>
<th scope="col">Del</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td><button class="edit"><i class="fas fa-pencil-alt"></i></button></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td><button class="edit"><i class="fas fa-pencil-alt"></i></button></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td><button class="edit"><i class="fas fa-pencil-alt"></i></button></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<footer class="row footer">
<div class="col-12 col-sm-12">
<span>© 2018</span>
</div>
</footer>
</div>
</div>
<!--Tether.min.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>
<!--bootstrap.min.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>Is it possible to vertically center any element in the middle of an input using Bootstrap 4 without a complex structure? The first example at https://jsfiddle.net/fekula/8j4ew5df/9/ looks good, but the second and third examples are not ideal. <div clas ...
I need to check if an item is due based on its date. When a user creates an item with a date in the format MM/DD (e.g., 06/15), I want to determine if that date falls within the next 30 days, turning it red, within the next 60 days, turning it orange, or g ...
As someone who is new to learning, I am currently struggling with styling a button on my website. No matter what I try, it remains a white rectangle with just a border and some text. I have included the code for reference. Any help or advice would be great ...
How can I effectively utilize pseudo-classes while adhering to the principles of BEM methodology? I'm facing a specific challenge with creating a custom checkbox functionality. Normally, I would use the input:checked + label selector. However, when t ...
Having trouble getting the div with class .txtpodscroll to scroll? It seems like there might be an issue with nested DIVs or something missing in the code. The scrollbar appears, but it won't actually scroll. Here's the CSS rule applied to the DI ...
I am trying to create a file upload field within a transparent div sized at 150px x 150px. The goal is for the file dialog box to pop up when any part of the div is clicked, allowing the user to select a file for upload. Despite my attempts, I haven't ...
My HTML page is equipped with a toggle button that has its own CSS properties, but I am facing an issue where the size and length of the toggle button are not aligning with the initial position set. https://i.sstatic.net/HVFY8.png Upon toggling the butto ...
http://jsfiddle.net/d1zqsayh/ (Strange issue not appearing on jsfiddle, very odd) When I modify the padding in the .css file at line 41 from 10px 18px; to 10px 17px;, I notice a difference in how the content is displayed on my screen in both Google Chrome ...
Experiencing significant discrepancies in text rendering between Chrome and Firefox. Chrome appears to apply anti-aliasing rules that reduce the text size considerably. Attempts have been made to adjust -webkit-font-smoothing, letter-spacing and word-spac ...
Currently, I am studying Scss and experimenting with creating an Image gallery using SASS. I am attempting to utilize only one div tag for the entire image gallery as a row, avoiding the need for a new div for each row. Would it be feasible to achieve th ...
As newcomers to mobile technology, we now have our HTML5 page operational with PHP. Our next step is to transition to mobile. Whether it's through a native app or mobile web, the specific platform doesn't matter in our current situation. What we ...
I integrated CSS and HTML code into the CSS and PHP sections of a Wordpress theme to showcase a button at the bottom center specifically on mobile screens. The button appears correctly in testing but ends up completely out of sight on actual mobile devices ...
Hey there, I'm trying to figure out how to keep dropdown content from disappearing when using @mouseenter and @mouseleave. Here's what I have so far: <div class="wrapper"> <div class="link" @mouseenter="show = ...
After starting to work with the ionic framework, I noticed a significant change in performance when testing an android app on Chrome for the first time. It was fast and responsive until I added a button that led to a screen with navigation bars, side men ...
I need assistance with creating a download link using the anchor tag in my code. However, the link is not working as expected and the image is not displaying either. <td><img src="{{book.book_image}}" alt="{{book.name}}" width= ...
As a beginner with no Js knowledge, I am trying to achieve a specific function. I want to be able to change the color of text when it is clicked, but also have the previously clicked text return to its original color. <div class="mt-5 fi ...
Issue I am attempting to replicate the layout depicted in the image below. The black area represents the body with id="library", the grey div is id="body" (which is not visible due to lack of margins for inner divs), the light blue div is id="sideBar", th ...
Question: My goal is to create a specific animation on my website. When loading the page on mobile, I want to display the div with ID "sub-header", but once the user scrolls more than 50px down, I want to hide it. Additionally, if the user scrolls up by 60 ...
I have created a card-like component in my HTML with text inside. My issue is that when I resize the page, the card shrinks but the text overflows. Currently, I am using Bootstrap 5 and its h4 class like this: <div class="card bg-white"> ...
I created a button that when clicked, displays a table containing actors. I have named them as follows: <button class="actors">Show actors</button> <table class="actors">...</div> Next, I want to style and access them in my CSS (a ...