What is the arrangement of the Bootstrap grid stack?

I'm facing an issue with positioning in the bootstrap grid on desktop view. My goal is to achieve: https://i.sstatic.net/VosAw.jpg

The problem arises with the spacing when using 

<div class="col-xs-6 col-md-4">
. It doesn't look good in mobile view and lacks responsiveness as intended. The layout shifts between desktop and mobile view, causing inconsistency.

Mobile View:

https://i.sstatic.net/hfnA0.jpg

Desktop View:

https://i.sstatic.net/ha8zf.jpg

Code:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="container">

  <div class="row">
  <div class="col-xs-6 col-md-4">
    <p>real connections.</p>
    <hr>
    <p>since 2015</p>
  </div>
  <div class="col-xs-6 col-md-4">
    <h1>Board Game Cafe</h1>
  </div>
  <div class="col-xs-6 col-md-4">
    <a href="<?php echo $login; ?>"><?php echo $text_login; ?></a>
    <a href="<?php echo $register; ?>"><?php echo $text_register; ?></a>
    <a href="<?php echo $shopping_cart; ?>" title="<?php echo $text_shopping_cart; ?>"><i class="fa fa-shopping-cart"></i> <span class=""><?php echo $text_shopping_cart; ?></span></a>
    <hr>
    <?php echo $search; ?>
  </div>
</div>
</div>

<div id="search" class="input-group col-md-5">
  <input type="text" name="search" value="<?php echo $search; ?>" placeholder="<?php echo $text_search; ?>" class="form-control" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default"><i class="fa fa-search"></i></button>
  </span>
</div>

Website:

htmlcsstwitter-bootstrap

Answer №1

The solution provided below could be beneficial for your situation. I modified the col-xs-6 to col-xs-4 and included the class col-xs-4 to the div with the id "search." You can view the changes in this link: http://jsfiddle.net/XELRX/142/

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

Issue encountered during deployment of React on an express server

After successfully creating a simple React website and Express server, I encountered an issue when trying to deploy the website on my own server. While the scripts, CSS, title, and favicon all seem to be loading correctly, the actual content is not display ...

htmlreactjsexpressserver

Adding a PNG icon to a label in JavaScript: A step-by-step guide

How can I add a png icon alongside the label for Yourself? <div class="ui-grid-a" style="display: inline"> <label class="text-light ui-block-a">Post as: </label> <label class="link toggle-post ui-block-b" > ...

javascripthtmlicons

The overflow hidden property does not seem to be effective when used in conjunction with parallax

The issue arises when I attempt to use the overflow hidden property in combination with parallax scrolling. Although everything seems to be working correctly with JavaScript for parallax scrolling, setting the overflow to hidden does not contain the image ...

javascripthtmlcssparallax

Creating Radial Fades with CSS3

Seeking guidance on creating a background similar to the one shown here using just CSS. I believe it can be done, but I struggle with CSS3. The goal is for the background to be compatible with all modern browsers, not overly concerned about support for br ...

css

Is there a way to make a TABLE expand to match the height of its surrounding element? (or, tackling sluggishness in IE with JavaScript)

I am facing a challenge with a web page where I have a table nested inside of a TD tag. Despite the unconventional approach, I need to ensure that the height of the nested table matches the height of the TD cell containing it upon page load. Currently, I a ...

htmlcssinternet-explorer

The stacking order of React components

I am having an issue with the Z-index in my component-based React app. I currently have a list component that contains items, and I want to adjust the CSS scale and z-index to display one item in front of the others. The problem arises when the hovered it ...

cssreactjsreact-nativez-index

The dropdown menu in Bootstrap 4 has non-functional links

Attempting to create a mega menu using Bootstrap. Started with dropdown menu code and made some modifications, but encountering issues where the links in the dropdown don't work properly unless opened in a new tab. When clicking on a link, it closes t ...

htmlcssdrop-down-menubootstrap-4

Leveraging webpack for CSS bundling

