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?

csstwitter-bootstrap

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

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

Transitioning Between Div Elements Using Jquery

I am stuck with the following HTML code: <section> <div id="first"> ---content </div> <div id="second"> ---content </div> </section> When the page loads, the second div and its contents are not visible (I'm uns ...

jqueryhtmlcss

Creating a blurred background effect when a React portal is presented

I have implemented React portals to display a modal popup after the form is submitted. However, I am facing an issue with blurring only the background while showing the modal, similar to what is shown in picture 2. Initially, I tried using document.body.st ...

javascripthtmlcssreactjsmodal-dialog

Tips on correctly determining font size

I'm attempting to style a span element with a specific height (in this case, 23px). However, the browser is automatically adding some extra pixels to the element. There are no additional styles like padding or margin affecting it, just the size of th ...

htmlcss

What is the best way to retain selection while clicking on another item using jQuery?

There is a specific issue I am facing with text selection on the page. When I apply this code snippet, the selected text does not get de-selected even after clicking .container: jQuery('.container').on("mousedown", function(){ jQuery('. ...

javascriptjquerycss

unable to retrieve real-time data using a search bar

I'm working on a drop-down menu of locations/Regions with a search box nested inside. The image shows a list of places followed by regions. The region section is static, while the rest of the places are fetched from a database. Currently, I can searc ...

phphtmltwitter-bootstrapsearchdropdown

The CSS for the ajax call functions correctly on desktop devices but is not displaying properly on mobile devices

My ajax call is facing an issue where the CSS classes for a loader and overlay are only being applied in desktop view, not mobile view. I am unsure of what mistake I may be making. Can someone help me resolve this problem? Here is the ajax call: function ...

javascriptjqueryhtmlcssajax

Using CSS to apply hidden box shadow to nth child element

I am encountering a challenge with using the CSS selector :nth-child(...) in combination with the box-shadow effect. The intended outcome is as follows: The even-numbered div elements within a specific container should have alternating background colors. ...

htmlcsscss-selectors

Why do style assignments lose their motion when executed right after being made?

If you take a look at this specific fiddle in Webkit, you will see exactly what I am referring to. Is there a way to define the style of an element when it is first specified, and then its final state? I would like to be able to fully define a single-ste ...

javascripthtmlanimationcss

Solving Problems with Image Placement using CSS

As I embark on learning responsive CSS, the concept is still quite new to me. One issue I'm facing is the alignment of the images on the second row in comparison to the top images. I aim to have 4 images per row, with the flexibility for the image siz ...

cssimage

What is the reason for the presence of additional space below when using x-overflow:hidden?

When I place two spans inside each other and use overflow-x:hidden on the inner span, it results in extra space below the inner span. Why does this happen? <span style="" class="yavbc-color-tip"><span style="">Some text</span></span&g ...

htmlcssoverflow

Stop the button from spanning the entire width of its container

Utilizing the Material UI button in my application with customizations as styled-components, I encountered an issue where setting the size="small" prop on the button caused it to only take up the width of the button text with some padding. This behavior pe ...

cssreactjsflexboxmaterial-uistyled-components

How to Use Glyphicon with Input Group in Bootstrap 5

Previously in Bootstrap 3, a Glyphicon could be added to an input field using input-group-addon (example here): <div class="row"> <label class="col-xs-3 control-label" for="idPassphrase">Passphrase</label> ...

twitter-bootstrapbootstrap-5

Tips for adding a picture to a server and applying CSS filters to enhance it

I recently came across a set of CSS filters that can be applied to images by simply specifying the filter ID. Now, I'm looking to create a button that will allow me to save the edited image (with the filter applied) to a designated file location. I&a ...

javascriptphphtmlcsscanvas

Conceal or reveal radio buttons according to information in a table

How can I dynamically add and remove values from a table based on radio button selections? My goal is to add the selected value to the table and hide it from the radio button list, and if the value is deleted from the table, I want to show it back in the r ...

javascriptjquerycssasp.netasp.net-mvc

The CSS styling undergoes a transformation following the integration of Bootstrap

Hey there! I'm new to the world of web development and currently working on creating a simple todo list application. Recently, I revamped my webpage design by incorporating Bootstrap, and the results were pretty exciting! Original Code without Bootst ...

htmlcssdjangobootstrap-4

A division element continually broadens to its maximum width, regardless of whether there is enough space to accommodate additional elements on the same

Whenever the browser window is resized while displaying the code provided below, I am facing an issue where the div expands to the max-width even when I do not want it to do so. When everything fits on a single line, the layout appears fine. However, upon ...

htmlcss

Loading hover images in css through jQuery preloading

Is there a reliable method for preloading CSS hover images using jQuery that anyone knows of? My ideal scenario would involve adding a class (for example, "pre-load-hover") to any element needing preloading, and then implementing JavaScript in $(document) ...

jqueryhtmlcss

sliding to the right gets jammed

I am encountering a peculiar issue with Multi-page slide functionality. Whenever I attempt to switch pages, the new page gets stuck on the left before sliding out into position. Feel free to test this problem using my JSFiddle This is the JQuery code that ...

javascriptjqueryhtmlcssslide

Find your favorite artist on Spotify through the search function

Recently, I stumbled upon this intriguing demo showcasing how to search for an artist using the Spotify API. However, despite several attempts, I have been unable to make it function properly. Can anyone provide any tips or guidance on making this work suc ...

javascripthtmlcssapispotify

Internet Explorer is failing to render SVG as content within a pseudo element such as :before or :after

Looking to tackle an issue that stems from the following discussion: Is there a way to use SVG as content in a pseudo element :before or :after. I'm attempting to add a svg triangle after a div using a pseudo-class. div{ background-color: black; w ...

cssinternet-explorersvginternet-explorer-11