Guide to creating an inline form that spans the entire width below the navbar logo within the "navbar" component

I'm new to working with bootstrap and trying to create an inline form in the navbar next to the navbar-brand. However, as I resize the window, the form ends up below the navbar-brand link and doesn't align properly, making it look awkward. Can someone please point out where I might be making a mistake? Here's the complete HTML code snippet, Bootstrap 101 Template

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <div class = "navbar navbar-inverse navbar-fixed-top"><!--style = "background-image: url('Images/logo.png'); background-size: contain; background-repeat: repeat;"-->
        <div class = "row">
            <div class = "navbar-header col-lg-4 col-sm-12 col-xs-12 pull-left" style = "background-color: red; height: 100%;">
                 <a class = "navbar-brand" href = "#">JanaSena Party</a>
                 <button class = "navbar-toggle pull-right" data-toggle = "collapse" data-target = ".navHeaderCollapse">JSP</button>
            </div>
            <div class = "collapse navbar-collapse navHeaderCollapse col-lg-8 col-xs-12 pull-right" style = "background-color: green;">
                <form class="navbar-form" role = "form" style = "margin: 0; width: 100%; background-color: blue;">
                    <div class="form-group">
                        <label class="control-label">Username</label>
                        <input type="text" class="form-control" placeholder="Enter Username">
                    </div>
                    <div class="form-group">
                        <label class="control-label">Password</label>
                        <input type="password" class="form-control" placeholder="Password">
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> Remember me
                        </label>
                    </div>
                    <button type="submit" class="btn btn-default navbar-btn">Sign in</button>
                </form>
            </div>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

Answer №1

Check out this Bootply : http://www.bootply.com/129780

Cascading Style Sheets (CSS) for the design are as follows:

.navbar-header{
   float:none;    
  }

  .navHeaderCollapse{
     width:100%;      
    }

The HTML code is provided below:

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="row">
            <div class="navbar-header col-lg-4 col-sm-12 col-xs-12" style="background-color: red; height: 100%;">
                 <a class="navbar-brand" href="#">JanaSena Party</a>
                 <button class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navHeaderCollapse">JSP</button>
            </div>
            <div class="collapse navbar-collapse navHeaderCollapse col-lg-8 col-xs-12" style="background-color: green;">
                <form class="navbar-form" role="form" style="margin: 0; width: 100%; background-color: blue;">
                    <div class="form-group">
                        <label class="control-label">Username</label>
                        <input type="text" class="form-control" placeholder="Enter Username">
                    </div>
                    <div class="form-group">
                        <label class="control-label">Password</label>
                        <input type="password" class="form-control" placeholder="Password">
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> Remember me
                        </label>
                    </div>
                    <button type="submit" class="btn btn-default navbar-btn">Sign in</button>
                </form>
            </div>
        </div>
    </div>

UPDATE: Check out the updated version on Bootply here - http://www.bootply.com/129808

CSS media queries for responsive design:

@media screen and (max-width:992px){

.navbar-header{
   float:none; 

  }

  .navHeaderCollapse{
     width:100%;
    float:left;

    }

}

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

Command-sending ASP page on Android browser controlling a Windows PC

I'm curious about how I can send commands, such as 1, 2, 3, etc., from a web app (classic ASP/ASP.NET) on my Android web browser to a Windows computer on the same LAN network. I want to create a web page with buttons that can act as an instant messeng ...

Is there a way to utilize jQuery to redirect to the href included in the HTML attachment?