I'm currently working on bundling some NPM modules using webpack instead of utilizing a CDN. While I've successfully managed to integrate the .js files, I'm facing challenges with including the .css files for these modules. One example is ...

javascriptcssnode.jsnpmwebpack

Remove the class upon clicking

I recently created a toggle-menu for my website that includes some cool effects on the hamburger menu icon. The issue I am facing is that I added a JavaScript function to add a "close" class when clicking on the menu icon, transforming it into an "X". Whil ...

javascripthtmlcss

Executing the same function on both mouse click and key press with HTML and JavaScript

I need help figuring out how to call the same JavaScript function whether a user clicks a mouse or presses the enter key. Here is the code I have in my HTML file, but it doesn't seem to be working. Can anyone advise on how to fix this issue? <div ...

javascripthtml

Do CSS Stylesheets load asynchronously?

Is there a difference in how stylesheets are loaded via the link tag - asynchronously or synchronously? In my design, I have two stylesheets: mura.css and typography.css. They are loaded within the head section of the page, with typography.css being load ...

cssasynchronous

Capture screenshots of the web page URLs within the Chrome browser by utilizing PhantomJS

Looking for a way to capture screenshots of various URLs and display them in the Chrome browser using PhantomJS. How can I achieve this? Any assistance would be greatly appreciated, as nothing is currently showing up on the webpage. This is how my code a ...

htmlphantomjs

Creating dynamic "floating divs" with consistent width but varying heights, alignment challenge

Seeking assistance to solve the following challenge: Description of Issue: We are dealing with dynamically generated "floating divs" that have equal width but varying heights based on their content. The "Parent container" will have different width parame ...

javascripthtmlcssresponsive-designfloating

Discover the steps for integrating an object into a Ext.grid.Panel using Sencha Ext Js

Currently, I am utilizing Sencha Ext Js 4 and have integrated an Ext.grid.Panel into my project. I am interested in adding another element inside the header, such as a textbox. Is this achievable? {filterable: true, header: 'Unique' /*Here i w ...

javascripthtmlextjsextjs4

Tips for avoiding the collapse of a Bootstrap-3 menu

Can anyone offer assistance? I'm trying to prevent the collapse of the menu on mobile devices in Bootstrap 3. I've searched for a solution but have come up empty. <nav class="navbar navbar-default navbar-static-top"> ...

jquerycsstwitter-bootstrap

Position the Twitter, Facebook, and LinkedIn sharing buttons in alignment

I've tried various methods to align the Facebook share button with other social media buttons, but I haven't been successful so far. There seems to be a slight pixel difference. Any suggestions? <div style="float:left; vertical-align:top"> ...

htmlcssfacebook

Take out any HTML elements that do not contain any characters or " "

Currently, I am working on processing generated HTML sourced from a Word document. My goal is to isolate paragraph elements that exclusively consist of capitalized characters and are free of "empty elements" or &nbsp;. To achieve this, I am utilizing a ...

javascriptjqueryhtmlregex

Experiencing problems with various React Carousel libraries when it comes to displaying

I have been attempting to integrate Carousel libraries into my react app, but I am encountering a common issue with all of them. The Carousels show the items on the first slide, but subsequent slides do not display any items, even though they exist within ...

javascriptcssreactjsslidercarousel

Can local caching in ALL MAJOR browsers (Safari/Firefox/Opera/Chrome/IE) be achieved by an HTML5 web app that bypasses browser permissions?

Exploring the capabilities of the HTML5 offline application cache, I conducted boundary tests to observe how different browsers handle edge cases. Particularly, I focused on understanding the cache quota. To investigate further, I created and served an of ...

htmlcachinggoogle-chrome

I want to display the image column as the second column on large screens and as the first column on small screens in Bootstrap version 5

Having an issue with my Bootstrap v5 setup. I have a simple two-column layout with an image and text. I need the image to display in the second column on large screens and be the first column on medium and large screens. <div class="container" ...

htmlcsstwitter-bootstrapbootstrap-5