Question 298895 in Html Question posted in
Some basic documentation can be found here.

Html – How to make a rounded top margin in footer using bootstrap?

I want to make a footer rounded at top left and right corners. I’m using inline style currently to check if everything working fine.
But it’s not working to make it look rounded.
I’m using Bootstrap 5 and custom inline style.
This is my code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    
</head>
<body>
    <div class="container">

        <!--HEADER-->
        <header class="row">
            <nav class="navbar navbar-dark bg-primary fixed-top col-12" style="border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;">
                    <h1 class="navbar-brand mb-2 mt-2 h1 mx-auto text-center">XYZ</h1>
            </nav>
        </header>
        <!--HEADER-->

        <!--CONTENT-->

        <!--CONTENT-->
        

        <!--FOOTER-->
        <footer class="fixed-bottom bg-primary row text-center" style="border-top-right-radius: 10px; border-top-left-radius: 10px;">
          <div class="col-md-6 text-center">
            <a href="/privacy" class="text-decoration-none text-dark hover:text-primary">Privacy Policy</a>
          </div>
          <div class="col-md-6">
              &copy; XYZ 2023
          </div>
        </footer>
        <!--FOOTER-->
    </div>

</body>
</html>
Tags:

2

Answers


  1. 0

    You’re not seeing the rounded corders because the row has negative margins. Instead place the row inside the footer…

    https://codeply.com/p/3p1DdoBjNX

       <footer class="fixed-bottom bg-primary text-center" style="border-top-right-radius: 10px; border-top-left-radius: 10px;">
        <div class="row">
            <div class="col-md-6 text-center">
                <a href="/privacy" class="text-decoration-none text-dark hover:text-primary">Privacy Policy</a>
            </div>
            <div class="col-md-6"> &copy; XYZ 2023 </div>
        </div>
   </footer>
    Login or Signup to reply.
  2. 0

    To create a rounded top margin in a Bootstrap footer, you can use custom CSS to apply styling. Here’s an example of how you can achieve this:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* Custom CSS for rounded top margin in footer */
    .custom-footer {
      margin-top: 20px; /* Adjust the margin as needed */
      border-top-left-radius: 20px; /* Adjust the radius as needed */
      border-top-right-radius: 20px; /* Adjust the radius as needed */
      background-color: #f8f9fa; /* Optional: Set a background color */
      padding: 20px; /* Optional: Add padding for better appearance */
    }
  </style>
  <title>Rounded Top Margin in Footer</title>
</head>
<body>

  <div class="container">
    <!-- Your content goes here -->

    <!-- Bootstrap footer with custom styling -->
    <footer class="custom-footer">
      <p>&copy; 2023 Your Website</p>
    </footer>
  </div>

  <!-- Bootstrap JS and Popper.js are required for Bootstrap components -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

    In this example:

    1. I’ve added a custom class (custom-footer) to the footer element.
    2. Applied a top margin to create space between the content and the footer.
    3. Used border-top-left-radius and border-top-right-radius to create rounded corners at the top.
    4. Added a background color and padding for better styling. Adjust these properties according to your design preferences.

    Feel free to customize the values in the CSS according to your design requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search