Issues arise with the behavior of Bootstrap design when adapting to different screen sizes, as well as

Question

Issues arise with the behavior of Bootstrap design when adapting to different screen sizes, as well as

I am currently working on designing my personal portfolio using Bootstrap. I have made some progress with the setup, but I am encountering some issues.

When I resize the window, the top menu collapses into a button. However, when I click on the button, nothing happens. The menu should drop down to reveal more options, but it is not functioning as intended, and I am unsure of the cause behind this issue.
The three sections labeled 'I'm an artist' are almost how I want them to be, but there are a few persistent problems. I am aiming to space them out so that on desktop view, they are aligned in a box on the left, center, and right. Additionally, I want these boxes to be centered. On mobile view, I would like the sections (now vertical) to have a slight gap between them, along with a border around each section.

Below is the code snippet:

<!DOCTYPE html>
<html>
    <head>
        <meta charset ="utf-8">
        <Title>"HorrorNerd"</Title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href = "css/bootstrap.min.css" rel ="stylesheet">
        <link href = "css/styles.css" rel ="stylesheet">
    </head>
    <body>

<div class ="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <a href="#" class="navbar-brand">HorrorNerd</a>
            <button class="navbar-toggle" data-toggle="collapse" data-target="navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#">Home</a>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery">Artwork</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown" data-toggle="dropdown">Social Media <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Facebook</a></li>
                                    <li><a href="#">Google+</a></li>
                                    <li><a href="#">Linkn</a></li>
                                    <li><a href="#">Pinterest</a></li>
                                    <li><a href="#">Twitter</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#contact" data-toggle="modal">Contact</a></li>
                    </ul>
                    </div>
                </div>
</div>
<div class="container">
    <div class="row">

        <div class="col-md-4">
                <div class="info">
                <h1>I'm An Artist</h1>
                <p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
                <a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right"  >Visit Gallery</a>
                </div>
        </div>

        <div class="col-md-4">
                <div class="info">
                <h1>I'm An Artist</h1>
                <p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
                <a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right"  >Visit Gallery</a>
                </div>
        </div>

        <div class="col-md-4">
                <div class="info">
                <h1>I'm An Artist</h1>
                <p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
                <a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right"  >Visit Gallery</a>
                </div>
        </div>

    </div>
</div>

<div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <p class="navbar-text pull-left">Site by HorrorNerd.</p>
            <a class="navbar-btn btn-danger btn-sml pull-right">Subscribe on Youtube</a>

        </div>
</div>

<div class="modal fade" id ="contact" role="dialog">
        <div class="modal-dialog">
                <div class="modal-content">
                        <div class="modal-header">
                                <h4>Contact HorrorNerd</h4>
                        </div>

                        <div class="modal-body">
                                <p>This is just a test for now.</p>
                        </div>

                        <div class="modal-footer">
                            <a class="btn btn-danger" data-dismiss="modal">Close</a>
                        </div>

                </div>
        </div>




</div>


<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
    </body>
</html>

html css twitter-bootstrap-3

Answer 1

Answer №1

1.a To fix the issue, remove the navHeaderCollapse and if you want to keep it, make sure to link to an id of navHeaderCollapse in the div with class class="navbar-collapse collapse". However, this may not be the best approach.

1.b It seems like you missed including a

<div class="navbar-header">

in the navbar section and later tried to include that as navHeaderCollapse. Check out my corrected code on how to work with

<div class="navbar-header">

.

2.a Instead of making all columns equal length, I made them 3 equal lengths so you can have the desired space around them. To evenly distribute the remaining space after having 3 columns of equal length, you need to nest the middle column and apply equal space to both sides using offsetting. Refer to Bootstrap's documentation on Offsetting columns, Grid nesting, and Column ordering for guidance.

2.b For a slight gap when the columns stack up, a media query has been included to adjust the CSS rule and remove default padding on the parent column.

2.c To add borders when the columns stack up, relevant CSS rules are added within the media query for achieving this effect.

Consider moving the styles to a separate "css" folder rather than having them within the HTML document.

Don't forget to include the HTML5 shim and Respond.js for IE8 support in the head section for compatibility with Internet Explorer.

I recommend exploring some Bootstrap tutorials to gain a better understanding of how to utilize it effectively. Learning the basics of Bootstrap is valuable and will definitely benefit your future projects.

Check out the updated HTML and CSS below:

<!DOCTYPE html>
<html>
    <head>
        <!-- Head content here -->
    </head>
    <body>

    <style type="text/css">
    /* Custom CSS styles */
    </style>

    <!-- Navbar and grid layout goes here -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

    </body>
</html>

Good luck with your project! If this answer was helpful, please remember to mark it as the correct answer. Thank you :)

Answer 2

1.a To fix the issue, remove the navHeaderCollapse and if you want to keep it, make sure to link to an id of navHeaderCollapse in the div with class class="navbar-collapse collapse". However, this may not be the best approach.

1.b It seems like you missed including a

<div class="navbar-header">

in the navbar section and later tried to include that as navHeaderCollapse. Check out my corrected code on how to work with

<div class="navbar-header">

.

2.a Instead of making all columns equal length, I made them 3 equal lengths so you can have the desired space around them. To evenly distribute the remaining space after having 3 columns of equal length, you need to nest the middle column and apply equal space to both sides using offsetting. Refer to Bootstrap's documentation on Offsetting columns, Grid nesting, and Column ordering for guidance.

2.b For a slight gap when the columns stack up, a media query has been included to adjust the CSS rule and remove default padding on the parent column.

2.c To add borders when the columns stack up, relevant CSS rules are added within the media query for achieving this effect.

Consider moving the styles to a separate "css" folder rather than having them within the HTML document.

Don't forget to include the HTML5 shim and Respond.js for IE8 support in the head section for compatibility with Internet Explorer.

I recommend exploring some Bootstrap tutorials to gain a better understanding of how to utilize it effectively. Learning the basics of Bootstrap is valuable and will definitely benefit your future projects.

Check out the updated HTML and CSS below:

<!DOCTYPE html>
<html>
    <head>
        <!-- Head content here -->
    </head>
    <body>

    <style type="text/css">
    /* Custom CSS styles */
    </style>

    <!-- Navbar and grid layout goes here -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

    </body>
</html>

Good luck with your project! If this answer was helpful, please remember to mark it as the correct answer. Thank you :)

Issues arise with the behavior of Bootstrap design when adapting to different screen sizes, as well as

Answer №1

Similar questions

Tips for centering text in a dijitTextBox:

The CSS styling is not being rendered correctly on the AngularJS HTML page

How can I create an input field that only reveals something when a specific code is entered?

Tips for incorporating a visible HTML comment in JSX code?

Tips for enhancing redundancy in HTML and ROR using partials

Modify CSS to switch body background image when a DIV is hovered

What is the purpose of a form that includes a text input field and a button that triggers a JavaScript function when the enter key is pressed?

How to Align Bootstrap Icons in the Center Horizontally

Is the sliding navigation glitching due to the video background?

Guide on filling accordion with data from Firebase

What is the reason for adding CSS styles to a JavaScript file without importing them?

Building a card carousel component in Vue JS

Tips for wrapping the content of a <span> element within a <td> element

How can we ensure only one click event is executed per element type in jQuery?

Having trouble accessing the input class with jQuery

Experience the sleek transparency when black hues grace the interface on iOS 14 and above

Background cutting off right side of HTML website

Adding HTML content inside an iFrame at a specific cursor position in Internet Explorer

Having trouble showing table data in Angular

How can I modify the color scheme of radio buttons to include a variety of different hues?