I am looking to add a redirection feature to my website using the href provided in the code by jQuery. This will be done after playing an animation for better user experience. $(document).ready(function(){ $("a").click(function(event){ event.prev ...

The issue arises when I try to retrieve information from MySQL using Ajax, as it appears

I am currently working on developing an ecommerce website. In order to display products, I am fetching data from a database. My goal is to allow users to add products to their cart without having to refresh the page. I have attempted to use AJAX for this ...

Issue with adding HTML content to bootstrap modal not functioning as expected

Having trouble displaying an image in a bootstrap modal by using data- attribute within a php foreach loop. The image doesn't seem to appear in the target div. Here's my code snippet: <script> $(document).ready(function(){ $( ".subscri ...

Building a sleek grid similar to Pinterest in Bootstrap v4.0 without relying on jQuery (using a black color scheme with equal width and varying height)

Is it feasible to craft a grid similar to Pinterest using Bootstrap 4? I am aware of the jQuery plugins that can be used, but is there a way to achieve this purely with CSS? Note: This is not a duplicate question. Please try to comprehend my query first ...

JavaScript appending checkboxes to a list not functioning as expected

I have not been using jQuery, JavaScript, and HTML to create a list of products. The task I am working on now is the ability to select multiple items from this list. Currently, the HTML list is dynamically populated with <li> elements using JavaScri ...

CSS Color-Range Conditional Styling

I am interested in creating a simple chart using divs and spans, with the goal of implementing conditional formatting on each column based on its value to determine height. I have been struggling with figuring out how to make it work similar to Excel' ...

If you click outside of a Div element, the Div element will close

I am looking for a way to implement a function that will hide a specific div when I click outside of its area. The div is initially set to Position: none and can be made visible using the following function: Div Element: <div id="TopBarBoxInfo1" oncli ...

jQuery live event not triggering on window resize and scrolling

I'm having trouble getting the console.log to work on resize and scroll events. I am certain that jQuery 1.7 is loaded. <script> $(window).live('scroll resize', function () { console.log('am i working?'); }); </scrip ...

Error in HTML Sorting

I've been experimenting with some code from this fiddle: http://jsfiddle.net/kutyel/5wkvzbgt/ but when I copy it into Notepad++ and run it, it only displays: <html> Id: {{result.id}} Product: {{result.name}} Price: {{result.price | currency} ...

Space constraints within an li element

Is there a solution to resolve the unusual impact of margins/paddings? Check out this example on jsfiddle: jsfiddle. Here is the screenshot of the issue: i.imgur.com/64S8C.jpg. I want to eliminate any margins/paddings in the li element. ...

Does jQuery's click event not successfully hide an element on Internet Explorer?

In my dropdown menu, I have the following options: <div class="my_div"> <select name="selection" id="select_id"> <option value="0">A</option> <option value="5">B</option> ...

React Material Design Cards for Responsive Layouts

Hi there, I am currently navigating my way through Material Design and attempting to ensure that the cards section is responsive by utilizing media queries and flex. However, I have encountered an issue where only a portion of the image is displayed when t ...

Tips for Aligning Pagination at the Center in jQuery Bootstrap DataTables Extension

I am currently utilizing jQuery's DataTables plugin in conjunction with Bootstrap 3.1 to facilitate sorting and paginating server-side content. This is the current appearance of my table: http://datatables.net/manual/styling/bootstrap-simple.html W ...

Updating the color of tick marks on checkboxes

I have successfully updated the background color of my checkboxes using a custom function. However, the tick mark on the checkbox now turns black instead of remaining white. How can I keep the tick mark white while changing the background color? Here is t ...

How can you remove the border when an input is in focus on Chrome or Microsoft Edge?

I need to style an input field in a way that removes the black borders/frame that appear around it when clicked on in Chrome and MS Edge. Strangely, Firefox does not display this frame/border. How can I achieve this consistent styling across all browsers? ...

How can I make the item's image field optional using HTML and CSS?

I am currently working on a project for an e-marketplace. In my database, I have set the ImageField as optional. However, I am facing difficulty in making it optional on the HTML page in the code snippet below: <div class="mt-6 px-6 py-12 bg-gray ...

Leveraging ng-click and ng-hide/show directives within ng-repeat in Angular

I have a simple Single Page Website built with Angular. I utilized ng-repeat to generate content on the main page, where each item is an image. I am looking to create an alternate view for each image to display more details. I have implemented this feature ...

Automatically Adjust Text Size to Fit Input Forms using jQuery

Does anyone know how to use jQuery to dynamically change the font size in a form input field so that it always remains visible and fits even as the user types more text? I want the font size to start at 13px and progressively shrink as the text reaches the ...

Looking to personalize the appearance of an iframe using CSS styling?

I am working with an iframe that generates a form, and I would like to customize the CSS of this form. How can I go about editing the CSS? <div class="quiz-container" style="text-align: center;" data-quiz="#######" data-pr ...