Setting up the Bootstrap grid structure

Struggling to find the right configuration for this Bootstrap 3 setup...

https://i.stack.imgur.com/ZsTdI.png

I have an input field, but I'm having trouble placing the image in that position.

<div class="row">
    <div class="col-sm-4 col-md-4">
        <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
            <input size="16" class="form-control" type="text" name="nombre" required placeholder="Tu nombre completo">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-4 col-md-4">
        <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
            <input size="16" class="form-control" type="email" name="correo" required placeholder="Tu email">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-4 col-md-4">
        <div class="input-group-btn">
            <button type="button" class="btn btn-success" id="agregar"><span class="glyphicon glyphicon-plus"></span> Agregar usuario sugerido</button>
            </div>
        </div>
    </div>

csshtmltwitter-bootstrapgrid

Answer №1

Give this a try:

<div class="row">
     <div class="col-sm-6">
       <div class="row">
         <div class="input-group-btn">
           <button type="button" class="btn btn-success" id="agregar">
           <span class="glyphicon glyphicon-plus"></span> Add suggested user</button>
         </div>
       </div>
       <div class="row">
         <div class="input-group-btn">
           <button type="button" class="btn btn-success" id="agregar">
           <span class="glyphicon glyphicon-plus"></span> Add suggested user</button>
         </div>
       </div>
     </div>
     <div class="col-sm-6">
       Image goes here
      </div>
    </div>
  </div>
</div>

Take another look at the grid documentation. Nesting is a good option and you don't need to use both col-sm-6 and col-md-6, just use the smaller one if the values are the same.

Answer №2

Creating a layout in Bootstrap can seem overwhelming at first, but I recommend starting big and then working your way down to the smaller details. Check out my codepen for an example.

I hope this advice is helpful! :)

http://codepen.io/sequential/pen/egxbbK

<div class="row">
  <div class="col-sm-6 tier1">
    <div class="smBox"></div>
    <div class="smBox"></div>
  </div>
  <div class="col-sm-6 tier1">
     <div class="lgBox"></div>
  </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

What was the reason behind resolving the 0 height body problem by adjusting the WebView Layout Parameter?

My Xamarin WebView was not displaying my HTML correctly. Even though it was set to fill the whole screen, the body height in the HTML remained at 0px. In addition, I had a div in the HTML with the following style: position:absolute; top:0px; bottom:0px; ...

androidcssxamarinwebviewxamarin.forms

What would be more efficient: inputting all items in a form at once or adding them one by one consecutively

My mind is preoccupied with a dilemma: is it better to have all possible items already on the form, or should items only be added when the user requests them? Let me elaborate - Imagine I have a form with 4 input fields and one textarea. Alongside that, t ...

jqueryhtmlcssajaxforms

Handling an HTTP Get request by utilizing Server-Sent Events (SSE)

Exploring the possibilities of HTML5 and node.js has led me to test out Server Sent Events successfully using this example. My experiment then involved responding to a button press with an SSE. Upon clicking the "Increment" button, I extracted a number fr ...

htmlnode.jsserver-sent-events

Is there a way to deactivate a div in Blazor when clicking outside of the div?

Is it possible to have two divs on a single page, where one appears on the right side and the other on the left side? Is there a way to close or hide the left side div whenever we click on the right side div? ...

c#htmlcssasp.net-coreblazor

Guide to displaying a custom HTML tag

In this example: <?php $html='<p style="color:#eee;"> Test content 1. </p> <p dir="LTR" style="color:#f00;"> <span>Test content 2.</span> </p> <p style="color:#000;"> Test content 3. </p>' ?> ...

phphtml

Issue with JQuery: Inability to deactivate an element after receiving an Ajax response

My dynamic dialogue box, generated via Ajax return, presents a challenge involving the dynamically changing drop-down list element $('#functionSelect'). I require this list to trigger disabling of input fields within the dialogue box upon changes ...

javascriptjqueryhtmlajax

Tips for adjusting the width of an HTML element that is set to position: fixed

