My divs aren't aligning properly as expected when using the BootStrap Grid System. For example, if I have 4 columns and then another 2 columns, the second div should take up the next 4 columns but instead it's appearing below in the same column rather than in a row?
/*! New CSS Code Here */Desired Outcome :
Don't forget to include the row class in the parent element of the provided example and ensure that you apply bootstrap grid classes to the subsequent elements like li. Please review the updated code below.
/*!
* Venue Management System (Common CSS)
* Author # Umair Shah Yousafzai
* Author Email # <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe90957d93fb">[email protected]</a>
* Date # 14 Aug2017
*/
@font-face {
font-family: MyriadPro-Regular;
src: url(../fonts/MyriadPro-Regular.otf);
}
@font-face {
font-family: Quicksand-Bold;
src: url(../fonts/Quicksand-Bold.ttf);
}
@font-face {
font-family: Quicksand-Light;
src: url(../fonts/Quicksand-Light.ttf);
}
@font-face {
font-family: Quicksand-Regular;
src: url(../fonts/Quicksand-Regular.ttf);
}
body {
background-color: rgb(232,246,235);
font-family: Quicksand-Light;
letter-spacing: 2px;
}
ul li {list-style: none !important }
a { text-decoration: none !important }
.container {padding-top: 100px;}
.dashboard {
border: 0.5px solid #cccccc;
padding: 30px;
}
.dashboard-menu-item {
padding: 60px 0px 60px 0px;
color:white;
text-align: center;
font-weight: bold;
font-size: 12px;
}
.menu-icon {
font-size: 20px !important;
}
.item-bg-dark {
background-color: rgb(37,80,87);
}
.item-bg-light {
background-color: #ffffff;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<!-- Dashboard Horizontal Menu -->
<div class="dashboard">
<ul class="row">
<li class=" col-sm-4">
<a href="#">
<div class="dashboard-menu-item item-bg-dark">
<i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
</div>
</a>
</li>
<li class=" col-sm-4">
<a href="#">
<div class="dashboard-menu-item item-bg-dark">
<i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
</div>
</a>
</li>
<li class=" col-sm-4">
<a href="#">
<div class="dashboard-menu-item item-bg-dark ">
<i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
</div>
</a>
</li>
</ul>
</div>
</div>Here is a suggestion for updating your ul/li structure:
<ul class="row">
<li class="col-4"> </li>
<li class="col-4"> </li>
</ul>
You can customize the "col-4" to suit your specific bootstrap column classes.
I have a JSON file that contains data from different years for "male," "female," and "both" categories. I want to set the minimum value in my domain to be the lowest value across all three columns and do the same for the maximum value. Is there a way for ...
Hey there! I recently created a simulated "Load More" feature for certain elements within divs. However, I've encountered an issue where clicking on the Load More button causes all elements in both my first and second containers to load simultaneously ...
I encountered an error known as "TemplateSyntaxError." I have created a project that manages tasks, and within this app, I developed a task-board.html page to handle user tasks. This page consists of three sections: 1) Add New Task, 2) In-progress Tasks, a ...
I'm working on displaying additional options in a select box when the user makes a selection from the main select box. I've set display:none for the select boxes, which will only appear when the user chooses an option from the main select box. C ...
Currently, I am implementing ajax to display a string received from a php file. This particular php file is generating rows for an html table. My goal is to have ajax place these rows within a with a specific id that resides inside a and I want this oper ...
Currently, I am in the process of incorporating a search functionality into my property rental application. I have successfully added the Nextjs Router to handle the routing. However, when attempting to access localhost:3000/search, an error is encountered ...
Using HtmlSpanner with CSS for TextView I recently discovered a library called HtmlSpanner that claims to assist in adding an HTML string with CSS to a TextView. However, I am struggling to locate any detailed documentation on how to achieve this, except ...
Looking to center four buttons with equal spacing between them? Here's what you can do: |--button--button--button--button--| Struggling with manual margin adjustment causing buttons to overlap? Check out this code snippet: <div id=""> ...
Trying to adjust line height in a paragraph using CSS. Here is the HTML: <div> <p>Lorem ipsum dolor sit amet, oratio doctus his an. Nisl saperet delenit ad eos, his eros solet vituperata et, has tantas nemore consetetur ne. Nam cu au ...
Snippet of HTML code: <input class="jscolor" id="color-picker"> <div id="rect" class="rect"></div> <script src="jscolor.js"></script> <script src="skrypt.js"></script> Javascript snippet: function up ...
I am faced with the challenge of creating a table using information retrieved from a database. Despite being able to view all the data through console.log, I am struggling to convert that into a table format. My latest version now displays at least one op ...
Whenever I experiment with different font names, I notice that some fonts turn blue while others remain yellow. Can anyone clarify why this is happening? font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; ...
Whenever I attempt to access app://csttree?featuretype=cst_issue&verticalid=2132321&l1=3213&l2=3242 within my app, the URL gets parsed as ==> unsafe:app://csttree?featuretype=cst_issue&verticalid=2132321&l1=3213&l2=3242 Is ...
I'm looking to create a customized text decoration, as shown in the image below: https://i.stack.imgur.com/emjND.png It's easy to achieve a dashed line using CSS for decorations like this: color: red; border-bottom: 3px dashed; // You can adjus ...
Currently developing a responsive website, everything is running smoothly except for one issue. When I pinch zoom in on mobile and scroll down, a large white bar appears below the entire page, stretching across the screen width. How can this be fixed? Belo ...
Is CSS capable of positioning an object over an image? I am trying to overlay a form on top of an image that is not a background. Floating the form doesn't achieve the desired effect, so I'm wondering if there is another way to accomplish this. ...
Is there a way for me to implement this solution? The values in the dropdownlist are based on another dropdownlist within the same form. For example, a form with dropdownlists for car names and models of that car, along with a search button. Please take no ...
My code is working properly, but I need my links to open with just a single click. The issue is that the delete, approve, and not approve links require a double click for their function to run. I'm hoping someone can help me with this. index.php < ...
I am fairly new to using Jquery and Ajax requests. I'm currently working on a website where I have a simple form that collects an email address from users and sends it to the server. However, I'm struggling to figure out how to capture the form d ...
Let's say, I want to use different CSS libraries for each of my components - Home, About, Contact. Would it be feasible to utilize material ui for Home, semantic ui for About, and bootstrap for Contact? If so, what is the process for incorporating t ...