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 Tool Tips with Material Design Lite

While utilizing MDL tooltips (), the tooltip typically displays just below the <div> it is linked to. I am aiming for the tooltip to show up to the right of the referenced element, rather than beneath it. My attempt to adjust the appearance in styl ...

htmlcssmaterial-designmaterial-design-lite

Ensuring grid columns are equal for varying text sizes

I am looking to achieve equal width and spacing for columns without using the width, min-width, max-width properties. Can anyone help me accomplish this using flex or any other method? .d-flex { display: flex; } .d-flex .col { margin: 5px; ...

javascripthtmljquerycssflexbox

Enhancing a character's appearance with custom CSS styling

In my code, I want to highlight a single character throughout the page. I want the lines between each word to be a different color from the rest of the text using CSS, without having to add span tags to each one individually. Anti-virus End Point | Dis ...

htmlcss

The child div can be scrolled horizontally, while the parent window remains fixed

I am facing a challenge with my HTML and CSS setup. I want to create a child div that scrolls horizontally, but I do not want the parent window to scroll along with it. Below is my current code: <div id="parent"> <div id="div1"> . ...

javascripthtmlcss

Is there a way to center the text vertically within an anchor tag?

How do I align text vertically within an anchor tag? Here's a visual representation of the issue: The text "Publisher Search," "Add a New Publisher," and "Edit a Publisher" should be aligned vertically in the "bar." This is the coding structure: & ...

htmlcss

Can you explain the mechanics behind Angular Component CSS encapsulation?

Is it possible to avoid CSS conflicts when using multiple style sheets? Consider Style 1: .heading { color: green; } And Style 2: .heading { color: blue; } If these two styles are applied in different views and rendered on a layout as a Partial Vi ...

javascriptcssangulartypescript

Tips on adjusting a position that shifts with changes in window size

Working on a website for my grandpa, I'm planning to include a small biker character that runs across the screen. When hovered over, he stops and advises "wear a helmet." The animation works well, but there's an issue with the positioning when th ...

javascripthtmlcssanimation

Apply a border to the navbar when it hovers over a selected element

export const NavBar = () => { return <div className="navbar">this is navbar</div>; }; const Content = () => { return ( <div className="main"> <div className="background"> some content </div> ...

javascripthtmlcssreactjs

Ensure that the child div fills the entire parent area when resizing the page

I am facing an issue with a container div that contains two elements. When I resize the window, one inner div moves under the other. However, my requirement is that when one div moves under another on resizing, the first div should occupy the full width o ...

csshtml

How to create ::after pseudo-element with identical width as its preceding sibling

My HTML code includes a <div> container with an <img> and an ::after pseudo-element. Check it out: <div class="container" data-caption="The caption should match the width of the image and wrap accordingly"> <img> </div> . ...

htmlcss

Interactive Radial Menu Using Raphael JS

Greetings and thank you for taking the time to consider my predicament. I am currently working on creating an SVG menu using raphael, but unfortunately, geometry has never been my strong suit. Below is a visual representation of what I have managed to cre ...

jqueryhtmlcssnavigationraphael

Discovering the content within table cells by utilizing JavaScript functions linked to specific IDs

I am currently working on a project that involves a dropdown list: <select id="itemsList" onchange="gettingList()"> <option>Please choose an option</option> <option value="50">Shampoo</option ...

javascripthtmlcssfunctionhtml5-canvas

How can I create an HTML select dropdown menu with a maximum height of 100% and a dynamic size?

The dropdown menu I created using an HTML select tag contains a total of 152 options. However, the large number of options causes some of them to be out of view on most monitors when the size is set to 152. I attempted to limit the number of displayed opti ...

javascriptjqueryhtmlcss

Paths of least resistance: Absolute URLs for assets in CSS

What could be causing the absolute path for this asset (the font) not to work while the relative path does? <body> hello friend </body> <style type="text/css"> @font-face { font-family: 'Gilroy'; /* src: ur ...

cssreactjs

When styled with an id, the DIV element does not inherit styles from a CSS class

I seem to be facing an issue with the code below, possibly due to using both class and id in the same div. Despite knowing they are meant to work together. For more information: Can I use DIV class and ID together in CSS? .PB { position: relative; ...

htmlcssclass

What is the best way to eliminate all borders from a select box?

Is there a way to completely remove all borders from the selectbox using either CSS or JQuery? The code snippet is as follows: <select id="doctor_ch"> <option value="1" selected>One</option> <option value="2">Two</option& ...

jqueryhtmlcssdrop-down-menu

Customize a theme component only when it is a child of another component

I am trying to customize the CSS of MuiButton only when it is nested inside a MuiDialog. https://i.stack.imgur.com/13doLm.png In regular CSS, you could achieve this with: .MuiDialog-root .MuiButton-root { border: 5px solid blue; } However, I am strug ...

cssreactjsmaterial-ui

HTML - What steps can I take to ensure my website displays appropriately on various screen sizes?

Currently, I'm having some trouble with the appearance of my website. Let me explain: I've written some basic code (Please note that this code includes margins. I'm not sure if this is causing the issue) but the content doesn't display ...

htmlcss

Design a circular text element using Tailwind CSS

Just starting out as a web developer and running into some issues with Tailwind CSS. Here's what I'm trying to achieve: https://ibb.co/KL8cDR2 This is the code I have right now: <div class="w-1/2 h-10 rounded-full bg-gray-400" style ...

csstailwind-css

Identify the position of a mouse click event when dots overlap

Experience this live demo on CodePen by visiting it here. 1) When you click on the grid, a first red point will be added. 2) Click on the grid again to add a second red point. 3) By clicking back on the first red point, you may notice that the coordinat ...

javascripthtmlcss