What is the best way to responsively position a bootstrap button?

Recently diving into the world of CSS and Bootstrap, I encountered an issue with a Bootstrap button on my webpage. Despite my efforts, I couldn't seem to make it responsive to window resizing. It feels like there's a glitch in the code somewhere, but I can't seem to pinpoint it.

body,
html {
  width: 100%;
  height: 100%;
  font-family: "Montserrat", sans-serif;
}

body {
  background-image: url("header.jpg.jpg");
  background-size: cover;
  background-position: center;
}

h3 {
  color: white;
  position: relative;
  top: 200px;
  text-align: center;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited {
  background-color: orangered;
  border-radius: 24px;
  padding: 14px 24px;
  outline: 0 none;
  cursor: pointer;
}

.container {
  position: relative;
}

button {
  position: absolute;
  top: 480px;
  left: 475px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Startup</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="startstyle.css">

</head>

<body>
  <div class="container">

    <h3>THE BIGGEST STARTUP EVENT OF THE YEAR</h3>

    <button type="button" class="btn btn-primary">FIND OUT MORE</button>

  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>

</html>

htmlcssbootstrap-4

Answer №1

Your code has been updated. Please review the changes below:

HTML

    <!DOCTYPE html>
<html>
    <head>
        <title>Startup</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="startstyle.css">
    </head>
    <body>
        <div class="container">
                <h3>THE BIGGEST STARTUP EVENT OF THE YEAR</h3>
        <div class="row p-0 text-center">
        <div class="col-12">
        <button type="button" class="btn btn-primary">FIND OUT MORE</button>
        </div>
        </div>

        </div>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    </body>
</html>

CSS

  body,html {
  width: 100%;
  height: 100%;
  font-family: "Montserrat", sans-serif;
}

body{
    background-image:url("header.jpg.jpg");
    background-size: cover;
    background-position: center;
}

h3{
    color: white;
    position: relative;
    top: 200px;
    text-align: center;
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited{
    background-color: orangered;
    border-radius: 24px;
    padding: 14px 24px;
    outline: 0 none;
    cursor: pointer;

}

.container{
    position: relative;    
}

button{
position:relative;
top: 480px;

}

We hope these modifications are helpful to you.

Answer №2

I have provided the answer you were looking for, take a look at my response.

<!DOCTYPE html>
<html>
<head>
  <title>Startup</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="startstyle.css">
  <style>
  body,
html {
  width: 100%;
  height: 100%;
  font-family: "Montserrat", sans-serif;
}

body {
  background-image: url("header.jpg.jpg");
  background-size: cover;
  background-position: center;
}

h3 {
  color: black;
  position: relative;
  top: 200px;
  text-align: center;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited {
  background-color: orangered;
  border-radius: 24px;
  padding: 14px 24px;
  outline: 0 none;
  cursor: pointer;
}

.container {
  position: relative;
}

button {
  position: absolute;
  left: 0;
  right: 0;
  top: 480px;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
}
</style>
</head>
<body>
  <div class="container">
    <h3>THE BIGGEST STARTUP EVENT OF THE YEAR</h3>
    <button type="button" class="btn btn-primary">FIND OUT MORE</button>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

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

Embarking on the GSAP journey

I'm attempting my first animation using GSAP, but no matter what I try, nothing seems to be working. I've even tried using example code without success. Within my PHP file, I have the following code snippet: <head> <script src="https:/ ...

javascriptjquerycssgsap

Interactive Sidebar Navigation Content

On my website, I have a navigation sidebar that contains links to all of the main site pages. Each page has the same links, except the link to the current page is not included, making it easy to visually identify which page you are on. Currently, I manuall ...

javascripthtml

Code that achieves the same functionality but does not rely on the

I utilized a tutorial to obtain the ajax code below. The tutorial referenced the library jquery.form.js. Here is the code snippet provided: function onsuccess(response,status){ $("#onsuccessmsg").html(response); alert(response); } $("# ...

javascriptjqueryhtmlajaxforms

Maintaining a Multi-page template in PhoneGap: Best practices

I'm a beginner in Hybrid app development, currently using PhoneGap and Jquery Mobile. In my app, I have around 10 separate pages such as login.html, index.html, search.html, etc. My query is whether I should include all JS and CSS files on each indivi ...

jquerycsshtmlcordovajquery-mobile

Prevent web browsers from interpreting media queries

Creating a responsive website has been challenging, especially when it comes to accommodating IE7. I'm considering turning off ALL media queries for just IE7 while maintaining the styling and layout in desktop mode. Is this possible? ...

htmlcssinternet-explorer-7responsive-design

Arranging elements on a website using CSS styling

I'm interested in creating a button <Button id="Button" text="Hey" />. I would like to know how I can position it on a webpage exactly where I want it, rather than it just appearing randomly without content. ...

htmlcss

JQuery ajax fails to trigger the success function

Upon using an ajax request to insert data into the database, I encountered an issue where the button message did not update after the submission was successful. Initially, I set the button text to Please wait... upon click, and intended to change it to Don ...

javascriptjqueryhtmlajaxdom

JSON syntax error: "r" is not a valid token at the beginning position

Currently, I am in the process of developing a web server that is based on STM32 MCU. The workflow involves the browser sending a request to the MCU, which responds with a web HTML file. Users can then adjust parameters and use a form to submit them back t ...

javascriptjqueryhtmljson

Using JQuery toggleclass to add transitioning effects to a :after element

I'm using the toggleClass function to add the class .expend to a div with an ID of #menu, which increases the height of the menu from 100px to 200px with a smooth transition effect. I also have a pseudo-element #menu:after for aesthetic purposes. My ...

javascriptjqueryhtmlcss

Generating a downloadable picture with jQuery freeze frame

If you're looking to add animation to a gif upon mouseover, the Freezeframe plugin created by Chris Antonellis is the perfect solution. Simply use the command below: < img src="image.gif" freezeframe /> For a live example, visit his website he ...

jqueryhtmlcss

The Jquery click event is not triggering when clicked from a hyperlink reference

I have a specific HTML href in my code snippet: <a id="m_MC_hl6_8" class="no_loaderbox button_link inline_block " href="somelink" target="_self">link</a> Upon clicking this link, a waiting box is displayed on the page. However, I don't ...

javascriptjqueryhtml

Ensuring consistent column heights in Bootstrap across all devices

There is an HTML element containing an image and text positioned side by side using Bootstrap. Here is the code: <div class="row"> <div class="col-md-6"> <div class="avatar"> <img src="<?= get_template_directory_uri(); ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to retrieve content in tinymce from a JSP file and send it to a servlet that then redirects to a different page

I need guidance on how to store the content from the tinymce editor and post it with a new page creation. What steps should I take? ...

jqueryhtmlajaxjspservlets

Easily style Angular directives (whether they are custom or built-in) using the native handle for CSS

In my Angular application, I have directives set up as follows: <!doctype html> <html lang="en" ng-app="cfd"> <head> ... </head> <body> <div class="container"> <!-- Header --> <div ...

htmlcssangularjsangularjs-directive

Dynamically insert innerHTML content into table rows using JavaScript in PHP is a fantastic way to customize

Having trouble with innerHTML in this scenario, looking to achieve something along these lines: <table width="100%" border="0" id="table2"> <?php include("connection.php"); $sql=mysql_query("select* from b1"); while($res=mys ...

javascriptphphtmldominnerhtml

Wrapping a table within an article element

My coding structure appears as follows: <article> <header> <hgroup> <h1>Foo </h1> <h2>Bar</h2> <h3>1337</h3> </hgroup> </header> <table> ...

htmlcss

Styling containers with Pandoc

Currently, I am utilizing Pandoc for the purpose of transforming Pandoc Markdown documents into HTML5 documents. Within my md input, I incorporate custom divs by employing a special Pandoc syntax, like so: ::: Resources A nice document Informative website ...

htmlmarkdownpandoc

What is the best way to extract a JSON object from a website search using getJSON or similar techniques?

Can anyone provide guidance on utilizing .getJSON() to access JSON-encoded information from a website that is being searched? I've implemented a Google Custom Search API for my site with the aim of retrieving the JSON file from the search results. Fo ...

javascripthtmljsongoogle-search-api

The "placeholder" attribute effectively populates the form input in HTML, but when using Angular 2+, the "value" attribute does not fill the input field as expected

Within my Angular UI, I have implemented an edit button that allows users to transform a member's name heading into a form for editing and updating the name. The challenge lies in ensuring that the form is pre-filled with the current name. My issue a ...

htmlangular2-formsplaceholder

Trying to align a Material UI button to the right within a grid item

I'm attempting to right float the button below using material-ui, but I'm unsure of how to achieve this: <Grid item xs={2}> <Button variant="contained" color="secondary&quo ...

cssreactjsbuttonmaterial-ui