So im a newbie to this so go easy on me here. So im trying to get this to display with one to the left the other to the right. And right now it's just underneath each other. This is how im trying to get it to look but to no avail
<body class="flex-column min-100-vh">
<header class="back-ground">
<h1> Weather Dashboard</h1>
</header>
<main class="flex-row justify-space-between">
<!-- left -->
<div class="container-fluid">
<div class="row">
<div class=" col-12 col-md-4">
<div class="card border border-dark card-header">
<h3 class="text-center">Search by city</h3>
<input type="text" placeholder="Type city here" class="form-control text-center">
<button class="btn text-center">Search</button>
</div>
<div id="savedCity"></div>
</div>
</div>
</div>
</div>
<!-- Right -->
<div class="container-fluid">
<div class="row">
<div id="forecast " class="col-12 col-md-8">
<h2 class="cityName"></h2>
<p class="temp"></p>
<p class="humidity"></p>
<p class="wind"></p>
<p class="uv"></p>
<div id="fiveday-forcast">
<h2 class="five"></h2>
<div class="d-flex" id="fiveday-container"></div>
</div>
</div>
</div>
</main>
Related
I'm trying to code an HTML5 landing page with bootstrap.
I'm dividing screen into 2 md-cols with an image in each column.
I want to put a text over each image and flipping effect on hover than brings 4 more logo images with links to external pages.
Below is what I got so far:
<main class="p-3 my-auto">
<div class="row">
<div class="col-md-6 mb-5">
<div class="imgContent w-100 p-1 bg-light rounded-3">
<img src="img/eye.jpg" class="img-fluid"/>
</div>
<div class="links">
<div class="row">
<div class="col-xs-2">logo1</div>
<div class="col-xs-2">logo2</div>
</div>
<div class="row">
<div class="col-xs-2">logo3</div>
<div class="col-xs-2">logo4</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="imgContent w-100 p-1 bg-light rounded-3">
<img src="img/joint.jpg" class="img-fluid"/>
</div>
<div class="links">
<div class="row">
<div class="col-xs-2">logo1</div>
<div class="col-xs-2">logo2</div>
</div>
<div class="row">
<div class="col-xs-2">logo3</div>
<div class="col-xs-2">logo4</div>
</div>
</div>
</div>
</div>
</main>
Any idea?
Thanks in advance
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 am trying to make a responsive grid but I was very unsuccessful.
I am new to bootstrap and I am not very good in Front-end.
I tried some codes but this one is the closest one to my needs.
<div><p>MY TEXT HERE -------------------------</p></div>
<div>
<div id="containerTest" class="container-fluid" style="margin-left: 0px;">
<div class="row">
<div class="col-sm-3" style="background-color:red;" >AAAA</div>
<div class="col-sm-6" style="background-color:lavenderblush;">BBBBB</div>
<div class="col-sm-3" style="background-color:lavender;">
<button class="button button2">OK</button></div>
</div>
</div>
With this Bootstrap 4 code, the layout looks like your drawing.
<div class="container">
<div class="row">
<div class="col-12">
<p>My text here</p>
</div>
</div>
<div class="row">
<div class="col-3 col-md-2 pt-2 pr-0">
<label>Input label</label>
</div>
<div class="col-6 col-md-2 pr-0">
<input type="text" class="form-control w-100">
</div>
<div class="col-3 d-md-none">
<button type="button" class="btn btn-success">Save</button>
</div>
<div class="col-12 col-md-3">
<input type="text" class="form-control w-100">
</div>
<div class="col-12 col-md-3 d-none d-md-flex pl-0">
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
<div class="row">
<div class="col-12">
<p>Other elements here</p>
</div>
</div>
</div>
That should do it.
<div class="container">
<div class="row">
<div class="col-sm-12">My text here ------------------</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-4">Input Label</div>
<div class="col-md-3 col-sm-4">Input</div>
<div class="col-md-3 hidden-sm">Input</div>
<div class="col-md-3">Save button</div>
</div>
<div class="row visible-sm">
<div class="col-sm-12">
<div class="col-md-3">Input</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">Text Area here</div>
</div>
</div>
I am trying to learn Bootstrap in particular Bootstrap 4 but struggling with my footer.
It has 2 rows and i want the entire thing centered but struggling.
Below is my HTML i currently have
<section class="block-follow-us">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-4 col-md-1 px-0">
<span class="h5">Follow us:</span>
</div>
<div class="offset-1 col-10 offset-md-0 col-md-3 px-0">
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">© 2019 - Apollo Scientific Ltd</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-12 col-md-2">
Terms and conditions
</div>
<div class="col-12 col-md-2">
Privacy policy
</div>
<div class="col-12 col-md-1">
Careers
</div>
</div>
</div>
</footer>
Which turns out looking like the below on desktop but all parts over the place and i have been trying for hours to sort it
And mobile looks likes fine though
<section class="block-follow-us">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-lg-12 col-md-12 text-center">
<span class="h5">Follow us:</span>
Link1
Link2
Link3
Link4
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container-fluid">
<div class="row text-center">
<div class="col-lg-12">© 2019 - Apollo Scientific Ltd</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-lg-4">
Terms and conditions
</div>
<div class="col-lg-4">
Privacy policy
</div>
<div class="col-lg-4">
Careers
</div>
</div>
</div>
</footer>