Span within a span using Bootstrap

I am facing some challenges in figuring out how to nest a span within another span using Bootstrap.

My objective is to have a centrally aligned block, with the following structure inside:

- One row containing:
- A block on the left (span6)
- A block on the right (span6)

- Another row containing:
- A centered button (span 6 offset3)

You can view the issue here: http://jsfiddle.net/UBTv4/18/

<div class='row'>
<div class='span6 offset3'>
    <div class='well'>
        <h2>Title</h2>      
            <div class='row'>
                <div class='span6'>
                    <p class="lead">Bloc left : </p>
                </div>              
                <div class='span6'>
                    <p class="lead">Bloc right : </p>
                </div>
            </div>
            <div class='row'>
                <div class='span6 offset3'>
                    <input id="play" type="submit" value="play" class="btn btn-primary"/>       
                </div>
            </div>
    </div>
</div>

What seems to be the issue?

I aim for something like this:

csstwitter-bootstraprowhtml

Answer №1

Here is the solution provided for you.

<div class='row'>
    <div class='span6 offset3 well' >  <!-- Use .well class here instead of an inner div -->
            <h2>Title</h2>      
                <div class='row'>
                    <div class='span3'> <!-- Use span3 instead of span6 -->
                        <p class="lead">Bloc left : </p>
                    </div>              
                    <div class='span3'> <!-- Use span3 instead of span6 -->
                        <p class="lead">Bloc right : </p>
                    </div>
                </div>
                <div class='row'>
                    <div class='span3 offset3'>  <!-- Use span3 instead of span6 -->
                        <input id="play" type="submit" value="play" class="btn btn-primary"/>       
                    </div>
                </div>
        </div>
</div>

Link to view the code on JSFiddle

To better understand, it is recommended to carefully read the Nesting column section in the following link:

Bootstrap Scaffolding Documentation

In summary, when nesting a row within a span6, ensure that the sum of inner row spans equals 6 (3+3).

Additionally, note that the .well class includes padding/margins, so avoid using it between parent and nested rows/spans.

Answer №3

If you want to create movement in both directions, consider using the classes pull-right and pull-left.

</div>              
                <div class='span6'>
                    <p class="lead pull-right">Block moving right: </p>
                </div>
            </div>
            <div class='row'>
                <div class='span6 offset3'>
                    <input id="play" type="submit" value="play" class="btn btn-primary"/>       
                </div>
            </div>
    </div>
</div>

For a visual representation of the code shown above, visit this link:http://jsfiddle.net/UBTv4/18/

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

Integrate HTML code from one file into another HTML file

I have a specific task in mind: I want to incorporate a header and footer from an external HTML file into another HTML file. Although there are numerous code snippets available here, I'm facing some challenges: Issue: I am unable to modify the exte ...

jqueryhtmlajaxinclude

Modify the background's color and incorporate a pointlight using three.js

Recently, I have been exploring the capabilities of three.js. One interesting challenge I encountered was creating a cube within a wireframe cube. However, I found myself struggling to alter the background color in my project. I believe that incorporating ...

javascripthtmlcanvasthree.js

Stop the bootstrap carousel at a specified screen size

