Is it possible to add a margin top to the class property of the div? If so, how can this be achieved?
<div class="mb-md-3 ml-md-3 col-lg-8" >
<!-- <div class="mb-md-3 ml-md-3 col-lg-8" > -->
<a href="<?php echo base_url();?>admin/admin/add_hospital">
<button class="btn btn-success" onclick="add_hospital()">
<i class="fas fa-plus"></i> Add Hospital
</button>
</a>
</div>
Upon examining:
https://getbootstrap.com/docs/4.0/utilities/spacing/
It appears that mb and ml signify margin-bottom and margin-left
While I may not be a Bootstrap guru, you might want to experiment with something like mt-0
Regarding the class:
.mt-0 {
margin-top: 0 !important;
}
This code should adjust the margin top to 0, but feel free to create your own class with the important attribute
Edit:
Bootstrap seems to apply some auto margins at certain instances:
Additionally, Bootstrap also includes an .mx-auto class for centering fixed-width block level content horizontally—that is, content with display: block and a set width—by setting the horizontal margins to auto.
I hope this information proves useful
Utilize Bootstrap's built-in classes to enhance the design of your website.
Here are some examples:
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: 0.25rem !important;
}
.px-2 {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.p-3 {
padding: 0.75rem!important;
}
See how you can use them:
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Create negative margins with these classes:
.mt-n1 {
margin-top: -0.25rem !important;
}
Example of usage:
<div class="row mx-md-n5">
<div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>
I'm trying to create multiple child containers that contain an image and some text, with the container size adjusting based on the amount of text. The goal is for the image height to be 70% of the container's height, allowing the text to flow aro ...
I need help aligning my content in a way that it appears as one big column in the center, with two additional columns on the left and right sides (similar to the image provided). The background color is just for visual reference. https://i.sstatic.net/7a4 ...
I am working on an application that requires users to input an SMS code for login. Below is a simplified example of what I need. For better accessibility, I want the SMS code input to be just one <input> in the HTML. I would also like to eliminate t ...
I'm looking to position two divs next to each other, with the second div starting right where the first one ends. I came across a similar question on Stack Overflow, but unfortunately, it didn't have the answer I needed. <div id="wrapper"> ...
In my angularjs project, I am currently working on a UI feature that involves cards. I have successfully implemented a modal box that opens when a button below the card image is clicked. However, I am looking to enhance the user experience by allowing th ...
I'm having trouble getting the background image to show up correctly using tailwind.Config.Js. Even though Tailwind.Config.Js is generating the background image perfectly, when I view it in the browser, it's displaying a 404 error for the image. ...
Is there a way to load a specific CSS file only when a user visits the contact.html view on my AngularJS application or site? I came across this helpful answer that almost made sense to me How to include view/partial specific styling in AngularJS. The acce ...
I am in search of creative solutions to address an issue I'm facing. Currently, I am utilizing TINYMCE to incorporate text into my webpage. However, I would like to enhance this functionality by having a feature that allows me to add an image along w ...
Having some trouble getting a text to display on hover over the parent container while adjusting the opacity. Despite trying multiple methods, it just won't show up no matter what I do! Here is my current code: .project{ position: relative; ...
Currently, when I execute a query, it retrieves the correct information. However, I want to make my columns span across the entire page instead of being centered in the middle with empty space on the sides. Is there a way to expand the columns? Below is t ...
Update In my CSS file, I encountered a conflict with the following snippets. When I include this section: <style type="text/css"> ::selection{ background-color: #E13300; color: white; } ::moz-selection{ background-color: #E13300; colo ...
I've recently been developing a bootstrap website and have encountered an issue with the heading (h1) size on smaller screens. While everything else scales properly, the heading remains fixed and ends up being too large for small screens. How can I ad ...
Is there a way to execute the following JavaScript code without using any event and have it run at the start, onLoad of the page? function calculateDiscount() { var totalPrice = document.getElementsByClassName("Total")[0].innerHTML; var discountedPr ...
Looking for some help with a content slider on my website at this link: . I want to make it responsive so that it adjusts to 100% width. I managed to make it responsive by tweaking some code in the developer tools, but now I'm stuck. The bottom two p ...
I have implemented a feature in my Bootstrap .navbar where an expanding input field appears only when the search button is clicked. However, the expanded input field currently pushes the menu-items to the left. When I position #search-form absolutely, the ...
I would share some code here, but it might be easier for you to just check out the URL instead. The issue is that the website was responsive across different screen sizes at first, but after making some changes in the CSS and HTML, it's not working pr ...
I'm attempting to create a sweet alert using the HTML option: swal({ title: "HTML <small>Title</small>!", text: "A custom <span style="color:#F8BB86">html<span> message.", html: true }); Instead of just text, ...
There seems to be a difference in height between the verses at the bottom, and I want each verse next to each other to have equal heights. Here is my current code setup: .verse img { height: 1em; } <h1>PSALM 1</h1> <p> <div> ...
Using Bootstrap on a table causes an unexpected empty column to appear on the right side (as shown in the screenshot). This issue is strange because it works fine with another table using the same setup... but this particular table seems to have a mind of ...
I have multiple tables with data in them, each sized using percentage and resizable. I want to add SVG images to each table without affecting the table size. When I tried setting the sizing like this: <svg xmlns="http://www.w3.org/2000/svg" xml:space=" ...