Struggling to position elements at the edges in Bootstrap

My goal is to move the elements to the corners of the screen. Despite trying the code below, it doesn't seem to be working as expected.

<!-- Page Footer -->
<footer>
<div class="navbar mt-3 py-3 bg-dark">
  <div class="container">
    <small class="text-white">
    <div class="d-flex justify-content-between">
      <span class="text-white">Copyright &copy; my website 2020</span>
      <a class="text-white" href="{% url 'privacy-policy' %}">Privacy Policy</a>
    </div>
    </small>
  </div>

<footer>

Here is how it currently looks:

I want the Copyright text and Privacy Policy to be spread out evenly along the edges of the screen. https://i.sstatic.net/ef2f4.png

htmlcsstwitter-bootstrapbootstrap-4navbar

Answer №1

<small> is considered an inline element, so it does not expand to the full 100% width. To achieve this, you can use a block-level element such as <div> instead. For more information, refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small

Ensure that the width of the element is set to 100%.

<!-- Page Footer -->
<footer>
<div class="navbar mt-3 py-3 bg-dark">
  <div class="container">
    <div style="width:100%;" class="text-white">
    <div class="d-flex justify-content-between">
      <span class="text-white">Copyright &copy; my website 2020</span>
      <a class="text-white" href="{% url 'privacy-policy' %}">Privacy Policy</a>
    </div>
    </div>
  </div>
</div>
</footer>

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

Issue with VideoJS: MP4 file does not play after dynamically updating video URL

I have been using videoJs to display videos on my website. Below is the HTML code: <video id="player-vjs_html5_api" class="vjs-tech" crossorigin="anonymous" preload="auto" src="http://path-to-video/small.mp4"> <p class="vjs-no-vjs">Your bro ...

javascriptangularjshtmlcoffeescriptvideo.js

Enhance your images with Jquery thumbnail zoom feature

I am in the process of creating color swatches for clothing items, using them as a reference point. http://jquery.malsup.com/cycle/pager7.html Take a look at the thumbnails on the webpage mentioned above. My goal is to display these thumbnails without re ...

jquerycssimage-processing

Switch the class back and forth between fixed-bottom and position-sticky

I am working on making the footer have a class of position-sticky which changes to fixed-bottom when it reaches the end of the page. So far, this is what I have implemented: $(window).on("scroll touchmove", function() { var scrollHeight = $(doc ...

htmlcssbootstrap-4

What is the best way to create a fully clickable navbar item for the Bootstrap dropdown feature?

I'm struggling to make a button in a navbar fully clickable for the dropdown to open. Even when I try adding margin instead of padding, it only makes things worse. Can someone help me figure out what mistake I'm making here? Essentially, my goal ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to split a div diagonally while keeping the border unchanged?

I'm attempting to devise the design displayed in the link below: https://i.sstatic.net/n0ZbB.png I have experimented with the following code: .App { font-family: sans-serif; text-align: center; } #container { height: 300px; width: 300p ...

htmlcss

Is there a way to locate an element within innerHTML using getElementById?

Is it possible to achieve the following code snippet? <div id="parent"> <iframe id="myFrame" title="HEY!" srcdoc="<div id='inner'>Hello World!</div>"></iframe> </div> v ...

javascripthtml

Can the placement of divs impact search engine optimization (SEO)?

My website is currently structured with div containers in the following order: Less important left side bar Less important right side bar The core center content at last I am concerned about the impact on SEO as the core content comes after the sidebars ...

htmlsearch-engineseogoogle-search

Execute script when the awaited promise is fulfilled

I am looking to retrieve the URL of a cat image using the Pexels API through a script, and then set that image link as the source of an actual image element. I attempted to include some loading text to keep things interesting while waiting for the image l ...

javascripthtmlasynchronousasync-await

When a div is floated to the right, it can lead to unexpected outcomes

Here is the code structure in the JSfiddle link below. When I apply float:right to the "Add" text, it creates extra space above the "Quick Links" & "Top 20 Sites" sections. #home-content { padding: 5px; } #home-content .css-table #row1-col3 .col-body { ...

htmlcss

Cover the entire screen with a solid background color and adjust the text size accordingly

I'm encountering two issues. Despite my efforts to adjust multiple containers, the background colour #eee simply won't reach the bottom of the screen. I've even tried setting the HTML height to 100%, but to no avail. Even though I&apos ...

htmlcsstwitter-bootstrap

Executing jQuery AJAX with PHP using 'POST' method to receive and process PHP code

Something seems to have gone wrong with my setup; it was functioning properly before but is now encountering issues. When trying to make a POST call from an HTML file to a php file (which fetches data from a REST API), instead of receiving the expected API ...

javascriptphpjqueryhtmlajax

Tips for transforming a menu into a dropdown menu

Is there a way to convert the current menu into a Dropdown menu? Currently, the menu is not collapsing and it keeps opening. Any suggestions on how to achieve this? Here is an example for reference: https://i.stack.imgur.com/2X8jT.png ar ...

phphtmlcssyii

How can Spring and AngularJS (HTML) work together to retrieve the Context Path?

Currently, I am working with Spring and AngularJS. I haven't encountered any issues displaying my index.html using Spring in the following way: @RequestMapping(value="/") public String index() { return "/app/index.html"; } Is there a way for me ...

htmlangularjsspringjsp

Can an HTML page be created where certain elements cannot be targeted using CSS selectors or XPaths?

To put it differently: Do any HTML structures restrict the selection of elements using CSS selectors? Do any HTML structures restrict the selection of elements using XPaths? Appreciate it! :) ...

jqueryhtmlcssxpath

Retrieve the chosen option from a dropdown menu and transfer it to the submit button in PHP

I have a unique situation where I need to extract and store selected values from two separate drop-down menus generated from arrays. The goal is to pass these selected values in the submit button link. For example, if a user selects "123" for email and "t ...

javascriptphphtmljquery

Combining data using D3's bar grouping feature

I'm currently exploring ways to group 2 bars together with some spacing between them using D3. Is there a method to achieve this within D3? I found inspiration from this example. var data = [4, 8, 15, 16, 23, 42]; var x = d3.scale.linear() .doma ...

javascriptcssd3.js

What could be causing the issue with this jQuery selector for the parent form element?

I created a form that connects a button with an attribute, but it's not hiding the parent("form"). However, when I try this, it works. $($("[editFormContent]").attr("editFormContent")).click(function(e) { e.preventDe ...

javascripthtmljqueryparent

Trouble aligning buttons in Internet Explorer with center alignment

Check out this jsFiddle link using Internet Explorer and another major browser: http://jsfiddle.net/6bv7j/1/ Within the jsFiddle, click on the "Add Question" button to see a new row appear below. This row contains two buttons - one labeled "Select All An ...

jqueryhtmlcss

Wrap the json response in HTML elements

I'm currently learning about AJAX, and I've encountered a major issue that I can't seem to resolve. I pass several variables to PHP, perform various checks there, and then return string values to AJAX. Strangely, I am able to display these r ...

javascriptphpjqueryhtmlajax

Issues arising from the event target

What is the reason behind this code functioning successfully only when the alert function is called? The color changes after closing the alert box, but if the line with the alert command is commented out, nothing happens. function setLinkColor(el) ...

javascriptjquerycss