Place the component alongside the search field

While developing a web application, I encountered an issue where my EntreCadastre-se|Carrinho menu is appearing below the text field instead of beside it.

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

<div class="row">
  <div class="col-6 col-md-4 col-xs-4">
    <img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal">
  </div>
  <div class="col-6 col-md-4">
    <div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto "><i class="fa fa-search" action="" ></i></button> </div>
  </div>
  <div class="col-6 col-md-4">
    <ul class="menu_2">
      <div class="btn-group" role="group">
        <div class="btn-group" role="group">
          Entre/Cadastre-se <span class="caret"></span>
        </div>
        <button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ( )</button>
      </div>
    </ul>
  </div>
</div>
htmlcss

Answer №1

It appears that the issue lies in your math calculations. As @efkin pointed out, you only have 12 columns available in Bootstrap. However, you are trying to divide it into three divs with col-6 classes, which totals to 18 columns. If you want to have 3 equal-sized columns on one row, you should use col-4 for each, as 3*4 equals 12.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="row">

        <div class="col-4 col-md-4 col-xs-4">
            <img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal"  >
        </div>

        <div class="col-4 col-md-4">

            <div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto "><i class="fa fa-search" action="" ></i></button> </div> 
        </div>

        <div class="col-4 col-md-4">

            <ul class="menu_2">

                <div class="btn-group" role="group">
                    <div class="btn-group" role="group">

                                    Entre/Cadastre-se <span class="caret"></span>  


                    </div>
                    <button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ( )</button>
                </div>

            </ul>


        </div>

    </div>

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

Ensure the browser back button navigates to the login page seamlessly, without displaying any error

A scenario I am working on involves a Login jsp that accepts a user email and sends it to a servlet. If the provided email is not found in the database, the servlet redirects back to Login.jsp with an attribute "error". Within the header of Login.jsp, ther ...

javascripthtmljspbrowserscriptlet

I am looking to implement a Mouseover effect on my Canvas element using JavaScript

To create a mouseover effect only on a specific canvas location, I have developed the MousePosition function (as seen below). The commands for the mouseover effect should be implemented within the MouseOverButton function. However, despite my efforts, it ...

javascripthtmlcanvas

Manipulate Codeigniter Dropdown to Display Date/Time Query Results

I am relatively new to the world of codeigniter and MVC architecture. Currently, I am in the process of transforming an outdated coldfusion MX website into a fresh new design and layout. My current task involves populating a dropdown menu from a database ...

phphtmlcodeignitercodeigniter-3

What is the best way to display two items side by side from a list of items in HTML?

I have a list of items that are displayed in `webView` with 4 elements per row. However, for `mobileView`, I would like to show only 2 elements in each row. Below is an example from my HTML file: <div class="row my-3 cust-heading" style="margin-left: 3 ...

htmlcss

Fixed Navigation Menu on Top with Specific Width Size

Currently diving into the world of CSS and eagerly following a tutorial on creating a responsive menu for my website. Managed to get it up and running, but hit a few roadblocks along the way: The navigation menu seems to shrink in both desktop and mobile v ...

javascripthtmlcss

The dropdown menus in Bootstrap are expanding outside the screen when opened

When I click on the dropdown in the Navbar on the right side, the menus open up far to the right and are not visible until I scroll horizontally. Here is the code snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> < ...

htmlcssangulartwitter-bootstrap

Tips for aligning a row of images to the right in Bootstrap 4

I have several images that I want to display on the right side in a block. Here is what I attempted: <div class="row" > <div class="float-right"> <img src="1.png"/> <img src="2.jpg"/> ...

htmlcssbootstrap-4alignment

Vue JS: Extracting both the unique ID and value from an array of input simultaneously

I am new to Vue and currently exploring its capabilities. I am experimenting with the Element UI for Vue's user interface. Specifically, I am working with the Input Number Component, to manage an array of data. Let's assume my data is structured ...

javascripthtmlvue.jsvuejs2element-ui

What coding techniques can be used to create dynamic animation of a log stream in javascript/css

When I have a series of events in my browser, I want to display them as a list with a smooth animation effect. As each new event comes in, I'd like the existing items to slide down gracefully, making room for the new event to fade in at the top of the ...

javascriptjquerycssanimationcss-animations

Adaptable triple-column design

After completing the layout of my website, everything seems to be functioning well. However, I would like to ensure that I haven't overcomplicated it or used poor techniques. The structure involves a main DIV with a nested table DIV, inside of which ...

htmlcssresponsive-design

Guide to creating a rising or waving effect for text using CSS or JavaScript without the need for animation

Is there a way to style dynamic text like this using HTML? https://i.sstatic.net/NQ9Cs.jpg I'm open to using CSS or Javascript, as long as it does not involve animation. ...

javascripthtmlcss

What is the most effective method for troubleshooting the html5lib.html5parser.ParseError that occurs due to an unexpected character following an attribute value

Currently, I am engaged in a personal project that involves using the chessdotcom Public API Package. My goal is to retrieve the PGN (Portable Game Notation) from the daily puzzle and store it in a variable, as this is required input for creating a chess g ...

pythonhtmlattributespython-chesshtml5lib

Adjusting the width of the rail in Material UI's vertical Slider component in React

After attempting to adjust the width and height of the rail property on the material ui slider I obtained from their website demo, I have encountered an issue with changing the thickness. import React from "react"; import { withStyles, makeStyles } from " ...

javascriptcssreactjsmaterial-ui

Ways to send data to a popup in svelte

Hey there, I could really use some assistance with my Svelte app. I'm trying to implement a modal and pass a parameter to the modal component in order to customize its content. However, when using the open() function of Modal, we only need to provide ...

javascripthtmlcssmodal-dialogsvelte

Header element placement problem

After collaborating with fellow members of this community, we successfully developed this code. The issue at hand: Struggling to position headers below the social buttons in the center of the page after a div element. Here's the link to the Fiddle f ...

htmlcss

AngularJS: Utilizing UI Bootstrap Popover with the Placement Set to 'bottom-right'

I am working with UI Bootstrap and AngularJS, attempting to customize a popover to have the 'bottom-right' placement instead of the default 'bottom' or 'right'. The desired functionality is illustrated in the image below. htt ...

javascriptcssangularjstwitter-bootstrapangular-ui-bootstrap

Acquire $(this) when the onclick event is activated

Usually, I rely on a jQuery event handler for CSS styling. However, today I decided to experiment with using the HTML event attribute instead. Below is the code that I used: $('.navBtn').on('click', function() { var length = $(th ...

javascripthtmljquery

Is there a way to make the div visible with just one click instead of two?

var sections = ["intro", "content"]; var visibleSectionId = null; function toggleVisibility(sectionId) { if (visibleSectionId == sectionId) { visibleSectionId = null; } else { visibleSectionId = sectionId; } hideInvisibleSe ...

javascriptjqueryhtmlcss

Tips for implementing version control for css, js, and jsp files

I've created a single-page web application with multiple views, utilizing ng-if for rendering. These views lack headers or body sections and consist only of HTML code. Each view is managed by a separate controller, with many click functionalities han ...

javahtmlangularjsspring-mvcjsp

Ensure that the Div element is able to wrap lines in the same way that the Span element

Is there a method to ensure that a div element wraps the lines similar to how a span does? JSFiddle for testing In this example, I utilized the span tag to create an appearance as if the text was highlighted by a yellow highlighter pen. Everything functi ...

htmlcss