Tips for creating a full-screen gradient using Bootstrap and CSS

I am currently working on creating a full-screen gradient effect for a landing page. I am using bootstrap and have encountered an issue where using an HTML tag in the CSS file covers the screen below the content, while using the body tag covers all of the content instead.body tag gradient cover screenshot

/* Title Section */

#title {
  padding-top: 22%;
}

h1 {
  text-align: center;
  font-size: 60px !important;
}

.title-buttons {
  padding-top: 2%;
}

.title-btn1 {
  margin-left: 35%;
}

.title-btn2 {
  float: right;
  margin-right: 35%;
}

body {
  background-color: #FF3CAC;
  background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
  min-width: 100%;
  min-height: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Alec Klem</title>
  <link rel="stylesheet" href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/css/style.css">
  <!-- Bootstrap MDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>

<body>

  <section id="title" class="">
    <h1>Which website would you like to see?</h1>
    <div class="title-buttons">
      <a href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/professional.html"><button type="button" class="btn btn-light btn-lg title-btn1">Professional</button></a>
      <a href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/educational.html"><button type="button" class="btn btn-light btn-lg title-btn2">Educational</button></a>
    </div>
  </section>
  <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>

</html>

The code displayed is not yet responsive, but when viewed fullscreen it should resemble the provided screenshot. How can I adjust the code to ensure the gradient fills the entire screen?

htmlcssbootstrap-4gradient

Answer №1

It is recommended to utilize height:100vh instead of 100%. 

/* Styling for Title Section */

#title {
  padding-top: 22%;
}

h1 {
  text-align: center;
  font-size: 60px !important;
}

.title-buttons {
  padding-top: 2%;
}

.title-btn1 {
  margin-left: 35%;
}

.title-btn2 {
  float: right;
  margin-right: 35%;
}

