Vertical Alignment Challenge in Bootstrap Container

I'm struggling with formatting my simple website. I have a navbar, footer, and a centered container where I want to display text and buttons. However, I can't seem to get the elements to appear on separate lines - I want the text on one line and the buttons on the next.

Also, I'm not sure if I've correctly centered the welcome container. If you see any issues, please let me know.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Home</title>

        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" rel="stylesheet" >
        <link href="assets/css/style.css" rel="stylesheet">
    </head>

    <body>
        <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar bg-dark">
            <a class="navbar-brand mr-0 mr-md-2" href="./">Website</a>
            <div class="navbar-nav-scroll">
                <ul class="navbar-nav bd-navbar-nav flex-row">
                    <li class="nav-item">
                        <a class="nav-link" href="./">Home</a>
                    </li>
                </ul>
            </div>
        </header>

        <main>
            <div class="container-fluid welcome-container">
                <div>Welcome to the website!</div>
                <br/>
                <a class="btn btn-dark" href="./">Button 1</a>
                <a class="btn btn-dark" href="./">Button 2</a>
            </div>
        </main>

        <footer class="footer bg-dark">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="text-center text-white">Footer</div>
                    </div>
                </div>
            </div>
        </footer>

        <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
}

.welcome-container {
    min-height: 80%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-flex-pack: center;
}

If you can offer any assistance, I would greatly appreciate it. Thank you in advance.

htmlcssbootstrap-4

Answer №1

html {
    position: relative;
    min-height: 100%;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
}
<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <title>Home</title>

            <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" rel="stylesheet" >
            <link href="assets/css/style.css" rel="stylesheet">
        </head>

        <body>
            <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar bg-dark">
                <a class="navbar-brand mr-0 mr-md-2" href="./">Website</a>
                <div class="navbar-nav-scroll">
                    <ul class="navbar-nav bd-navbar-nav flex-row">
                        <li class="nav-item">
                            <a class="nav-link" href="./">Home</a>
                        </li>
                    </ul>
                </div>
            </header>

            <main>
                  <section class= "jumbotron text-center">
                <div class="container">
                    <p>Welcome to the website!</p>
                    <p>
                    <a class="btn btn-dark" href="./">Button 1</a>
                    <a class="btn btn-dark" href="./">Button 2</a>
                    </p>
                </div>
                </section>
            </main>

            <footer class="footer bg-dark">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="text-center text-white">Footer</div>
                        </div>
                    </div>
                </div>
            </footer>

            <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        </body>
    </html>

Validate this solution

 <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8"
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <title>HomePage</title>

            <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" rel="stylesheet" >
            <link href="assets/css/style.css" rel="stylesheet">
        </head>

        <body>
            <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar bg-dark">
                <a class="navbar-brand mr-0 mr-md-2" href="./">MyWebsite</a>
                <div class="navbar-nav-scroll">
                    <ul class="navbar-nav bd-navbar-nav flex-row">
                        <li class="nav-item">
                            <a class="nav-link" href="./">Home</a>
                        </li>
                    </ul>
                </div>
            </header>

            <main>
                  <section class= "jumbotron text-center">
                <div class="container">
                    <p>Welcome to our site!</p>
                    <p>
                    <a class="btn btn-dark" href="./">Click Here</a>
                    <a class="btn btn-dark" href="./">Then Here</a>
                    </p>
                </div>
                </section>
            </main>

            <footer class="footer bg-dark">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="text-center text-white">End of Page</div>
                        </div>
                    </div>
                </div>
            </footer>

            <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+Mrecords@123" crossorigin="anonymous"></script>
        </body>
    </html>

Answer №2

I received support from a buddy on this issue. It was as simple as moving the welcome container's contents into its own division and applying a centered text-align class to it.

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

The CSS for a VueJS compiled app seems to fail to apply properly unless manually copied and pasted into the browser's style editor

After compiling my vuejs app with npm run build, I noticed that the CSS does not display when viewing it in Firefox. Surprisingly, the styles do load in the network tab and appear under the style editor, but with "0 rules". However, everything displays fin ...

cssvue.js

What is the best way to allocate a unique color to every item within an array?

I've been working on some JavaScript code that pulls a random color from a selection: const colors = [blue[800], green[500], orange[500], purple[800], red[800]]; const color = colors[Math.floor(Math.random() * colors.length)]; Within my JSX code, I ...

javascriptcssreactjscolors

What could be causing the tooltip to appear in the wrong position

It may seem like a trivial issue, but I am struggling to get my tooltips to display in the correct position. No matter what I try, they always appear off position. I have searched for solutions and attempted to rearrange the order of scripts, add new scri ...

javascriptjqueryjquery-uibootstrap-4popper.js

Alignment issue with text in Vuetify Datatables cells

