This is html:
<div class="service">
<img src="img/indoor.svg">
<p class="services">indoor</p>
<button class="button">подробнее</button>
</div>
</div>
<div class="col-xxl-4">
<div class="service">
<img src="img/indoor.svg">
<p class="services">BTL</p>
<button class="button">подробнее</button>
</div>
</div>
<div class="col-xxl-4">
<div class="service">
<img src="img/indoor.svg">
<p class="services">на ТВ</p>
<button class="button">подробнее</button>
</div>
</div>
</div>
All my cards are shifted to the left. How can I center them? Offer any options. Thanks for the help.
You might wanna take a look at the Bootstrap Grid system and how it works. If you're indeed using Bootstrap 4 the col-xxl-* won't work, this only exists in Bootstrap 5. Bootstrap 4 only goes up to col-xl.
If you want to center the cards then include this class justify-content-center in the row div. Example is in the following:
<div class="container">
<div class="row justify-content-center">
<div class="col-xxl-4">
<div class="service">
<img src="" class="">
<p class="services">на ТВ</p>
<button class="button">подробнее</button>
</div>
</div>
<div class="col-xxl-4">
<div class="service">
<img src="" class="">
<p class="services">на ТВ</p>
<button class="button">подробнее</button>
</div>
</div>
</div>
</div>
Related
I am writing in HTML, using Bootstrap 5. I am trying to make a simple row of cards, however there is a lot of empty padding/space. How do I remove this?
Extra Space between cards
Here is my code:
Code\
<div class="row">
<div class="col">
<div onclick="locations(2)" id="location-2" class="w-75 custom-card">
<div class="card-body">
<h5>
<div class="row">
<div class="col">
<img style="border-radius: 5px;" src="https://flagcdn.com/fi.svg" width=40 height=30>
</div>
<div class="col">
<span class="fs-5" style="margin-left:-30px;line-height:-20px;">Helsinki,</span><br><span style="margin-left:-30px;line-height:-20px;" class="fw-normal fs-6">Finland</span>
</div>
</div>
</h5>
</div>
</div>
</div>
<div class="col">
<div onclick="locations(2)" id="location-2" class="w-75 custom-card">
<div class="card-body">
<h5>
<div class="row">
<div class="col">
<img style="border-radius: 5px;" src="https://flagcdn.com/fi.svg" width=40 height=30>
</div>
<div class="col">
<span class="fs-5" style="margin-left:-30px;line-height:-20px;">Helsinki,</span><br><span style="margin-left:-30px;line-height:-20px;" class="fw-normal fs-6">Finland</span>
</div>
</div>
</h5>
</div>
</div>
</div>
</div>
I tried using g-0 in the row, however it did not change at all.
Im trying to get my "Jumbotron" centered at the top and beneath it have my picture to the left and carousel on the right.
Why does all my content float to the left? Im trying to get everything centered but cant quite make it work.
Im using Bootstrap 5, with flexbox
https://codepen.io/spacemonki87/pen/VwbvogM
HTML:
<section>
<div class="hero">
<div class="row" style="max-width: 1220px;">
<div class="content text-center">
<div class="value-prop text-center">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-success btn-lg" href="#" role="button">Learn more</a>
</div>
<div class="hero-row d-flex">
<div class="hero-img-container d-flex text-center align-items-center" style="margin: 0 auto; width: 84%;">
<img style="max-width: 100%; height: auto;" src="../img/hp_hero_note#2x__en.png" height="800" />
</div>
<div class="carousel-container d-flex align-items-center" style="width: 16%; min-width: 240px;">
<div class="hero-carousel-texts slick-initialized slick-slider slick-dotted">
<div aria-live="polite" class="slick-list draggable">
<div class="slick-track">
<div class="hero-carousel-text slick-slide slick-cloned">
<div class="heading">
<p class="p-title hero-carousel-text-heading">FIND THINGS FAST</p>
</div>
<div class="description">
<p class="p-small">Get what you need, when you need it. Search gives you results as you type.</p>
</div>
</div>
<div class="hero-carousel-text slick-slide slick-cloned">
<div class="heading">
<p class="p-title hero-carousel-text-heading">FIND THINGS FAST</p>
</div>
<div class="description">
<p class="p-small">Get what you need, when you need it. Search gives you results as you type.</p>
</div>
</div>
<div class="hero-carousel-text slick-slide slick-cloned">
<div class="heading">
<p class="p-title hero-carousel-text-heading">FIND THINGS FAST</p>
</div>
<div class="description">
<p class="p-small">Get what you need, when you need it. Search gives you results as you type.</p>
</div>
</div>
<div class="hero-carousel-text slick-slide slick-cloned">
<div class="heading">
<p class="p-title hero-carousel-text-heading">FIND THINGS FAST</p>
</div>
<div class="description">
<p class="p-small">Get what you need, when you need it. Search gives you results as you type.</p>
</div>
</div>
<div class="hero-carousel-text slick-slide slick-cloned">
<div class="heading">
<p class="p-title hero-carousel-text-heading">FIND THINGS FAST</p>
</div>
<div class="description">
<p class="p-small">Get what you need, when you need it. Search gives you results as you type.</p>
</div>
</div>
<div class="hero-carousel-text slick-slide slick-cloned">
<div class="heading">
<p class="p-title hero-carousel-text-heading">FIND THINGS FAST</p>
</div>
<div class="description">
<p class="p-small">Get what you need, when you need it. Search gives you results as you type.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Any tips on mastering layouts is greatly appreciated
You could just add mx-auto class to first child of div.hero. This will set margin-left and margin-right to auto, centering the contents of the page.
<section>
<div class="hero">
<div class="row mx-auto" style="max-width: 1220px;">
...
Try to add this style into .hero
display: flex;
justify-content: center;
I wanted to change the default theme of Asp.net.I changed it but now the problem is whenever i click on the login button or register button on the navbar it shows on the home page instead of showing it on a different page.I tired figuring out where the problem was coming from here's what i gathered so far
<!--This Is Causing That Problem-->
<Section id="TextHeader">
<div class="container px-0">
<div class="row">
<div class="col-lg-12" id="special">
<h1 class="text-center text-white">Content</h1>
<h5>Content</h5>
<a type="button" class="btn btn-danger rounded-pill" href="About us.html">Get Started</a>
</div>
</div>
</div>
</Section>
<Section id="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" id="hulky">
<h3 class="text-center">Why Us</h3>
<hr>
<p class="text-center">
content
</p>
Get Started
</div>
</div>
</div>
</Section>
<section id="Middle">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h3 class="text-center">Content</h3>
<hr>
</div>
</div>
</div>
</section>
<section id="unamed">
<DIV class="container-fluid px-0">
<div class="row">
<div class="col-lg-6">
<img src="Teacher.jpg" alt="" class="img-fluid d-none d-lg-block">
</div>
<div class="col-lg-6">
<h4>Content</h4>
<p id="teacher">Content</p>
</div>
</div>
</DIV>
</section>
<section id="Students">
<DIV class="container-fluid px-0">
<div class="row">
<div class="col-lg-6">
<img src="Student.jpg" alt="" class="img-fluid d-none d-lg-block">
</div>
<div class="col-lg-6">
<h1>Content>
</div>
</div>
</DIV>
</section>
this code has something that is causing the problem and this is default bootstrap code so its very tough to know what is causing the problem
I'm trying to create a template with bootstrap grid system like the image below from medium screen sizes but unable to do so. Below is my code:
HTML:
<div class="container-fluid" style="text-align:center">
<div class="row" style="text-align:center">
<div class="col-md-12" style="font-size:22px">All Blogs </div>
<br><br><br><br>
</div>
<br>
<br>
<div class="row col-md-12 py-3" *ngIf="allBlogs.length>0">
<!-- Card Start -->
<div class="card" *ngFor="let blog of allBlogs">
<div class="row">
<div class="col-md-3">
<a [routerLink]="['/blog', blog.id]"><img src="http://localhost:4000/{{blog.imagePath}}" class="card-img-top card-img-size" alt="blog1"></a>
</div>
<div class="col-md-5 px-3">
<div class="card-block px-6">
<h4 class="card-title">{{blog.title}}</h4>
<p class="card-text">{{blog.description}}</p>
<br>
Read More
</div>
</div>
</div>
</div>
<br>
<app-blog-category></app-blog-category>
</div>
</div>
Here's a template based on the image. I did an 8 and 4 grid size since bootstrap uses the 12 column system but feel free to alter these numbers as needed.
<div class="container-fluid">
<div class="row">
//this col contains your three card rows
<div class="col-md-8">
<div class="row">
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
</div>
</div>
//this is for your shared component
<div class="col-md-4">
<shared-component></shared-component>
</div>
</div>
</div>
I have three different divs that should be displaying one after the other, but they just jump right up to each other on the webpage. Here is the code for all of them:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="top-section">
<center>
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</center>
</div>
<div class="begin-tour">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>
some text
</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
The best way to explain what happens is through a photo.
I've added the 3 divs into the bootstrap container, took out center(it is not used anymore or supported by HTML5), put each div as a 12 column row(col-md-12 class) so they show up one after the other like you wanted:
<div class="container">
<div class="row">
<div class="top-section col-md-12">
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</div>
<div class="begin-tour col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>some text</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
</div>
Here is the plunker so you can see it.
Please let me know if this helps. I didn't see your image until now so I hope it helps.