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

Do not open iframe links in a new window

Is it possible to manipulate the iframe so that links open inside the iframe window? I want the links clicked within the iframe to stay within the same window instead of opening in a new one. However, I have too many links to individually edit their code ...

javascripthtmliframe

Creating a pop-up effect for a div in the center of a table cell using HTML and CSS

I am currently working with Angular and facing a challenge where I need to display a div like a popup in a table cell when clicked. Despite having the click event logic in place, I am unsure of how to achieve this without using external libraries such as B ...

javascripthtmlcssangularhtml-table

Conceal the HTML element within a subscription

Currently, I am utilizing Angular and have a checkbox that I need to toggle visibility based on the response of an API call subscription. The issue lies in a delay when trying to hide the checkbox (as it is initially set to visible). My assumption is that ...

htmlangulartypescriptangular-material

Close button located in the upper-right corner is partially cut off

My challenge involves placing a close button on the top right corner of a #main div that contains an image of varying or larger size. I need the close button to slightly protrude outside the div using negative margins. The issue is that when I use overflow ...

htmlcss

Creating a dynamic design with a responsive background image and three columns of engaging content placed on top using Bootstrap

I'm struggling to translate a design mockup into Bootstrap 3.3.6 Here is an image showcasing the concept I am aiming for: The blue background represents an image, with grey text boxes overlaid on top (one of which includes a form). The entire layout ...

htmlcsstwitter-bootstrap

Transferring HTML information to Flask

I'm struggling with passing a value from a text box in a web application to a Flask application. Despite my efforts, the request object in Flask does not seem to contain the data I need. Can anyone provide assistance with this issue? Below are the rel ...

javascriptpythonhtmlflask

Audio Playlists and Dynamic Loading with WordPress Shortcode

I'm looking to incorporate the wp_audio_shortcode() function using AJAX, and then customize the style of the audio player. However, I'm facing an issue where the HTML code returned by the AJAX request does not allow me to customize the audio play ...

javascriptphphtmlajaxwordpress

I'm looking to create a Triangle shape with CSS, any tips on how to achieve

Similar Question: Understanding the mystery behind this CSS triangle shape Please provide me with your valuable suggestions. ...

htmlcss

Display HTML elements that are specifically <p> nodes

I am currently experimenting with HTMLParser to extract and print only the contents enclosed in "p" tags from an HTML document, excluding any other content within different types of tags. from HTMLParser import HTMLParser class MyHTMLParser(HTMLParser): ...

pythonhtml

Tips for transforming the appearance of an asp.net page with asp:Content into a stylish css-page

Currently facing an issue where I am unable to change the background-color in my CSS file. As a workaround, I have placed the style directly within an ASP page. <asp:Content Id="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> ...

c#htmlasp.netcss

Can a radio button set be designed in two dimensions?

There are three sets of data (dataX, dataY, dataZ) that need to be assigned unique values out of a selection of three options (valueA, valueB, valueC). Each piece of data should be linked to one value and each value should have only one data associated wit ...

htmlformsradio-button

What are the steps for increasing text input size on an html page?

I was actually using w3schools, so I'm a bit lost now. On this repl called BatCoder, you can write and save Bat files. And currently, I need to expand the text input! Would really appreciate any help as I am still learning how to code. No errors, j ...

htmlreplit

Is there a way to customize the pagination layout of primeNG paginator in an Angular project

I've been struggling to customize the primeNG paginator in my Angular application. Specifically, I am trying to style the dropdown that lets users select the number of data entries. Despite my efforts to figure it out, I have not been successful in st ...

cssangularprimengprimeng-dropdowns

Is it possible for jQuery UI Dialog to function similar to an iFrame?

Is there a way to set up my dialog box with a form so that when the form is submitted, only the dialog box changes instead of the browser location? ...

javascriptjqueryhtmljquery-ui

Toggle Submenu Visibility with a Click

One section of my code is located in sidebar.component.html : <ul class="nav"> <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item"> &l ...

htmlcssangulartypescript

Issues arise with AJAX authentication request

Currently, I'm working on incorporating a basic login form with an AJAX request that forwards the user to a page for querying my database. Depending on the results, the user is then redirected to the main index page or prompted back to the login form. ...

phpjqueryhtmlajax

In order to design a v-btn-toggle with vertically aligned buttons, rather than horizontally

I'm currently in the process of developing a quiz using VueJS and Vuetify. My challenge lies in organizing the answer options vertically for the user to select. I attempted to utilize the v-btn-toggle component, but encountered an issue where the butt ...

cssvue.jsvuetify.js

Adjust the image size in the jumbotron to fit perfectly without the need for scrolling

I'm in the process of creating a website with a prominent jumbotron section on the landing page. I am looking to adjust the height of the image within the jumbotron without cutting off any parts of the picture, and I do not want it to scroll to displa ...

htmlcssbootstrap-4

The behavior of a fixed position in Flexbox varies when comparing Chrome to Safari and Firefox

In Chrome, the following code works as expected, with the list element positioning itself at the very left of the .PageContainer when scrolling down. However, in Safari and Firefox, the list element positions itself just after the logo. Are there any CSS r ...

javascripthtmlcssflexbox

Can JavaScript be Utilized to Create Dynamic Layouts Successfully?

Are you curious about the viability of using Javascript to create fluid website layouts? While it is possible, how does it compare in terms of performance and complexity when compared to other methods like CSS3/HTML5? Take a look at the function below that ...

javascripthtmlcss