I'm experimenting with Vuetify on my Laravel Vue application, and everything seems to be working fine except for the DataTables styles. The padding of the cells is not vertically center aligned as expected. Here's a screenshot https://i.sstatic.n ...

cssvue.jsbootstrap-4vuetify.js

Ways to expand logo space within the header of the Twentysixteen Theme on WordPress

I am facing an issue with my logo being resized to a much smaller size of 200px even though it is originally over 2000px wide. In the style.css file, I found the following code: .custom-logo { max-width: 180px; } Despite changing the max-width value t ...

phpcsswordpress

Error: content within v-html directive not displaying as expected

The v-html content is not rendering correctly for me. Interestingly, when I remove the v-html in the first list item, it works fine. Take a look at my code below: <div> <br> <li v-html="`a`"> <ul> <li ...

htmlvue.js

PHP's 'include' function is now being ported into modern Javascript as a new method

As the library of JS frameworks continues to expand, I'm wondering if there is a simple JS replacement or alternative for PHP's 'include' function. Is PHP include still a relevant method for including chunks of code, or are there better ...

javascriptphphtmlframeworksinclude

The problem of removing issue divs persists despite Jquery's efforts

Just yesterday, I successfully created a Commentbox using PHP, HTML, and ajax. The beauty of the ajax part is that it allows me to delete a comment without having to refresh the page. To achieve this, I assign a unique id to each comment (div) through the ...

javascriptphpjqueryhtmlajax

Ensuring the text remains positioned above another element constantly

Looking to have the text float above a regular box and resize the font size accordingly? Here's what I've tried: https://jsfiddle.net/a87uo3t2/ @import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono'); body { margin: ...

htmlcss

Guide to verifying a value within a JSON object in Ionic 2

Is there a way to check the value of "no_cover" in thumbnail[0] and replace it with asset/sss.jpg in order to display on the listpage? I have attempted to include <img src="{{item.LINKS.thumbnail[0]}}"> in Listpage.html, but it only shows the thumbna ...

javascripthtmltypescriptionic-frameworkionic2

What is the most effective way to utilize a loop in order to generate a comma-separated list of values that does not contain an additional comma

Using @for to generate multiple box-shadow arguments: .myclass { $bxsw : ""; @for $i from 1 through 10 { $bxsw : $bxsw + " -" + $i + "px -" + $i + "px " + brown + ","; } box-shadow: #{$bxsw}; } This results in: .myclass { bo ...

csssass

Is the Foundation Orbit image slider experiencing technical difficulties?

Hey there, I've been experimenting with Foundations Orbit media container to create an autoplay image slider using HTML and CSS. While I'm more comfortable with HTML/CSS than JavaScript, I have struggled to find a simple and cost-effective soluti ...

htmlcsszurb-foundation

I am facing difficulties displaying the egin{cases}…end{cases} equation using Jekyll's MathJax

MathJax is used on our course website. We have implemented MathJax in Jekyll and hosted it on GitHub pages. While MathJax works well for simple equations, I have faced difficulties with more complex ones. Despite spending hours investigating and experiment ...

javascripthtmlmarkdownjekyllmathjax

Arrange the buttons within the container

I'm struggling with the front-end development side of things (HTML, CSS, etc.) and need help aligning buttons within a container. The container will include a heading and multiple buttons. Any assistance would be greatly appreciated! Thank you in adv ...

htmlcss

Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right

It seems like the issue lies with div.ü and div.yayın, as they are causing overflow on the right side of the page. When these elements are removed, the overflow issue goes away. Are there different positioning codes that can be used to prevent this? d ...

htmlcss

Creating distinct web addresses for various sections of vue.js pagination

I've implemented pagination using vue.js for my website's gallery. However, I'm facing an issue where the URL doesn't change when navigating through pages and upon page refresh, it always resets to page 1. My goal is to have the URL ref ...

javascripthtmlvue.jspagination

Load a page from a different domain using uframe

Looking for a solution to successfully load an external URI using uFrame. Currently encountering an "Access Denied" issue when attempting to do so on Firefox. Any suggestions? ...

javascripthtmluframe

Change the background color according to the user's input text

I want to create a text box where users can input color keywords like blue, lime, or black. When they click submit, I want the background color of the page to change accordingly. This is what I have so far: <label for="color">Color: </label> ...

javascripthtmlcss

Using BeautifulSoup to Retrieve JPEG from an Image Tag's Src Attribute

Struggling with scraping this webpage for personal use. I am having trouble extracting the thumbnails of each item on the page. Despite being able to see image tags containing the required .jpgs when using "inspect" to view the html DOM, I cannot find the ...

javascriptpythonhtmlweb-scrapingbeautifulsoup

I encountered a height discrepancy when attempting to style an unordered list to resemble a table

I have created a set of ul lists that appear as a 2-column table, just as I needed. However, an issue arises when the content of any list increases. The problem is that equal height is not being applied, causing the table to look broken. Here is my Fiddle ...

htmlcss