Is it not feasible to place a well within a column using Bootstrap?

Question

Is it not feasible to place a well within a column using Bootstrap?

Would like to place a .well div (or a button, whichever works best) within the designated green area shown in this image:

here

Here is the code I currently have:

<div class="container-fluid">

  <div class="row row1" style="height: 400px;">
  

    <div class="col-lg-4 col-lg-offset-1">

      aaaa <!-- BUTTON OR WELL HERE -->

    </div>

  </div>

CSS:

.row1 {
    background: url("appart.jpg");
    background-size: 100% 400px;
    background-repeat: no-repeat;
}

The issue arises when attempting this code:

<div class="container-fluid">
		
	<div class="row row1" style="height: 400px;">
		
		<div class="col-lg-4 col-lg-offset-1">
			
			<div class="well well-sm">aaa
    	</div>

		</div>

This resulted in the following output:

here

How can I ensure the .well div stays within the green area and has smaller height and width compared to the green area?

css twitter-bootstrap

Answer 1

Answer №1

Not entirely sure about the specific question, but remember to consider the Bootstrap column sizes. Using 'lg' can cause confusion when screen size decreases, so it's better to use 'xs' if you only need one size declared.

Avoid using inline CSS.

Does this cover what you were asking for?

Check out the Fiddle here

HTML:

<div class="container-fluid">

    <div class="row backgroundPicHere">

        <div class="col-xs-4 col-xs-offset-1 green">

            <div class="well">Basic Well</div>

        </div>

    </div>

</div>

CSS:

.backgroundPicHere {
    top: 20px;
    height: 200px;
    background: red;
}

.green{
    background: green;
    height: 200px !important;
}

.green .well{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
}

PS. Feel free to choose any method for vertically centering the well that works best for you. This is just one option... some may have different preferences. DS

EDIT: Fixed code indentation

Answer 2

Not entirely sure about the specific question, but remember to consider the Bootstrap column sizes. Using 'lg' can cause confusion when screen size decreases, so it's better to use 'xs' if you only need one size declared.

Avoid using inline CSS.

Does this cover what you were asking for?

Check out the Fiddle here

HTML:

<div class="container-fluid">

    <div class="row backgroundPicHere">

        <div class="col-xs-4 col-xs-offset-1 green">

            <div class="well">Basic Well</div>

        </div>

    </div>

</div>

CSS:

.backgroundPicHere {
    top: 20px;
    height: 200px;
    background: red;
}

.green{
    background: green;
    height: 200px !important;
}

.green .well{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
}

PS. Feel free to choose any method for vertically centering the well that works best for you. This is just one option... some may have different preferences. DS

EDIT: Fixed code indentation

Is it not feasible to place a well within a column using Bootstrap?

Answer №1

Similar questions

"Troubleshooting: Issues with jQuery Counter Functionality

Retrieve the background color using code-behind

Changing the width of the initial column in a Bootstrap grid while using ng-repeat in Angular

Subdomain Dilemma: Trouble with Images in Internet Explorer

The outer DIV will envelop and grow taller in conjunction with the inner DIV

Is it possible to eliminate jagged edges in CSS 2D rasterization by applying anti-aliasing to subpixels?

Gradually reveal each individual path of the SVG, one by one

Unable to alter the css of a jQuery object

What is the method for retrieving the font size of elements in the native view using appium?

Creating a unique card component with React and custom Tailwind CSS styling

Retrieve the CSS class definition using the console in the Chrome Developer Tools

Eliminate the dark backdrop from html5 videos that only shows up for a brief moment

Different techniques for using percentages in CSS transformations to create dynamic animations for DOM element translations

The slider thumb is not showing up properly on Microsoft Edge

Navigating Your Way Through the Center (ASP.NET MVC)

What is the best way to adjust the dimensions of a blank image without altering the size of

Is it possible to use HTML code as content in CSS?

"Controlling Selected Options in Bootstrap Dual Listbox: A Guide to Limiting Choices

Full-screen Bootstrap burger navigation menu

Displaying a background image in Laravel using the storage directory