In my current project, I am looking to have either 7 or 8 columns for the largest screen size using Bootstrap 4 (greater than 1200px). However, for screen sizes smaller than 1200px, the standard 12 columns suffice.
Is there a way to modify the default Bootstrap CSS to allow for more than 12 columns only on larger screens?
To implement different CSS rules for smaller and larger screens, you will need to provide specific instructions on how to display a col-18 element on smaller screens.
One approach is to customize the CSS file by adjusting the $grid-columns value in the _variables.scss file from 12 to 18. After compiling your custom CSS file, you can utilize Bootstrap's standard method to alter column behavior on smaller screens.
For example, with a 12-column grid, you could designate 12 (or 18) columns for large screens while defining the same columns as 2 or 3 wide for smaller screens, causing the second group of columns to wrap below the first on smaller screens.
If certain columns are not essential on smaller screens, another option is to hide them entirely.
Below is a simple demonstration of wrapping or hiding columns using a 12-column grid:
.row-1 p {
background-color: lavender;
}
.row-2 p {
background-color: lightpink;
}
p {
text-align: center;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="06646969727572746776463228332835">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cac7c7dcdbdcdac9d8e89c869d869b">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
... (additional code provided)
An alternative method is to stick to the standard grid layout and specify three columns for widescreen displays, then assign each column 6 columns (3 * 6 = 18). These three columns would expand to full screen width on smaller screens.
My question revolves around the function shown below: $.ajax({ url: "../../getposts.php" }).done(function(posts) { var postsjson = $.parseJSON(posts); }); I am wondering how I can access the variable postsjson outside of the .done() function sco ...
When it comes to testing object states, I am well-versed in using rspec in Ruby on Rails models. For instance, ensuring that a certain object meets certain expectations based on its prior state and a specific call. However, I am now faced with a new chall ...
<TextField id="endTime" label="End Time" onChange={onEndTimeChange} type="time" defaultValue="16:00" className={classes.textField} /> By using the attribute 'type="time"', an ic ...
Having some trouble with IE. My menu displays fine in Firefox and Chrome, but IE is causing issues... It seems that IE isn't rendering the <li> tag properly, so my dropdown menu isn't functioning in IE. Can anyone assist me? Here's t ...
In the product description column, the value spans two lines, causing the row to adjust its height accordingly. However, the issue arises when adjacent divs do not match this height, resulting in an incomplete border as shown in the image below. This probl ...
Usually, the tooltip appears when hovering a mouse cursor over an element. I would like to change the tooltip to a new one after approximately 10 seconds each time it appears. This means that every time you hover over an element, the tooltip initially disp ...
I have developed a user input form that displays a graph after selection. The title of the graph result is 'Results,' however, it appears before the user makes a selection. Check out the screenshot below: https://i.sstatic.net/1WkZ4.png No sele ...
How to input HTML code for form submission: <div class="control-group"> <label class="control-label" for="input01">Email</label> <div class="controls"> <input type="text" class="input-xlarge" id="email" name="em ...
I'm attempting to create a sticky navigation bar for my website, contemporarypool.biz, using jquery.pin. However, I am fairly new to the realm of javascript and have been struggling to successfully implement this script. Although I have included the j ...
My JavaScript code opens a new window using this syntax: window.open(URL); However, I've noticed that even when the browser's keyboard language is set to 'fa' during opening, the new window still defaults to 'en'. Is there ...
I am faced with a situation where I have an iframe and two different sets of CSS codes - one for landscape orientation and one for portrait orientation. However, these are not specifically for the device's orientation but rather for the content loaded ...
As someone who is new to PHP password hashing and coding, I recently created a simple login form that requires a username and password. After successfully submitting the form, the password is stored in a database by using $_POST['password']. Howe ...
I've been searching through the documentation for angularjs and online resources, but I can't seem to find any information regarding a specific aspect of form validation. You know when you input something in a form field (like a name, phone numbe ...
On my website, the webpages are dynamically generated using the GET method to fetch variables from a specified URL. For instance, consider the code on the main page: index.php <p><a href="/dynamic.php?name1=value1&name2=value2">next p ...
VISUAL REPRESENTATION Is there a way to add a vertical line between two empty elements in HTML without affecting the layout or interrupting the content? The line should be positioned to the left of the text and should span across multiple paragraphs regar ...
I have the code located at this link. How can I align the inline form to the right? I am using Bootstrap 4 and have tried using the float-right class, but it doesn't seem to be working. Is there something I am missing here? <!DOCTYPE html> < ...
At times, Safari may experience flickering during the execution of a CSS animation. Despite extensive research and attempts to find a solution, the issue persists. The HTML code snippet is as follows (refer to jsfiddle for more details) <div class="do ...
I have implemented a linear-gradient(90deg, transparent 0 47px, #000 47px 48px); background-size: 48px; to create 1px vertical lines on the background. It is functioning correctly in all browsers, including Safari, except when the Safari browser is zoom ...
I've been struggling with a reloading issue that keeps going back and forth when all I need is for it to go back. I've tried everything I know, but nothing seems to work. Any help would be greatly appreciated. Thank you in advance :) var reloa ...
I am looking to integrate the bootstrap-datepicker library into my Django application, which is running on Django 1.7. You can find more information about bootstrap-datepicker at . Within my index.html file, I have included the following code: <link r ...