How to use bootstrap to resize and center a div element

I'm struggling with formatting a form that is enclosed in a bordered fieldset. Currently, all the form fields are filling the entire width of the fieldset. However, I want certain textfields to be shorter and centered within the fieldset. I have attempted to use col-md-10 to shorten them, but then I am unable to center them as they remain aligned to the left.

Below is an example of how the fields are currently displayed:

<div class="form-group">
<label for="planner" class="control-label">form.planner *</label>
<input class="form-control" id="planner" name="planner" type="text">

I have also tried adding "col-md-10 center-block" to the form-group class, but this did not achieve the desired result. I experimented with using span and offset combinations as well, but unfortunately, none of them worked.

The image below illustrates the current layout and the desired outcome. Any suggestions on how I can achieve this?

It's important to note that not all fields need to be resized. The form extends beyond the visible fields, and some other fields must continue to fill the width of the fieldset as they currently do.

csstwitter-bootstrap

Answer №1

To ensure that your col-md-10 element is centered, simply add the col-md-offset-1 class. Here's how:

<div class="row">
    <div class="col-md-10 col-md-offset-1">
       Centered content here!!
    </div>
</div>

The purpose of offset classes is to shift the position of an element based on the number in the class name. In a 12 column grid, when centering a 10-column element, you move it by 1 column, hence the need for the col-md-offset-1 class.

For instance, if you want to center a col-md-6 element, you would use the col-md-offset-3 class to offset it by 3 columns.

Answer №2

To achieve center alignment in a Bootstrap grid system, you have two options. You can either utilize the col-md-offset-x class or include an additional class to the div with the existing col-md-x class and apply the following CSS properties:

.center{
    float:none;
    margin-left:auto;
    margin-right:auto;
}

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

Positioning searchbar on the right side in bootstrap 5

How can I fix the search bar on the right side of the screen within the Bootstrap navbar, without compromising its flexibility? I want it to always stay at the rightmost side regardless of the number of links in my navigation bar. As a beginner in CSS and ...

htmlcss

Displaying the content of a modal window

I am working on a modal that needs to print only the content within it, nothing else. Here is the setup for the button inside the modal: This should not be printed... <button id="btnPrint">Print (this btn should not be printed!)</button> ...

htmlcssangularjsbootstrap-modalangularjs-ng-click

Is there a way to retrieve the widths of several <span> elements at once?

Having a few <span> elements generated dynamically, I need to find out their combined width. Wrapping them in a <div> and using alert($("#spanWrap").width()); resulted in the container's width instead of that of the <span> elements. ...

javascriptjqueryhtmlcss

The CSS top border is failing to display

For a school project, I've been attempting to add a top border to a set of hyperlinks in order to separate them from the title. However, after spending over an hour on this task, I still can't seem to get it to work. Below is the CSS code for th ...

htmlcssborder

Maintaining Object Position in 2D Transforms

I am trying to create multiple perspective-transformed rectangles in the lower right corner of a canvas by using ctx.transform: ctx.transform(1, 0, -1, 1, 10, 10). My goal now is to adjust the size of the drawing based on a variable scale=n, while keeping ...

javascripthtmlcsscanvastransform

Creating an easy-to-update catalog utilizing an external file: A step-by-step guide

I am looking to create a product catalog with 1-4 products in a row, each displayed in a box with details and prices. I would like to be able to generate the catalog easily using an XML/CSV file that can be updated. Can anyone provide guidance on how to ac ...

javascriptcssxmlcsv

How to Use Jquery to Delete a Specific String

I've been attempting to remove certain strings from a string using Jquery, however it seems like the code isn't working and my variable remains unchanged. var classes = $("body").attr('class'); alert('.side-nav' + classes); c ...

javascriptjqueryhtmlcss

Unexpectedly, CSS is failing to override React-Bootstrap and Bootstrap as intended

Currently, I am tackling a project that involves utilizing react-bootstrap along with my own custom CSS for styling. Both are imported in my index.js file as shown below: import React from 'react'; import ReactDOM from 'react-dom'; impo ...

cssreactjsreact-bootstrap

Verify the accuracy of the color value on a web page using Selenium in Java

As a beginner in using Selenium with Java, I encountered an issue related to a symbol in my connected class turning green. I needed to assert whether the symbol actually changed its color. Below is the code snippet that I used: Boolean connectionSymbolG ...

javacssseleniumcss-selectors

Disable javascript when using an iPad

I'm working on a website with parallax scrolling that I don't want to function on iPads. Is there a way to prevent the parallax effect from happening when the site is accessed on an iPad? Any guidance on how to disable parallax scrolling based o ...

javascripthtmlcssipadparallax.js

Is it advisable for postcss plugins to list postcss as a peer dependency?

I'm trying to incorporate the PostCSS Sass Color Function into my project. Unfortunately, I encountered this error: PostCSS plugin error: Your current version of PostCSS is 6.0.22, while postcss-sass-color-functions requires 5.2.18. This discrepa ...

javascriptcssnpmsasspostcss

What could be causing the lack of animation in W3schools icons?

I've followed the steps provided and even attempted to copy and paste them. However, I'm experiencing an issue where the animation doesn't fully execute. Instead of the bars turning into an X shape, they reset halfway through the animation. ...

javascripthtmlcss

Deselect a radio button with a click event using jquery

When the page refreshes, radio buttons are left unchecked. <input type="radio" name="test"> 1<input type="radio" name="test">2 <input type="button" id="btn" /> $("#btn").click(function(){ $(':radio').each(function () { ...

jqueryhtmltwitter-bootstrapradio-buttonunchecked

Optimal method for integrating Google Font in GWT application

After successfully installing the Roboto font on my machine, I proceeded to include it in my welcome.html file by adding the following code: <link href='http://fonts.googleapis.com/css?family=Roboto:regular,medium,bold,thin' rel='stylesh ...

cssgwtfonts

Animating a spinning SVG path around its center within a larger rectangular box

Is there a way to rotate a smaller SVG path within a larger rectangle around its own center? The current code rotates the entire space. <animateTransform attributeType="xml" attributeName="transform" type="rotat ...

csssvg

Employing jQuery to add an element as a sibling rather than a child node

I'm having trouble finding the specific functionality I need. My goal is to add sibling DOM elements to a disconnected node. From what I gather, it should be possible with either .after() or .add(), but for some reason both methods are not working as ...

javascriptjqueryhtmlcss

Removing page scrolling in Bootstrap 5: A step-by-step guide

I would like to ensure that only the card-body block is scrollable. Currently, the page does a bit of scrolling when the card-body block overflows (resulting in 2 scroll bars). The lorem text was added as an example of an overflow. The desired outcome is d ...

htmlcssbootstrap-5

Steps for configuring a switch to display a color at random

Looking for a way to modify colors of a basic switch <body> <label class="toggle"> <input type="checkbox"> <span class="slider"></span> </label> </body> .toggle { --width: 80px; ...

javascripthtmlcss

The tree expansion does not activate the CSS transition

Currently, I am in the process of creating a TreeView using only CSS and JS. My goal is to include a subtle transition effect when expanding or collapsing a node. The transition effects are successfully implemented for collapsing nodes, however, they do no ...

javascripthtmljquerycsstransition

Is it possible to instruct Vue to prioritize the inherited class over others?

I have a situation in my component where I need Vue to disregard the existing class and instead use the inherited class, but only if it is of the same type as the inherited class. Let me illustrate with an example: Consider a button component like this M ...

htmlcssvue.jsvuejs3tailwind-css