Hi I am new new to bootstrap. I wanted to make a table and make it responsive however I created a table already but its not responsive when its viewing in small devices. I'm not sure what did I miss . Can someone help me? Thank you
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.text-violet {
color: #280d5f !important;
}
.text-light-violet {
color: #7a6eaa;
font-size: 14px !important;
}
.table-title-box > * {
padding: 10px 20px;
}
.image {
background-image: url("https://static.thenounproject.com/png/1886158-200.png");
width: 45px;
height: 40px;
display: inline-block;
background-repeat: no-repeat;
}
.vertical {
position: relative;
height: 70px;
}
.has-text-lblue {
color: #1fc7d4;
}
.pools {
width: 99px;
height: 90px;
background-color: transparent;
position: fixed;
right: 9%;
top: 0px;
border: none;
}
</style>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button
type="button"
class="btn btn-info btn-lg"
data-toggle="modal"
data-target="#myModal"
>
Open Modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<table class="table">
<tbody>
<tr>
<td>
<div class="tab-title-box" style="display: table;">
<span
class="tabIcon"
style="vertical-align: middle; padding: 0 10px;"
>
<img
class="image"
src="https://static.thenounproject.com/png/1886158-200.png"
/>
</span>
<span
class="vertical"
style="display: table-cell; margin-right: 20px;"
></span>
<div
class="row"
style="
vertical-align: middle;
display: table-cell;
vertical-align: middle;
padding: 0 10px;
"
>
<div
class="tab-title-text minecraft-font text-violet p-0"
>
Auto First
</div>
<div
class="tab-info text-light-violet m-0 p-0 minecraft-font pt-2"
>
Automatic Viewing
</div>
</div>
</div>
</td>
<td></td>
<td>
<div style="display: inline-block;">
<div class="row m-3 minecraft-font text-violet">
<span
class="text-light-violet m-0 p-0 minecraft-font mb-1"
>Recent View Listing</span
>
3.5 <br />
TEST
</div>
</div>
</td>
<td>
<div style="display: inline-block;">
<div class="row m-3 minecraft-font text-violet">
<span
class="text-light-violet m-0 p-0 minecraft-font mb-1"
>3rd</span
>
Data List
</div>
</div>
</td>
<td>
<div style="display: inline-block;">
<div class="row m-3 minecraft-font text-violet">
<span
class="text-light-violet m-0 p-0 minecraft-font mb-1"
>Total Viewing</span
>
89,687,109 Viewers
</div>
</div>
</td>
<td>
<div style="display: inline-block;">
<div class="row m-3 minecraft-font text-violet">
<span
class="text-light-violet m-0 p-0 minecraft-font mb-1"
>Ends in</span
>
----<br />
</div>
</div>
</td>
<td>
<div style="display: inline-block;">
<div class="row m-3 minecraft-font text-violet">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-chevron-down"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
/>
</svg>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-default"
data-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can access the code here:
https://codesandbox.io/s/smoosh-dawn-x0xth?file=/index.html
Bootstrap 3 has a wrapping class .table-responsive for make tables responsive creating scroll horizontal:
<div class="modal-body">
<div class="table-responsive">
<table class="table">
<!-- table content-->
</table>
</div>
</div>
Related
Below is the HTML and the CSS (used Bootstrap 5) for my home page layout. I have trouble filling the remaining space with the carousel and making the "Welcome" text along with the paragraph sit on top of the carousel.
If I give the carousel "vh-100" it will fill the rest of the space. But it would then push the footer out of the screen putting a vertical scroll bar. My aim is to show everything in the same view without adding a vertical scroll bar.
Hope somebody can help me what I'm trying to achieve.
#font-face {
font-family: "seaford";
src: url(../fonts/SeafordRg.ttf);
}
html {
position: relative;
min-height: 100%;
font-size: 14px;
font-family: seaford, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
body {
margin-bottom: 60px;
font-family: seaford, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}
/*css - for custom elements*/
.bg-join-newsletter {
background-color: #cbcbcb !important;
}
.carousel-item {
width: 100vw;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
opacity: 0.4 !important;
}
.item-1 {
background: url(../images/img1.jpg) no-repeat center center fixed;
}
.item-2 {
background: url(../images/img2.jpg) no-repeat center center fixed;
}
.item-3 {
background: url(../images/img3.jpg) no-repeat center center fixed;
}
/* media rules */
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - GCT.Web</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-dark border-bottom box-shadow">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">GCT.Web</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid carousel slide carousel-fade p-0 m-0 d-flex align-items-stretch" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner m-0 p-0">
<div class="carousel-item active item-1 h-100">
<div class="carousel-caption">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item item-2 h-100">
<div class="carousel-caption">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item item-3 h-100">
<div class="carousel-caption">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<main role="main" class="pb-3">
#RenderBody()
</main>
<footer class="border-top footer text-muted bg-dark">
<div class="container-fluid bg-join-newsletter">
<div class="container d-flex justify-content-center">
<form class="row align-items-center w-75">
<div class="col-auto text-black">
<label>Join our news letter</label>
</div>
<div class="col-4">
<label class="visually-hidden" for="subscribeEmail">Username</label>
<div class="input-group">
<input id="subscribeEmail" type="email" class="form-control" placeholder="Enter your email address" aria-label="Enter your email address" aria-describedby="basic-addon2">
</div>
</div>
<div class="col-auto">
<label class="visually-hidden" for="subscribeName">Name</label>
<input type="text" class="form-control" id="subscribeName" placeholder="Enter your name">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-success">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="container">
© 2022 - GCT.Web - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
I am using Bootsrap5's carousel and here is the picture.
As you can see the prev and next icons overlap with the text. I would like to move them, if possible, to a just above the upvote/downvote buttons. Yet, they seem to render inside the class="inner carousel" regardless of where I put the code related to the icons. I read the W3C write-up and I have seen many posts on Stack Overflow stating that is hard to change the formatting for the carousel, but if anyone has ideas, please provide.
Here is my code.
<div class="col-md-10 col-lg-8 col-xl-7">
<!-- Carousel -->
<!-- data-bs-ride="carousel" excluded -->
<div id="demo" class="carousel slide" data-interval="false" >
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row" id = "message-body">
<h1 style="text-align: center">Use Left and Right Arrows </h1>
<h1 style="text-align: center">to Scroll</h1>
<h1 style="text-align: center">Through Questions</h1>
</div>
</div>
<%
var max = questions.length
for (var i = 0; i < max; i++) {
relevance = questions[i].upvotes
%>
<div class="carousel-item" style="text-align: justify" >
<div class="row" id = "message-body">
<h2><%= questions[i].title %></h2>
<p><%= questions[i].body %></p>
</div>
<div class="row">
<p><strong>Posted by: </strong><%= questions[i].userid.username %> on <%= questions[i].datePosted.toDateString() %> </p>
<p id= "questionID"> type="number"><%= questions[i]._id %></p>
<script>$("#questionID").hide(); </script>
</div>
</div>
<% } %>
<!-- Left and right controls/icons -->
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
<!-- Blank Row -->
<div class="row gx-4 gx-lg-5 justify-content-center"></div>
<!-- Upvote and Downvote Buttons -->
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="text-center" style="width: 100%; white-space: nowrap;">
<button style = "display: inline-block; width: 20%; height: 50%; border:2px solid black; border-radius: 10px; background-color: none; margin-left:20px" id="minus"><i class="fas fa-thumbs-down"></i></button>
<p id = "score" type="number" class="text-center" style = "display: inline-block; text-align: centered; width: 50%; height: 40%;"> <%= relevance %> </p>
<button style = "display: inline-block; width: 20%; height: 50%; border-radius: 10px; border:2px solid black; background-color: none" id="plus"><i class="fas fa-thumbs-up"></i></button>
</div>
<div class="row" >
<button id="submitButton" style = "border-radius: 8px; margin-left: 20px; background-color:darkcyan; width: 200px; margin-bottom:15px" type="submit">View Responses</button>
</div>
</div>
</div>
</div>
The buttons can easily be shifted with X-axis translation.
.carousel-control-next-icon {
transform: translateX(60px);
background: red;
}
.carousel-control-prev-icon {
transform: translateX(-60px);
background: red;
}
#media (min-width: 768px) {
.carousel-control-next-icon {
transform: translateX(80px);
}
.carousel-control-prev-icon {
transform: translateX(-80px);
}
}
#media (min-width: 992px) {
.carousel-control-next-icon {
transform: translateX(100px);
}
.carousel-control-prev-icon {
transform: translateX(-100px);
}
}
#media (min-width: 1200px) {
.carousel-control-next-icon {
transform: translateX(120px);
}
.carousel-control-prev-icon {
transform: translateX(-120px);
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<div id="carouselExampleControls" class="carousel slide pointer-event" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
</div>
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true" ></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
I'm using Materialize grid but for some reason I'm getting a gap when my grid is on large screens.
I was using Bootstrap and Materialize and realised it was a bad idea to use both, so I removed Bootstrap grid and redid it in Materialize grid.
However I'm not sure if it's to do with changing over to Materialize grid as I had the same problem on Bootstrap grid. I may have messed with script tags and link tags in my header and footer so that may have messed something up.
Please see the screenshot below and my code for HTML, CSS, header, footer.
#store {
padding: 2%;
background-color: #c8def7;
}
.item-name {
margin-top: 4%;
font-size: 1.4rem;
text-align: left;
}
.item-add {
margin: auto;
padding: 10px;
margin-top: 10px;
display: block;
width: 100%;
background-color: #a8323a;
font-family: 'Open Sans', sans-serif;
}
.item {
margin-top: 4%;
font-family: 'Baloo Tammudu 2', cursive;
padding: 15px;
border-radius: 15px;
}
.price {
color: red;
text-align: center;
float: right;
font-size: 1.4rem;
}
.item-details {
margin-top: 4%;
text-align: center;
}
.item-pic {
width: 100%;
position: relative;
left: 50%;
transform: translateX(-50%);
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/styles.css">
<!-- Materialize -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<!-- Font Awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/v4-shims.js"></script>
<!-- Materialize -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+128+Text&display=swap" rel="stylesheet">
<title></title>
</head>
<body>
<div class="selling-items">
<div class="row">
<div class="col m4 l3">
<div class="item item-1">
<img class="item-pic item-pic-1" src="images/item-1.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-2">
<img class="item-pic item-pic-2" src="images/item-2.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-3">
<img class="item-pic item-pic-3" src="images/item-3.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-4">
<img class="item-pic item-pic-4" src="images/item-4.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-5">
<img class="item-pic item-pic-5" src="images/item-5.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-6">
<img class="item-pic item-pic-6" src="images/item-6.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-7">
<img class="item-pic item-pic-7" src="images/item-7.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-8">
<img class="item-pic item-pic-8" src="images/item-8.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
</div>
</div>
</body>
This case needs to standardize the height of the image elements
solution:
edit height of images on photos editor like as photoshop, paint
===================== OR ======================
css:
.item-pic {height: 20vw}
===================== OR ======================
js:
let _height = 0;
$('.item-pic').each(function () {
if ($(this).height() > _height) {
_height = $(this).height();
}
});
$('.item-pic').height(_height);
example: https://codepen.io/Em-An/pen/ExKLZNG
I don't find any fault in the html codes nor the style and even the document i made from this same codes shows proper results that you might be expecting. Try adding browser support and updating your browser.
Or try putting the BR tag after desired products.
I have tried to give the full length of div . But button could not get the full length . Please help me to fix out the errors.
<div class="col-md-3 col-sm-6 text-center card">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<span class="icon">
<img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px">
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
Try to update css:
.card {
padding-right: 0px;
padding-left: 0px;
}
.block {
display: block;
width: 100%;
}
And the button has already taken full width of parent div, if you want to make div wider, try to adjust bootstrap column size, for example col-md-3 to col-md-6:
<div class="col-md-6 col-sm-6 text-center card">
Because in bootstrap, the column have padding-right: 15px; and padding-left: 15px; by default. So if you want your button to get the full width of the column, you can overwrite these css or add the css below to your button:
Demo:
.block {
margin-right: -15px;
margin-left: -15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="col-md-3 col-sm-6 text-center card">
<button type="button" class="block" data-toggle="modal" data-target="#myModal">
<span class="icon">
<img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px">
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
Use display: inline-block in both "span" and next "div" tag.
Remove padding to the column div:
.card{ padding:0px}
Here is the snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.card{ padding:0px}
</style>
</head>
<body>
<script src="script.js"></script>
<div class="col-md-3 col-sm-6 text-center card">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<span class="icon">
<!-- <img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px"> -->
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
</body>
</html>
All Bootstrap columns (.col-*) have padding-x (padding-right: 15px; and padding-left: 15px;) by default.
If the button is the only child element of that column, and you don't want to override the class's styles, you can use the px-0 or p-0 class on the column to override the padding of only that column:
<div class="col-md-3 col-sm-6 text-center card px-0">
...
</div>
<div class="col-md-3 col-sm-6 text-center card">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="width:100%">
<span class="icon">
<img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px">
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
Use width:100% as style or add it in any class and then apply that class to the button
Just use padding zero .
<div class="col-md-3 col-sm-6 text-center card px-0" style="padding: 0px ">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#classRoutine" style="width:100%">
<span class="icon">
<img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px">
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
I have implemented ngx-spinner in my angular 7 page and set the fullscreen to false as I don't want the header to be covered by the background color of the spinner. It still covers the whole page while rendering. Not sure what the problem is.
Following is the link that I referred to
https://napster2210.github.io/ngx-spinner/
.alert {
margin-top: 10px;
height: 500x;
position: relative;
width: 100%;
/* padding: 15px; */
bottom: 0%;
border: 1px solid transparent;
border-radius: 4px;
float: left;
}
.alert-danger {
background-color: #f2dede;
border-color: #ebccd1;
color: #a94442;
}
table {
border-collapse: collapse;
}
.spacing {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.k-tabstrip > .k-content.k-state-active {
display: none !important;
}
<div style="overflow-x: hidden; overflow-y: hidden;">
<ngx-spinner bdOpacity=0.9 bdColor="#fff" size="medium" color="grey" type="ball-spin" fullScreen="false">
<p style="color: white"> Loading... </p>
</ngx-spinner>
<div class="form-group row col-md-12" style="margin-top:30px">
<div class="col-md-1">
<label for="inputFax" class="col-form-label" style="font-weight: bold;">Eval Date</label>
<kendo-datepicker style="width: 100% ;float: left;" [format]="'MMMM yyyy'" [topView]="'decade'"
[bottomView]="'year'" [(ngModel)]="evalDate" (valueChange)="evalDateChanged($event)">
</kendo-datepicker>
</div>
<div class="col-md-2" style="padding-left: 10px; width: 100%"><a class="btn btn-primary "
(click)="downloadFundAllocationDetails()" [attr.href]="Url">Export To
EXCEL<i title="PDF" class="fa fa-file-excel-o"></i> </a></div>
</div>
<div class="form-group row">
<div class="panel panel-default col-md-12 ">
<div *ngIf="AllocationDetails && AllocationDetails.ManagerAllocations" class="panel-body">
<div id="grid-wrapper" [style.height.px]="GridHeight()" [style.width.%]="100" style="float: left;">
<span style="text-decoration: underline; cursor: pointer;padding-right: 10px;"><a (click)="expandAll()">Expand
All</a></span>
<span style="text-decoration: underline; cursor: pointer;"><a (click)="collapseAll()">Collapse
All</a></span>
<ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions" style="width: 100%; height: 100%"
[columnDefs]="ColumnDefs" [rowData]="AllocationDetails.ManagerAllocations" rowHeight="30" headerHeight="30"
rowSelection="single" [pinnedBottomRowData]="pinnedBottomRowData"
[frameworkComponents]="frameworkComponents">
</ag-grid-angular>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="panel panel-default col-md-12">
<div style="height: 100%; width: 100%;" *ngIf="AllocationDetails && AllocationDetails.MissingProducts"
class="alert alert-danger col-md-5">
<p><strong>The investments made in the following products are not included in this report:</strong></p>
<table>
<ng-container *ngFor="let group of AllocationDetails.MissingProducts">
<tr>
<th> {{group[0].ProductType}}</th>
</tr>
<tr *ngFor="let post of group">
<td> {{ post.ProductName }} </td>
</tr>
<tr>
<td class="spacing"></td>
</tr>
</ng-container>
</table>
</div>
<div style="height: 100%; width: 100%; float:left;" *ngIf="AllocationDetails && AllocationDetails.ChartData"
class="col-md-7">
<app-pie-chart [series]="allocation_series"></app-pie-chart>
</div>
</div>
</div>
</div>
Wrap it in a div with relative position if you want it to fill the container it's in:
<div style="position: relative">
<ngx-spinner
bdOpacity = 0.9
bdColor = "#f4f4f9"
size = "medium"
color = "#1010ee"
type = "ball-clip-rotate"
[fullScreen] = "false">
</ngx-spinner>
</div>
In your case you forgot the square brackets.
You have to do it like this:
<ngx-spinner bdOpacity=0.9 bdColor="#fff" size="medium" color="grey" type="ball-spin" [fullScreen]="false">
<p style="color: white"> Loading... </p>
</ngx-spinner>
For show it only on layout container div add app-spinner tag after router-outlet :
<div class="col content">
<router-outlet #o="outlet"></router-outlet>
<div class="complement-box"></div>
<ngx-spinner bdColor="rgba(0,0,0,0.32)" size="large" color="#8652d5" type="ball-clip-rotate-multiple"
[fullScreen]="false">
</ngx-spinner>
</div>
For set border of spinner set this style in styles.scss file :
.overlay[_ngcontent-serverApp-c52] {
border-radius: 43px;
height: 106% !important;
margin-top: -1px;
}