Here is the box design that I have created:
https://i.sstatic.net/3rtcn.jpg
The green color boxes are generated dynamically inside a "col-md-10" div. If there are less than 3 boxes in the second row, I would like to center align them. For example, in this case, I want the "Bi-monthly" box to be positioned right underneath the "Weekly" box.
<div class='col-md-10 text-center'>
<div class='col-md-4 text-center'>1</div>
<div class='col-md-4 text-center'>1</div>
<div class='col-md-4 text-center'>1</div>
<div class='text-center center-block' style='width: 33.33333333%;'>1</div>
</div>
This particular layout was created with the help of Bootstrap 3.x framework and it functions perfectly well. It is essential to note that the fourth block cannot have the class name col-md-4. Instead, a different approach needs to be taken for the styling.
Within this demonstration, text-center and center-block are classes provided by Bootstrap. Utilizing built-in class names like these is highly recommended as opposed to relying on inline styles extensively. Bootstrap offers a wide range of predefined classes that should be leveraged for optimal results. Cheers!
You mentioned
The green color boxes are dynamically created within the "col-md-10" division.
Therefore, it is necessary to check the length of your dynamic data. If you intend to display 3 blocks in a row, and if there is only one block in a row, you would like it to be centered. Check the length of the dynamic data and see if it is divisible by 3 to determine if it can be a single block.
Below, I used col-xs-4 because the display on this snippet is too small...
var items = ['One','Two','Three','Four'];
var lastIndex = items.length - 1;
items.forEach((value, index) => {
var box = "<div class='col-sm-6 col-xs-4 col-md-4 bg-info '>"+ value +"</div>";
if((lastIndex == index) && (index % 3 == 0)) {
box = "<div class='col-xs-offset-4 col-sm-6 col-xs-4 col-md-4 bg-info '>"+ value +"</div>";
}
$(".test .row").append(box);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-10 test"><div class="row"></div></div>
</div>
</div>Are you looking for this?
https://i.sstatic.net/6cbk3.png
<section class="col-md-12">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 img">...</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 img">...</div>
</section>
section {
text-align: center;
}
section .img {
display: inline-block;
float: none;
vertical-align: text-top;
}
You might find this helpful, give it a try.
It seems like you are utilizing Bootstrap for your design.
However, a more elegant and concise approach can be achieved by using CSS Flexbox.
Take a look at this example:
ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 0 60px;
padding: 0;
list-style-type: none;
}
li {
flex: 0 0 calc(33vw - 36px);
margin: 6px;
padding: 6px;
text-align: center;
border: 1px solid rgb(191, 191, 191);
}<h1>Keep Scrolling down...</h1>
<ul>
<li>One-off</li>
<li>Weekly</li>
<li>Fortnightly</li>
<li>Bi-monthly</li>
</ul>
<ul>
<li>One-off</li>
<li>Weekly</li>
<li>Fortnightly</li>
<li>Bi-monthly</li>
<li>Quarterly</li>
</ul>
<ul>
<li>One-off</li>
<li>Weekly</li>
<li>Fortnightly</li>
<li>Bi-monthly</li>
<li>Quarterly</li>
<li>Half-yearly</li>
</ul>Here is the code snippet you can use:
<div class='col-md-10 text-center'>
<div class='col-md-4 text-center'>1</div>
<div class='col-md-4 text-center'>1</div>
<div class='col-md-4 text-center'>1</div>
<div class='col-md-4 offset-md-4'>1</div>
</div>
How do I customize my carousel to display unique titles or captions for each slide? Here is the code snippet provided: <h1>Incredibly Basic Slider</h1> <div id="slider"> <a href="#" class="control_next">>></a> < ...
When using jQuery, I need to append a multiline string to an element by adding a string return from each value in a for loop. $("songs-table-tr").append('tr id="songs-table-tr'+count+'" style="display: none">\ ...
I attempted to retrieve data from my database using jQuery AJAX. Below is the code snippet I used: <script> $(document).ready(function(){ function fetch_data(){ $.ajax({ type:"POST", url:"http://localhost:88/phpPoint/select.php", success:function(re ...
I'm encountering an issue where adding padding to a block element is causing it to overlap with the padding of other elements. Below is the code snippet showcasing this problem. <section class="hero"> <h1>Studying REDEFIN ...
Is there a way to POST parameters for content type text/html without sending it as an object? In my specific scenario, I need to include extra data that is not part of a form and is read from a cookie. When posting with body : {} or body: JSON.Stringify( ...
I have created a doughnut chart that is supposed to take an array as data. However, when I input the array, nothing shows up on the chart. How can I create a chart with array data? sum.js ... const arr = []; arr.push({ key: capitalizeEachFirst ...
I'm currently working on implementing a carousel slider in React. As I track the state to determine the specific class to add based on the state value (e.g., adding "-left-1/3" when the state is 2), everything seems to be functioning correctly. Howeve ...
Seeking clarity on TypeScript, what sets apart (foo and foo2) from (foo3 and foo4)? (foo and foo2) as well as (foo3 and foo4) produce identical results, yet during compilation, a red underline appears under foo2 and foo3. https://i.stack.imgur.com/lWaHc. ...
Is there a way to incorporate an emoji picker button within a text box for selecting emojis without using jQuery, only utilizing CSS and core JavaScript? I am looking to implement an emoji picker similar to WhatsApp that allows users to insert emojis dir ...
Looking for a way to live stream a text to speech message triggered by a button press on your website? Unsure how to accomplish this with Node.js and generate the file after the button press? Let's explore some solutions together. ...
After researching various examples, I noticed that most of them only display one Item at a time. I want to have multiple active items displayed using thumbnails, but the examples I found show that the Item itself contains multiple thumbnails inside of it. ...
As a beginner, I'm venturing into creating an experimental site for myself. However, I am facing an issue where the .menu-container does not seem to stretch 100% the height of the .container. You can view the code on jsfiddle: https://jsfiddle.net/y1 ...
Attempting to use an @media query to adjust the height of an element on my website for mobile users. However, I am struggling to make the code work properly. Any assistance in understanding what mistake I'm making and guiding me in the correct directi ...
My current task involves testing the post method on Postman. Strangely, every time I post the result it shows an empty array []. Upon further investigation by console logging on the node side, it also returns an empty array. CREATE TABLE users ( user_ ...
My goal is to have a Typography component truncate overflowing text with an ellipsis. However, I am facing an issue where this doesn't work when the Typography component is nested inside an Alert component. Below is a snippet of the code in question: ...
Utilizing cachebuster to identify the modified file in the application structure. Javascript code snippet: https://i.sstatic.net/CZGfW.png Ineffective Array result: https://i.sstatic.net/D6MdS.png Effective Array result: https://i.sstatic.net/pQCIh.p ...
I'm facing an issue where I am making an AJAX call to a PHP file, sending a JSON object as a parameter from JavaScript. The PHP file is supposed to perform some logic with the object and return it using json_encode('whatever');. However, the ...
As of now, I am dealing with a collada file that contains animations created by the artist. My goal is to control specific parts of the animation using buttons on my webpage. Do you think collada is the right format for this task, or should I consider us ...
After conducting some research, I have not been able to find a definitive answer to my query. I possess a CMS API that supplies branding colors and other assets for a React application that can dynamically change its appearance using a combination of colo ...
How can I position the album cover div to the right within the card? I attempted using the align-self: end property, but it did not work. Can someone please assist? .card { border: 1px red solid; width: 450px; height: 150px; border-radius: 5px; ...