<div class="ui-datatable-scrollable-view" style=" width: 100%; position: relative; "> <div class="ui-widget-header ui-datatable-scrollable-header" style="position:fixed;top:50px"> </div> </div> ...

htmlcss

Two scenarios for tag class and just class are considered in this discussion

FOUND THE SOLUTION. Sending a huge shoutout to @JHeth and @Marko Vucurovic for their invaluable help! This query may seem lengthy, but the concept is straightforward. Let's break it down into 2 scenarios: Scenario I <html> <head><titl ...

htmlcss

The CSS file cannot be found on the live XAMPP server

Here is the current structure of my project: I attempted to link my CSS stylesheet by navigating to the project path, then /css, and finally /style.css. This setup works correctly when opening the .html file locally in a browser. <link rel="style ...

phphtmlcssxampphref

Lighthouse Issue: Facing PWA Challenges with a "Request Blocked by DevTools" Error

For hours now, I've been struggling to make Lighthouse work in Chrome for my initial PWA project. I feel completely lost as nothing seems to be making sense despite the basic code I have included below. The issue arises when I load the page normally ...

javascripthtmlgoogle-chromeprogressive-web-appslighthouse

The Flowbite CSS plugin seems to be malfunctioning when attempting to include it within the tailwind.config.js file

Incorporating Flowbite (both JS and CSS) into my application has been a bit of a challenge. I managed to successfully insert the JS using Webpack and import 'flowbite' in the entry point JS file. As for the CSS, I followed the documentation and ...

csstailwind-css

Tips for preventing the use of website URLs as variables in jQuery ajax() calls:

Having some trouble. For example: $(document).ready(function () { $("#btnSend").click(function () { var noti_p = { url: "Pusher_Controller.ashx", data: "&appname=" + $("#selt1").val() + "&title=" + $("#title"). ...

javascriptjqueryhtmlajax

Issues with JQuery Ajax rendering in browser (suspected)

I'm encountering an issue on my webpage. I have a div with two hidden fields containing values of 0 and 2, respectively. Upon clicking a button that triggers an AJAX query, the div contents are updated with hidden field values of 1 and 2. However, it ...

javascriptjqueryhtmlajaxdom

The variable $ has not been defined in Jquery framework

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="deployJava.js"></script> <script type="text/javascr ...

javascriptjqueryhtmljquery-uiweb

Is it possible to create varied background shades in CSS3 without relying on images?

Check out this fiddle: http://jsfiddle.net/dzAJp All the divs are styled with a light blue background color using the background-color CSS property instead of background-image. I want to darken the second div slightly by combining its current background ...

css

What is the best way to ensure that a piece of content remains stationary while the neighboring content shifts in position?

Hello there! I'm currently working on my very first HTML and CSS project, and one of the tasks involves aligning 4 icons side by side horizontally. The goal is to have the icons "grow" a bit when the mouse hovers over them. However, I've encounte ...

htmlcsscss-positionmargins

The HTML component fails to acknowledge width settings

I seem to be having trouble identifying an issue or perhaps I am misunderstanding something (I am using daisyui + nx + tailwind css + angular). To simplify my problem, let's consider the following scenarios: In the first scenario, I have: <div cl ...

htmlcssangulartailwind-cssdaisyui

`Make adjustments to the visual representation of crispy forms`

When using crispy forms, the labels for CheckboxSelectMultiple() fields are populated from the default string representation of objects defined in a list. To change this behavior, I am seeking assistance. Is it possible to create a custom string represent ...

htmldjangodjango-crispy-forms

Guide to creating a parallax scrolling effect with a background image

My frustration levels have hit an all-time high after spending days attempting to troubleshoot why parallax scrolling isn't functioning for a single image on a website I'm developing. To give you some context, here's the code I've been ...

javascripthtmlcssparallaxskrollr

Adding a class name to the three active, visible, and shown slides in SwiperJS is a simple process that can be done by

Currently, I am working on customizing a carousel in Swiper with slidesPerView={3}. My goal is to style the sliders that are not visible on the screen. I have made multiple attempts to achieve this: First, I tried adding the attribute slideActiveClass="sw ...

cssnext.jsslidercarouselswiper.js