Looking for a way to stop the bootstrap carousel from auto-playing on screen sizes below 640px. Despite trying various methods, I have yet to find a solution that works. This is my current approach: $(document).ready(function(){ if ($(window). ...

jquerytwitter-bootstraptwitter-bootstrap-3bootstrap-carousel

The functionality of a div element appears to be impaired when attempting to include a newline character

I have a div element <div id="testResult" style="padding-left: 120px;"> My goal is to include text with newline character '\n' inside the div. However, when I view my html page, the text does not respect the newline character. $( ...

javascriptjqueryhtmlcss

When I'm working on iPhone css hover effects, I find that I need to include a

Why do I have to add a touch event to my element in order for it to trigger hover styles? Is this typical behavior? It seems a bit unconventional. This is the code I need to include to make :hover work; without it, no hover style is applied. Apologies f ...

iphonecsseventshovertouch

Locating Elements with Python 3 and Selenium: Unraveling the xpath Mystery

https://www.facebook.com/friends/requests/?fcref=jwl&outgoing=1 I am looking to click on the "See more request" option within the "friend request sent" section. <div id="outgoing_reqs_pager_57b87e5793eb04682598549" class="clearfix mtm uiMorePager ...

pythonhtmlseleniumxpath

I'm seeking guidance on how to efficiently showcase MySQL data using PHP and HTML

After creating a script to test output from my database, I encountered an issue. While the PHP portion works perfectly, extracting the data into an HTML div tag does not. Any suggestions on how to fix this would be greatly appreciated. Thank you. //Establ ...

phphtml

What is the best way to horizontally align my div content while ensuring it is responsive, alongside a sidebar and top menu on the same

I am facing an issue trying to center my div content responsively with a sidebar menu and a top menu using Bootstrap. However, when I require the side-menu file, my div content gets placed at the bottom of the page unexpectedly. I am only using Bootstrap 5 ...

phphtmlcssbootstrap-5center

Ensure that the innerHTML of the span tag does not contain line breaks

Is there a way to prevent the span tag inside the div with the item class innerHTML from causing a line break, regardless of its length? I also need to ensure that any innerHTML exceeding the item width does not overlap but is hidden. I have attempted usin ...

csswidthlinebreak

jQuery for Implementing Pagination Across Multiple Tables

As a novice in the world of JavaScript and jQuery, I am struggling with implementing pagination for multiple tables on a single page. My goal is to have several tables that can be paginated using one navigation system. However, all my attempts so far have ...

javascriptjqueryhtml

3 Typeahead elements within a div with horizontal overflow

I have a container with the class 'table-responsive' that has overflow-x set to 'auto'. Within this container, there is an input field with typeahead. When I receive results to populate the typeahead, they appear within the container. ...

jqueryhtmlcsstypeaheadbootstrap-typeahead

Using RMarkdown to incorporate custom CSS styling in your documents

Having some trouble with my HTML report created from RMarkdown and applying CSS. The browser version displays correctly, but when printed, the styling doesn't come through. Below is an example of the RMarkdown code: --- title: "Table" output: html_ ...

cssrr-markdown

Using Parse on Express, Bootstrap necessitates the presence of JQuery

In the process of developing a small website, I have opted to host it with Parse and utilize Express along with Bootstrap. The beginning of my app.js file resembles the following: var express = require('express'); var _ = require('underscor ...

jquerytwitter-bootstrapexpressparse-platform

Validate Bootstrap - Transmit data from all form fields to external PHP script

Is there a way to send all input field values to a remote PHP file using Bootstrap Validator? In my log in form, I have two input fields. I'm utilizing Bootstrap Validator's remote validation on both of them. However, each validation only sends ...

javascriptjquerytwitter-bootstrapjqbootstrapvalidation

Render JSON data retrieved from an AJAX request as a formatted HTML display or table

Code for displaying JSON data $('body').on('click','#check_history',function () { var settings = { "async": true, "crossDomain": true, "url": "https://url.com", ...

javascriptjqueryhtmljsonajax

Bootstrap form with grid system: combining inline select and input fields

When setting up a form in Bootstrap, I encountered this issue: <div class="form-row"> <div class="col-xs-12 col-md-12 col-lg-12"> <select class="form-control" id="valueToFilter"> <option>Fecha</option& ...

twitter-bootstrapbootstrap-4

Tips for toggling the appearance of like and add to cart icons

I am attempting to create a simple functionality for liking and adding items to a cart by clicking on the icons, which should immediately change the icon's color when clicked. However, I am facing an issue where the parent div's link is also bein ...

javascriptjqueryhtmlcssfbsdklikebutton

Tips for personalizing buddypress groups

Currently, I am in the process of setting up a WordPress page and want to customize the appearance of my BuddyPress groups. My goal is to have them displayed horizontally instead of vertically. Can anyone provide me with a step-by-step guide on how to ac ...

phpcsscustomizationbuddypress

Combining several files into a single variable to encode

I'm encountering an issue with the multiple file upload option. Even though it shows that 2 files have been uploaded, when I try to print the encoded value in the console, it only encodes and takes the value of my last uploaded file. How can I encode ...

javascripthtml

Deciphering the elements in the periodic table using PHP and HTML

Recently, I encountered a problem that got me thinking. I was given the task of posting people's bios online (as discussed in another question) and I chose to use XML to create elements for each section of the bio. However, when some bios contained ...

phphtml