Blending the widths of native elements with those of Bootstrap columns

Question

Blending the widths of native elements with those of Bootstrap columns

Having trouble aligning spans in a Bootstrap 3 form to degrade into a stack on mobile:

From [station1] to [station2] at [time]

From
[station1]
to
[station2]
at
[time]

While this code works to an extent:

  <div class="row">
     <div class="col-md-1">From</div>
     <div class="col-md-3"><select>...</select></div>
     <div class="col-md-1">To</div>
     <div class="col-md-3"><select>...</select></div>
     ...
  </div>

It doesn't look great on wide screens:

    From       [station1]     to      [station2]     at     [time]

Spans without col-X-Y classes don't work well with Bootstrap, and mixing grid and non-grid elements leads to ordering issues. Here's a JSFiddle link illustrating the problem: here. Any suggestions?

css twitter-bootstrap twitter-bootstrap-3

Answer 1

Answer №1

While Bootstrap can be helpful, it's important to remember that it is not a one-size-fits-all solution. Sometimes, you will still need to write your own CSS to fine-tune the styling of your website. If you want to customize your column widths for larger screens, using the appropriate Bootstrap classes may not always be sufficient.

It can be more effective to create your own CSS styles, such as making elements display as inline-block and adding margin and padding where necessary. For more advanced customization, consider writing your own media queries to handle styles at different screen widths.

Take a look at line 260 in the variables file within Bootstrap for reference.

@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

You can utilize these variables to create CSS that specifically targets different viewport sizes.

@media (max-width: $screen-xs) {
  // Adjust styles for smaller screens
  span.my-field {
    display: block;
    margin-bottom: 10px;
  }
}

If you're not using preprocessors like Sass or Less, you can simply replace the variable placeholders with hardcoded values, such as using "480px" instead of "$screen-xs".

Answer 2

While Bootstrap can be helpful, it's important to remember that it is not a one-size-fits-all solution. Sometimes, you will still need to write your own CSS to fine-tune the styling of your website. If you want to customize your column widths for larger screens, using the appropriate Bootstrap classes may not always be sufficient.

It can be more effective to create your own CSS styles, such as making elements display as inline-block and adding margin and padding where necessary. For more advanced customization, consider writing your own media queries to handle styles at different screen widths.

Take a look at line 260 in the variables file within Bootstrap for reference.

@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

You can utilize these variables to create CSS that specifically targets different viewport sizes.

@media (max-width: $screen-xs) {
  // Adjust styles for smaller screens
  span.my-field {
    display: block;
    margin-bottom: 10px;
  }
}

If you're not using preprocessors like Sass or Less, you can simply replace the variable placeholders with hardcoded values, such as using "480px" instead of "$screen-xs".

Answer 3

Answer №2

One way to adjust the column width is to use a smaller class like col-sm-5 or col-sm-6..

<div class="row">
  <div class="col-sm-4">
     <div class="col-lg-2">Starting Point</div>
     <div class="col-lg-2"><select><option>station</option></select></div>
     <div class="col-lg-2">Destination</div>
     <div class="col-lg-2"><select><option>station</option></select></div>
     <div class="col-lg-2">Departure Time</div>
     <div class="col-lg-2"><select><option>time</option></select></div>
  </div>
</div>

See it in action here: http://www.bootply.com/116599

Answer 4

One way to adjust the column width is to use a smaller class like col-sm-5 or col-sm-6..

<div class="row">
  <div class="col-sm-4">
     <div class="col-lg-2">Starting Point</div>
     <div class="col-lg-2"><select><option>station</option></select></div>
     <div class="col-lg-2">Destination</div>
     <div class="col-lg-2"><select><option>station</option></select></div>
     <div class="col-lg-2">Departure Time</div>
     <div class="col-lg-2"><select><option>time</option></select></div>
  </div>
</div>

See it in action here: http://www.bootply.com/116599

Answer 5

Answer №3

Here's a different method:

<section>Starting with</section>
<br class="viewable-phone viewable-tablet"/>
<section>...</section>
<br class="viewable-phone viewable-tablet"/>

It may not look pretty, but it appears to be functioning smoothly. So far, no issues have arisen.

Answer 6

Here's a different method:

<section>Starting with</section>
<br class="viewable-phone viewable-tablet"/>
<section>...</section>
<br class="viewable-phone viewable-tablet"/>

It may not look pretty, but it appears to be functioning smoothly. So far, no issues have arisen.

Blending the widths of native elements with those of Bootstrap columns

Answer №1

Answer №2

Answer №3

Similar questions

What techniques can be used to resize an image to perfectly fit a square on a webpage?

Utilize ngFor in Angular Ionic to dynamically highlight rows based on specific criteria

Tips for arranging columns and rows in a mat-dialog box

Modify the text color upon clicking with a TouchableOpacity component

How can you customize gutter widths for specific rows in Bootstrap 3?

Tips for customizing column width in v-simple-table with Vuetify.js component

Is it possible to insert JavaScript code with the <link> element?

using an SVG mask declared in HTML to apply masking

Tips for maintaining a stationary element with fluctuating height positioned at the bottom in React

The results of running 'npm run dev' and 'npm run build prod' are different from each other

Turn off Appbar padding at the top and bottom

Utilizing Bootstrap 5 for Angular Projects

Emphasizes the P tag by incorporating forward and backward navigation options

Reverse the color of H1 text within a vertical div

Real estate for a targeted audience

Closing the Bootstrap navbar collapse by clicking anywhere outside of the menu area

"Encountering a Challenge with Setting Up Forms on

Styling Lists in HTML/CSS: How to Highlight an Entire Row with a Background Color When Using list-style?

Is it possible to leverage the className attribute in Material UI components?

Bootstrap: Problem arises when columns do not total up to 12 and are pushed onto separate rows