What is the best way to create grid designs using less in bootstrap?

When using Bootstrap without a preprocessor, we include classes directly into our opening tags like this:

<div id="El" class="col-md-1"></div>

Personally, I usually work with Bourbon Neat and Sass. With Sass, I can import mixins in the rules for my elements. This allows me to do things like this:

#myEl
  @import span-column(6)

While looking at the Less documentation for Bootstrap here: , it seems that there are no mixins available for Bootstrap's grid system. They offer convenience mixins for vendor prefixes, transitions, gradients, and other features, but not specifically for their grid system.

So, I have a couple of questions:

How can I use Less to define my grid using Bootstrap?

Also, if I decide to go ahead with this approach, am I going against the intended use of the tool? If the method of using the Less version of Bootstrap in this way is not documented, maybe there is a valid reason. It could be that the Less version of Bootstrap is not meant to be utilized in this manner, and I should consider using alternative tools instead.

csstwitter-bootstrapless

Answer №1

To achieve this, consider writing fewer lines of code. An excellent resource for learning about simplifying your CSS is available on the Less website: www.lesscss.org.

For your specific situation, follow these steps:

@import 'bootstrap/bootstrap.less';
@import 'bootstrap/theme.less';

#El {
    .col-md-1;
}

Next, compile this file using lessc. As a result, your #El element will mimic the behavior of a .col-md-1.

Keep in mind that Bootstrap is primarily designed to be used with its predefined CSS classes, and utilizing their Less files may not be the most conventional approach. However, if you are comfortable with both Bootstrap and Less, it should not pose any significant challenges. For beginners starting out with Bootstrap, it is advisable to stick to using the provided CSS files.

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

Using Javascript/HTML to enable file uploads in Rails

I'm currently facing an issue with uploading and parsing a file in Rails, as well as displaying the file content in a sortable table. I followed a tutorial on to get started. This is what my index.html.erb View file looks like: <%= form_tag impo ...

javascriptjqueryhtmlcssruby-on-rails

Capturing the Clicked Element's Value in Uib Pagination without Scroll to Top

For my project, I am utilizing uib pagination. I have successfully implemented a feature that allows the page to scroll to the top when a link is clicked. However, I am facing an issue where the page scrolls to the top when clicking on '...'. How ...

angularjstwitter-bootstrap

Adding animation effects using CSS and/or jQuery

Are there any Jquery plugins or CSS codes available to achieve similar effects as seen on the following pages and , without utilizing webGL?... ...

jqueryhtmlcssanimation

Troubleshooting Bootstrap 4 problem with varying sizes of div content

I have encountered a problem with the script below, where the content in a div is of variable size and does not always occupy the entire horizontal space allotted by the col-6 class from one row to the next: <div class="card-body " > <div c ...

htmlcssbootstrap-4

Bootstrap JSON generator

Is it possible to automatically generate a JSON output for all classes and arrays in Bootstrap, similar to the functionality provided by Wordpress Json-Api? ...

jsontwitter-bootstrap

Optimal approach for customizing the appearance of child components based on the parent component

I'm curious about the optimal method for styling child components based on their parent component. For instance, I want to design a list component that can be utilized in both a dropdown popup and a toolbar, each with its own unique style. There are ...

cssangular

Creating a new web application, I require a loading overlay to appear during transitions between pages

I've checked high and low, but I can't seem to find the solution! My webapp has a page that is bogged down with data causing it to load slowly. Is there a way to display a loading div while transitioning to the next page? Perhaps something like ...

javascriptjqueryhtmlcsscordova

Background positioning outside the container

Currently, I am in the process of constructing a website using wordpress. The theme has a predetermined width for all pages within a container. My goal is to confine the text within this container's width while extending the background of the <div& ...

htmlcsswordpress

Adjust the position of the remaining li elements to accommodate the increased height of a single li element

I am currently working on a dropdown menu and I'm encountering an issue where, in the second level of <ul>, if the height of an <li> increases due to accommodating another <ul>, the other <li> elements in the second level do no ...

htmlcss

Tips for capturing the dx dy SVG attribute using CSS

Seeking advice on the most effective way to access the dx dy SVG attribute in CSS. If this is not feasible, what would be the best approach in JavaScript? ...

csssvg

Automatic closing of multile- vel dropdowns in Bootstrap is not enabled by default

I have successfully implemented bootstrap multilevel dropdowns. However, I am facing an issue where only one child is displayed at a time. <div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-to ...

javascripthtmlcsstwitter-bootstrapdropdown

Flexbox Columns Maintaining Width when Window is Resized

My current challenge involves utilizing Flexbox to create a responsive layout with 5 boxes that shrink when the browser window is resized. However, 4 of these boxes are not reducing their width as expected when placed in columns. (Despite Bob behaving cor ...

cssflexboxresponsive-design

Incorporating a unique font into your SAPUI5 application

While experimenting with an expense app design, I decided to incorporate a receipt-like font for a unique look and feel. After discovering the FakeReceipt font, I placed my woff and woff2 files in the same directory as my style.css file, and it worked like ...

csssapui5custom-font

ASP repeater exceeding container boundaries

Having trouble with my asp repeater that reads from a database and generates repeatable divs. The issue arises when the h4 spills over the div, particularly when using <%Eval. Any suggestions on how to fix this? Manual input divs don’t seem affected o ...

c#htmlcssasp.net

Moving the webpage into the realm of mobile and tablet devices

Over the next few weeks, I will be working on transitioning my website content to have both a mobile and tablet version. During this process, I have some questions: What is the best way to redirect users to the correct site based on their device/browse ...

htmlcssmobiletablet

Scaling divs proportionately using a container

I have numerous elements enclosed within a <div class="wrapper">. My aim is to resize this outer div and ensure that the inner elements scale proportionately along with it. For instance, when dealing with a group of SVGs, adjusting the transform pro ...

javascripthtmlcsssvgwrapper

What causes the text in my navigation bar to shift upwards after incorporating Bootstrap into the design?

I took inspiration from a Youtube video and imported a navigation bar. Testing out Bootstrap, I noticed that the font of the text changed and the links shifted within the bar. How can I revert the text to its original appearance without Bootstrap? Origina ...

phphtmlcssbootstrap-5

The table value is only updated once with the onclick event, but the updated value is not displayed when the event is clicked again

I am facing an issue with updating names in a table through a modal edit form. The first name update works perfectly, but the second update does not reflect in the table. I want every change made in the modal edit form to be instantly displayed in the tabl ...

javascriptcssajaxhtmldom

Covering a secret link with a backdrop image

I have set a background image in a column on my WordPress site. However, I want to make this image clickable by placing a transparent box over it, as background images cannot be linked directly. #container { background-image: url(https://www.quanser.c ...

htmlcsswordpress

``The background color will dynamically change according to the result of a function

My function named shift_color generates different color codes like "#FF5F74", "#5FFF66", and "#5F8AFF". I am looking to use this output to style a navigation menu background. I have tried the following code: .topnav { background-color: <?php echo shi ...

javascriptphpjqueryhtmlcss