Tips for creating gaps between wells within a Bootstrap row

Utilizing bootstrap, I am aiming to position two wells side by side without them being squeezed right next to each other. However, I am encountering some issues with achieving this. Here's the code snippet I am currently using:

<div class="container"> 
  <div class="row">
     <div class="col-sm-4 well"> first column</div>
     <div class="col-sm-4 well"> second column</div> 
  </div>
</div>

I've been referring to a tutorial that has similar code structure but displays spaces between the wells on their webpage. Any suggestions on how to have spacing between the two wells within the same row? Your help is greatly appreciated.

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

Based on the bootstrap documentation

To create an inset effect on an element, apply the well class.

Instead of using the well class with col-*-*, consider using it as a child of col-*-*

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="well">first column</div>
    </div>
    <div class="col-xs-4">
      <div class="well">second column</div>
    </div>
  </div>
</div>

INFORMATION:

Default well:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="well">first column</div>
    <div class="well">second column</div>
  </div>
</div>

Optional modifier classes:

Enhance padding and corners by adding optional modifier classes.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="well well-sm">first column</div>
    <div class="well well-lg">second column</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 is the best way to manage selected checkboxes in PHP?

Could you please assist me with a problem I am facing? I have a form where users can select checkboxes, but I'm struggling to display the selected checkbox item names in the result. Currently, my HTML site is using the value attribute to calculate the ...

phphtml

When using Owl Carousel in Chrome, the carousel unexpectedly stops after switching tabs

Hi there, I'm currently testing out the auto play feature in owl carousel. One issue I've encountered is that when I switch to another tab in Chrome and then return to my webpage with the carousel, it stops functioning unless I manually drag the ...

javascriptjqueryhtmlcssowl-carousel

When a PHP if statement is triggered by reading a text file, it activates a checked

I am working on a PHP project that involves an on-off button and a txt file. The goal is to have the button disabled (with 'unchecked' echoed) when the value in the txt file is true, and enabled (with 'checked' echoed) when the value is ...

phphtmlbutton

Basic draggable pop-up window using HTML5 for a seamless experience

Can anyone provide me with helpful resources or tutorials to create a draggable popup using HTML5 without jQuery? I want to keep it simple and avoid external libraries like jQuery UI. Currently, I have an absolutely positioned div that looks like a popup ...

jqueryhtmlpopupdraggable

The integration of AngularJS with Bootstrap 3 accordion seems to encounter issues when included through ng-view

Here's the issue: When using the accordion in a view loaded with the ng-view directive, the accordion title clicks stop working correctly. Check out this demo for an example However, when the accordion is used directly on the page without ng-view, i ...

javascriptangularjsaccordionangularjs-directivetwitter-bootstrap-3

I am currently having issues with a PHP script I wrote for sending email, as it is

After creating a form and implementing a PHP script to send an email upon form submission, I encountered an issue where the "Thank you" message was displayed on a different HTML page, but the email wasn't sent to my account. I uploaded the files to t ...

phphtmlwampserver

Aligning a div in relation to the background image

I am seeking guidance on how to center a Div Box and make it responsive relative to the background image. The div box should be contained within the white box, similar to the example shown here: body{ font-family: 'Roboto Mono', monospace; ...

htmlcssimagecenter

Moving draggable items out of a div and placing them into a designated droppable area

I'm facing an issue with dynamically creating draggable "divs" within a "table" and trying to make them drop into multiple droppable areas. The problem is that when I drag the element, it leaves a gap and upon dropping, it lands in multiple places ins ...

jqueryhtmljquery-uijquery-ui-draggablejquery-ui-droppable

What could be causing ReactNative Dimensions component to display lower resolutions?

Currently, I am developing an application using React Native v0.45.1 and testing it on my S6 device. Despite setting a background image that matches the resolution of my phone, it appears excessively large on the screen, cutting off most of the content. T ...

androidcssreactjsreact-nativebackground

What is the best location to insert CSS in an HTML document?

I tried to customize the CSS on my Blogger blog, but unfortunately, I am unable to access the theme designer. As a result, I attempted to add CSS directly into the code using tags. However, I am having trouble locating the tag within the HTML file. This is ...

htmlcssxmlbloggerblogger-dynamic-views

Achieving Dynamic Alignment in CSS: How to Responsively Align a Div to the Width of its Parent Using Padding and Margins

My dilemma could not be clearer - I am struggling to properly align 4 divs within a width of 1150px (the maximum width of the content div). When resizing the screen, I want them to adjust accordingly: 4 in a row when possible, then 3 in the center, and so ...

cssresizeresponsive-designcss-float

Miscalculation in PHP MySQL: Incorrect output when adding field 1 and multiplying field 2 by

In my MySQL table, there are 4 fields: product price cost, selling price, stock of products, and earnings per unit. For example: If the cost of our product is $100, we sell it for $120, and we have a stock of 10 units, the following code calculates the e ...

phpmysqldatabasehtml

Passing references between multiple components

I'm currently working on an application using Material-UI in conjunction with styled-components. I am faced with the challenge of passing a ref down to the root <button> node that is created by Material-UI. Material-UI provides a buttonRef prop ...

cssreactjsmaterial-uistyled-componentsreact-ref

Different option for positioning elements in CSS besides using the float

I am currently working on developing a new application that involves serializing the topbar and sidebar and surrounding them with a form tag, while displaying the sidebar and results side by side. My initial attempt involved using flex layout, but I have ...

javascripthtmlcss

Is it possible to include a while loop for iteration inside a AJAX success function?

I'm currently working on dynamically creating an accordion and populating the content of each tab using AJAX. In my main HTML page, there is an empty div reserved for the accordion: <div id="accordion"></div> The desired outcome is to ha ...

javascriptjqueryhtmlajax

Navigate through the seamless elements with scroll snapping

I need to find a way to make horizontal scrolling on my really wide graph snap to specific points along the x-axis. I initially tried using scroll-snap-points-x, but unfortunately it doesn't seem to be supported. My attempt to add invisible elements ...

cssscroll

Having issues with closing a div tag using $.after() function

This issue can be better understood with an example: http://jsbin.com/lavonexuse The challenge here is to insert a full-width row after a specific column (identified by the class .insertion-point) when "Insert Row" is clicked. The problem I'm facing ...

javascriptjquerytwitter-bootstrap

What is the best way to make this CSS arrow see-through?

My goal is to achieve this desired outcome: Currently, I have the following (focusing only on the left element for now): I am struggling to make the left arrow transparent and I can't seem to figure out how. This is the CSS Code I have so far: .ma ...

htmlcss

The functionality of XPATH does not seem to be properly executed with JQuery

<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("[href!='http://w ...

jqueryhtml

Provide a unique <li> attribute for the JavaScript function to utilize

Is there a way to pass specific attributes from dropdown options to a javascript function? I have tried using .data() and .attr(), but the console keeps showing "undefined". Any suggestions on how to achieve this in a cleaner and simpler way would be gre ...

javascriptjqueryhtml