body {
  background-color: #FF3CAC;
  background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
  min-width: 100%;
  min-height: 100vh;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Alec Klem</title>
  <link rel="stylesheet" href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/css/style.css">
  <!-- Bootstrap MDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>

<body>

  <section id="title" class="">
    <h1>Which website would you like to see?</h1>
    <div class="title-buttons">
      <a href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/professional.html"><button type="button" class="btn btn-light btn-lg title-btn1">Professional</button></a>
      <a href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/educational.html"><button type="button" class="btn btn-light btn-lg title-btn2">Educational</button></a>
    </div>
  </section>
  <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 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

Cease the automatic redirection of the contact form

Hey there, I'm currently working with this contact form: HTML <form action="mail.php" method="POST"> <p>Team Name</p> <input type="text" name="name"> <p>Your Email</p> <input type="text" name="email"> <p& ...

phphtml

The resizing issue persists with Angularjs charts

I have recently developed a small web application using AngularJS and I have implemented two charts from the AngularJS library - a bar chart and a pie chart. Although both charts are rendering correctly, they are not resizing properly as the display size c ...

javascripthtmlcssangularjsangular-chart

Using Bootstrap 4 to Directly Link to a Specific Tab

I am working on a Wordpress website with Bootstrap 4 tabs and I need to create a link that will take users to a specific tab from another page: In the index.php file: <a href="<?php echo get_site_url(); ?>/services/#innovation">Discover More& ...

javascriptjquerywordpresstwitter-bootstrapbootstrap-4

Assess how my website is displayed to an algorithm

A website can be accessed not just by a user through a browser, but also by programs, bots, and crawlers. I have a website hosted on Google App Engine with Python that features non-static HTML pages generated by a Python program by manipulating strings. Th ...

pythonhtmlgoogle-app-enginebrowsersearch-engine

Conceal certain tables within a container

On my SharePoint page, I have the following HTML structure: <div id="ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView"> <table cellspacing="0" cellpadding="0" style="border-width:0;"> <table cellspacing="0" cellpadding="0" style="border-width: ...

htmlcss

Tips on activating the CSS style while typing using the onChange event in React

Is it possible to dynamically adjust the width of an input as we type in React? Currently, my input has a default width of 1ch. I would like it to increase or decrease based on the number of characters entered, so that the percentage sign stays at the end ...

javascriptcssreactjs

My goal is to generate four HTML buttons that trigger specific functions: addition, subtraction, multiplication, and division

I am currently learning JavaScript, and I am facing some challenges with my assignment. The task is to create four buttons in HTML that trigger different functions - addition, subtraction, multiplication, and division. The goal is for the user to input two ...

javascripthtmlbuttononclickcalculator

What is the optimal nesting sequence of <a/> and <h1/> in HTML?

When nesting <a> and <h1> elements in HTML, is there a preferred order? For example: <a href="www.example.com"><h1>Example!</h1></a> or <h1><a href="www.example.com">Example!</a></h1> ...

htmlxhtml

Why am I receiving information about every single hero in the game?

When I click on "show more," I want to see the details of a specific hero instead of getting all hero details at once. Here are my favorite heroes: <ul *ngFor ="let item of acts;let i =index;"> <li>{{item.name}} `` < ...

htmlangulartypescript

Scraping the web using Python for HTML data retrieval

I'm working on a Python program to retrieve the card sub-brand and brand based on a card BIN number. The URL for this information is: . The code snippet below fetches the card type from the page. page = requests.get('https://www.cardbinist.com/s ...

pythonhtmlweb-scraping

Is there a more efficient method for submission? I wonder if there is an optimal approach for this task

Here is my existing code snippet: CSS: .submitorder { background-image: url('https://www.amleo.com/images/art/PON1.jpg'); width: 205px; height: 52px; font-size:0px; } .submitorder:hover { background-image: url('https://www.amleo.com/image ...

htmlcssforms

Ways to obtain the ID of the following element using jQuery

Here is some HTML code, and I am trying to retrieve the ID of the next element from a clicked element with the class name "coba" or to get the ID of an element with the class name "coba2." <div class="dropdown"> <label>Category</label> ...

javascriptjqueryhtml

Only CSS creates tooltips within text seamlessly without any line breaks

I have been exploring ways to incorporate multiple tooltips into text on my website. After experimenting with both span and div tags, I was able to create a tooltip using CSS only. However, I am facing challenges with positioning the tooltiptext correctly. ...

htmlcss

How is the Menu being populated?

I've been tasked with updating a website that was originally created by someone else. I am currently having trouble locating where I can make changes to the menu. The website in question is located at . The navigation.php file below is responsible for ...

phpcsssqlmenucontent-management-system

What is the best way to switch the visibility of a div on click from another div?

My goal is to make a div toggle visible or hidden when another div is clicked. The only connection between the two divs is that they are both nested within the same parent div. There's a DIV element with the class of "comment" which contains a DIV ele ...

javascriptjqueryhtmlcss

Two liquid level divs within a container with a set height

I hesitated to ask this question at first because it seemed trivial, but after spending over 3 hours searching on stackoverflow and Google, I decided to give it a shot. The issue I'm facing can be found here: http://jsfiddle.net/RVPkm/7/ In the init ...

javascripthtmlcss

The styling of Bootstrap collided with my CSS

While working on my web development project, I encountered an issue with the navigation bar. My friend was responsible for creating the nav bar, but when I integrated his code into my website, it clashed with Bootstrap and caused display errors. I tried va ...

htmlcsstwitter-bootstrap

Troubleshooting: CSS calc function not functioning properly in Firefox

My goal is to dynamically adjust the widths of td elements in my table. This functionality works smoothly in Chrome and Safari, but not in Firefox. Check out the fiddle here Here is the HTML structure: <table border="0" cellspacing="0" cellpadding="0 ...

htmlcsscalculated-columnscalc

Aligning Text and images perfectly in a DIV container, and beyond

I am trying to center or align text and images at the bottom of a couple of tags, but vertical-align doesn't seem to be cooperating. Another challenge I have is creating a horizontal menu with a start image (e.g. menutop.png), followed by a filler ( ...

csshtml

The function FormData.append("parameter", "data") seems to be malfunctioning

Could you please help me figure out what's going on here: var formdata = new FormData(); formdata.append("key", "value"); console.log(formdata); My output is not displaying the expected "key" - "value" pair. FormData *__proto__: FormData **append: ...

javascripthtmlform-data