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

Is there a way to horizontally center a content container in Flutter similar to a "max-width" container in CSS?

Highlight all the written content within the text box

Utilizing v-if and splice on users to select items from v-model

Load the flexslider once the fancybox container is opened

Filtering tables in Angular 6 using checkbox options

Creating a Search Functionality within a Tab Component in Ionic

Activating/Deactivating a button with just a press

Having trouble converting svg to png, thinking it might be due to discrepancies in svg elements

Looking for ways to incorporate both external and internal styling using jQuery and CSS in my template?

What could be causing the issue with the functionality of third-level nested SortableJS drag-and-drop?

I am curious if there is a wysiwyg web editor extension specifically designed for VS2010 available?

"Effortlessly create a disappearing effect for your Bootstrap modal: Fade in upon opening, and instantly

The transparency of the TABLE must only be applied to a specific section

Modify the width measurement from pixels to percentage using JavaScript

Place the border image underneath the div element

Top strategies for efficiently managing the loading of extensive PHP pages using Jquery, Ajax, HTML, and other tools

What is the best way to close all other accordion tabs when selecting one?

Tips for customizing the background color and image of a toaster

Create a function that triggers a fade-out effect on one button when another button is clicked

How to add an 'alt' text tag to a background image sprite