I wanted to implement the design below , but I am having trouble on the positions , can anyone give a basic css example and implementation of the sample image below ? Help would really be appreciated. Thank you. are we going to use col for that ? how do we seperate text based on the design ?
Really simple example using bootstrap:
.col {
background-color: red;
}
#icon {
background-color: green;
}
hr {
border-top-width: 3px !important;
}
.arrow-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="row">
<div class="col m-2">
<div class="row">
<div id="icon" class="col-4">
ICON
</div>
<div class="col-8">
<h3>
Unmuted
<span class="arrow-up"></span>
</h3>
<hr>
<p>
Panacast
</p>
</div>
</div>
</div>
<div class="col m-2">
<div class="row">
<div id="icon" class="col-4">
ICON
</div>
<div class="col-8">
<h3>
Unmuted
<span class="arrow-up"></span>
</h3>
<hr>
<p>
Panacast
</p>
</div>
</div>
</div>
</div>
Related
I have a this container (React):
<div className='container mt-3 border border-white'>
{[...Array(3).keys()].map((row) => (
<div key={row} className='row'>
{[...Array(3).keys()].map((col) => (
<div key={col} className='border border-dark col'>
<p>{row * 3 + col + 1}</p>
</div>
))}
</div>
))}
</div>
I have this grid container and I'd like to remove the border from the outer part, I tried border-0 but it doesn't work and with border border-white the line is still visible
for clarity:
I'm afraid you can't do it easily using bootstrap classes.
Inspired from this answer, you could do :
.container .col {
border: 1px solid black;
}
.container .row:first-child .col {
border-top: none;
}
.container .row:last-child .col {
border-bottom: none;
}
.container .row .col:first-child {
border-left: none;
}
.container .row .col:last-child {
border-right: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class='container mt-3'>
<div class="row">
<div class="col">
<p>col</p>
</div>
<div class="col">
<p>col</p>
</div>
<div class="col">
<p>col</p>
</div>
</div>
<div class="row">
<div class="col">
<p>col</p>
</div>
<div class="col">
<p>col</p>
</div>
<div class="col">
<p>col</p>
</div>
</div>
</div>
try to use
border: none !important;
box-shadow: none !important;
sometimes you have to use the !important tag when using bootstrap and other libraries
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 9 months ago.
Using bootstrap 4.6 and flexbox.
I'm trying to have a horizontal line filling the space between the two other div.
When the text is short, the flex elements stops at the end of the text, as expected. But when the text takes 2 line there is an extra space, and not enough space remaining to have the line displaying.
How can I get rid of it ?
.title, .price {
border: 1px dotted #777;
}
.line {
border-top: 2px dotted black;
margin: 0 20px;
flex: 1;
align-self: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="d-flex mt-5">
<div class="title">
<h1>Some text</h1>
</div>
<div class="line">
</div>
<div class="price">
$99
</div>
</div>
<div class="d-flex mt-5">
<div class="title">
<h1>Some other text that is long and takes two line to display</h1>
</div>
<div class="line">
</div>
<div class="price">
$99
</div>
</div>
You could use the text-justify attribute to fill the space remaining after the break. If you want the center line to show, you may want to consider adding an explicit width to the text containers so they don't resize based on the amount of text and the window size. See also: https://www.w3schools.com/cssref/css3_pr_text-justify.asp
.title,
.price {
border: 1px dotted #777;
text-align: justify;
text-justify: inter-word;
}
#longerText {
width: 500px;
}
.line {
border-top: 2px dotted black;
margin: 0 20px;
flex: 1;
align-self: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="d-flex mt-5">
<div class="title">
<h1>Some text</h1>
</div>
<div class="line">
</div>
<div class="price">
$99
</div>
</div>
<div class="d-flex mt-5">
<div id="longerText" class="title">
<h1>Some other text that is long and takes two line to display</h1>
</div>
<div class="line">
</div>
<div class="price">
$99
</div>
</div>
Add the Bootstrap-class text-justify to the element where you want the text to fill all availble space:
.title,
.price {
border: 1px dotted #777;
}
.line {
border-top: 2px dotted black;
margin: 0 20px;
flex: 1;
align-self: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="d-flex mt-5">
<div class="title">
<h1>Some text</h1>
</div>
<div class="line">
</div>
<div class="price">
$99
</div>
</div>
<div class="d-flex mt-5">
<div class="title text-justify">
<h1>Some other text that is long and takes two line to display</h1>
</div>
<div class="line">
</div>
<div class="price">
$99
</div>
</div>
I'm working on an Angular 7 blog application where I'm having some difficulty in adjusting the view of a template made with bootstrap 4. In the main HTML component, I've created two cards in a row, one of it is the blog posts and the other card contains category. The category card is getting fetched from a different component and called using it's selector i.e <app-blog-category></app-blog-category> in the main HTML component. Below are the problems I'm facing in the view. Please look at the image below for reference. Also you can view it from this link ---> https://stackblitz.com/edit/angular-tlbxbr?file=src%2Fapp%2Fapp.component.html
1) The category card is getting rendered beside the last blog document thus leaving a significant amount of space on the top. If I apply style margin-top:negetive-value on the card class as style it is getting resolved but then again the value is differing as the device-width increases or decreases and it goes way above or below than what is needed.
2) the image inside the horizontal card is not taking the full height and width of the card
3) When the device-width is between than 768px-991px, the category card elements i.e the header and list items are breaking maybe due to too much padding around them or being centered.
HTML:
<div class="container">
<div class="row col col-md-12 mx-auto" style="text-align:center; font-size:22px">All Blogs
<br><br><br><br>
</div>
<div class="row" *ngIf="allBlogs.length>0">
<div class="col-md-9 card" *ngFor="let blog of allBlogs">
<div class="row">
<div class="col-md-4">
<a [routerLink]="['/blog', blog.blogId]"><img src="http://localhost:4000/{{blog.imagePath}}" class="card-img-top card-img-size" alt="blog1"></a>
</div>
<div class="col-md-8 px-3">
<div class="card-block px-3">
<h4 class="card-title">{{blog.title}}</h4>
<p class="card-text">{{blog.description}}</p>
<br>
<a [routerLink]="['/blog', blog.blogId]" class="mt-auto btn btn-primary">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-12">
<div class="container"> //note that this part is called from a separate angular component by it's selector <app-blog-category></app-blog-category>
<div class="row">
<div class="col-md-12 card">
<article class="filter-group">
<div class="card-body">
<header class="card-header">
<h6 class="title">Categories</h6>
</header>
<ul class="list-menu">
<li *ngFor="let category of categories" [routerLink]="['/bycategory/', category.categoryId]">{{category.categoryName}}</li>
</ul>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.card-block {
font-size: 1em;
position: relative;
margin: 0;
padding: 1em;
border: none;
border-top: 1px solid rgba(34, 36, 38, .1);
box-shadow: none;
}
.card {
font-size: 1em;
overflow: hidden;
padding: 5;
border: none;
border-radius: .28571429rem;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
margin-top:20px;
}
.btn {
margin-top: auto;
}
.filter-group {
border-bottom: 1px solid #e4e4e4
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}
.filter-group .card-header {
border-bottom: 0
}
.icon-control {
margin-top: 6px;
float: right;
font-size: 80%
}
.list-menu {
list-style: none;
margin: 0;
padding-left: 0
}
.list-menu a {
color: #343a40
}
a {
text-decoration: none !important;
background-color: transparent
}
I hope this works for you :
<div class="container">
<div class="row col col-md-12 mx-auto" style="text-align:center; font-size:22px">All Blogs
<br>
<br>
<br>
<br>
</div>
<div class="row">
<div class="col-12 col-md-9 order-2 order-md-1">
<div class="row" *ngIf="allBlogs.length>0">
<div class="col-md-12 card" *ngFor="let blog of allBlogs">
<div class="row">
<div class="col-md-4 p-0">
<a href="#">
<div class="card-img-top card-img-size" style="height: 100%; background-image: url('https://images.pexels.com/photos/1804035/pexels-photo-1804035.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'); background-size: cover; background-position: center;" alt="blog1"></div>
</a>
</div>
<div class="col-md-8 px-3">
<div class="card-block px-3">
<h4 class="card-title">{{blog.title}}</h4>
<p class="card-text">{{blog.description}}</p>
<br>
Read More
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-3 order-1 order-md-2" style="margin-top: 1.1%;">
<app-blog-category></app-blog-category>
</div>
</div>
</div>
I'm new in this community and I have a basic english, but I hope to make me understand. I just started studying Angular 2 and my question is this:
I have created a keyboard and above there are 4 span each of which must contain a digit that will be clicked on the keyboard. Each time one of these keys is pressed (each key is a div) I would like that number to be displayed in one of these span, but I do not know how to do it. Also after pressing 4 numbers (and then filling the span) I would like the text above the span changes to another.
HTML:
<div class="container-fluid fixed-heading">
<div class="back-button">
<img src="/assets/images/icon_arrow_left.png" (click)="back()" />
</div>
<app-main-app-header [heading]="'SETTINGS.SECURITY.PIN.HEADING'">{{"SETTINGS.SECURITY.PIN.HEADING"|translate}}</app-main-app-header>
</div>
<div class="container-fluid component">
<div class="row pin text-center">
<div>
<span>Here I would like to have the text</span>
</div>
<div class="container-fluid">
<div class="col-xs-3">
<span></span>
<div class="line"></div>
</div>
<div class="col-xs-3">
<span></span>
<div class="line"></div>
</div>
<div class="col-xs-3">
<span></span>
<div class="line"></div>
</div>
<div class="col-xs-3">
<span></span>
<div class="line"></div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-xs-4 cursor-pointer">
<span>1</span>
<p> </p>
</div>
<div class="col-xs-4 cursor-pointer">
<span>2</span>
<p>ABC</p>
</div>
<div class="col-xs-4 no-border-right cursor-pointer">
<span>3</span>
<p>DEF</p>
</div>
</div>
<div class="row text-center">
<div class="col-xs-4 cursor-pointer">
<span>4</span>
<p>GHI</p>
</div>
<div class="col-xs-4 cursor-pointer">
<span>5</span>
<p>JKL</p>
</div>
<div class="col-xs-4 no-border-right cursor-pointer">
<span>6</span>
<p>MNO</p>
</div>
</div>
<div class="row text-center">
<div class="col-xs-4 cursor-pointer">
<span>7</span>
<p>PQRS</p>
</div>
<div class="col-xs-4 cursor-pointer">
<span>8</span>
<p>TUV</p>
</div>
<div class="col-xs-4 no-border-right cursor-pointer">
<span>9</span>
<p>WXYZ</p>
</div>
</div>
<div class="row text-center" id="no-border">
<div class="col-xs-4 bg-color cursor-pointer">
<span> .</span>
</div>
<div class="col-xs-4 cursor-pointer">
<span>0</span>
</div>
<div class="col-xs-4 no-border-right bg-color cursor-pointer">
<span class="glyphicon glyphicon-remove-sign"></span>
</div>
</div>
</div>
CSS:
.fixed-heading{
left: 0; /* Left edge at left for now */
right: 0; /* Right edge at right for now, so full width */
margin: auto;
max-width: 375px;
position: fixed;
width: 100%;
z-index: 25;
border-bottom: 1px inset seashell;
}
.back-button{
cursor:pointer;
position: absolute;
top: 9px;
}
.pin{
background-color: #f2f2f2;
height: 300px;
}
.row{
border-bottom: 1px inset;
padding-bottom: -2px;
font-size: xx-large;
}
.row.pin{
border-bottom: none;
border-right: none;
font-size: small;
padding: 80px;
}
p{
font-size: small;
margin-top: -8px;
}
.col-xs-4{
border-right: 1px inset;
}
#no-border{
border-bottom: none;
}
.no-border-right{
border-right: none;
}
.bg-color{
background-color: #f2f2f2;
}
.line{
border: 2px solid grey;
width: 25px;
}
.row.pin span{
margin-left: 8px;
}
.glyphicon.glyphicon-remove-sign{
margin-top: 5px;
}
I'm using Bootstrap 3.3.7 and Angular 4.2.2.
If I understand you correctly, you want to create something like a PIN code input. If that's correct, I think the best approach would have been to use keyboard input, and leveraging angular's built-in functionality described here.
However, to answer your question, one approach would be the following:
// In your component
public textThatChanges = 'previous text';
public input: string = '';
click(numberClicked: string) {
if (this.input.length < 4) {
this.input += numberClicked;
}
else if (this.input.length === 4) {
this.textThatChanges = 'new text';
}
}
// In the template
<!-- This is the span that changes after 4 clicks -->
<span>{{ textThatChanges }}</span>
<!-- As requested - 4 different elements, each displaying 1 digit -->
<span>{{ input.charAt(0) }}</span>
<span>{{ input.charAt(1) }}</span>
<span>{{ input.charAt(2) }}</span>
<span>{{ input.charAt(3) }}</span>
<!-- Do the following for each of the divs that can be clicked -->
<div (click)="click('1')"><span>1</span></div>
<div (click)="click('2')"><span>2</span></div>
I am trying to achieve this:
I want the three panels in the gray <div> to overlap with the white jumbotron above them. How can I do this in CSS or with Bootstrap?
HTML:
<div id="home-page">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel">
</div>
</div>
<div class="col-sm-4">
<div class="panel">
</div>
</div>
<div class="col-sm-4">
<div class="panel">
</div>
</div>
</div>
</div>
<div class="container">
<h3>Passionate About Technology?</h3>
<p>We make and effort to learn something everyday</p>
LEARN
</div>
</div>
CSS
#home-page { background: #EFEFEF; }
#home-page .panel { box-shadow: 0px 0px 10px gray; margin: 15px; }
Thanks!
I was able to replicate the pic you had with a few adjustments to your code:
here is the css:
#home-page {
background: #EFEFEF;
}
#home-page .panel {
box-shadow: 0px 0px 10px gray;
margin: 15px;
margin-top:-50px;
height:200px;
}
#jumbo{
height:100px;
}
I also added a div on top to get that effect
<div id="jumbo"></div>
please see my codepen
http://codepen.io/sammyb123/pen/dMJaRw
View below snippet in Full page. If you want the same effect on smaller devices then use col-xs instead.
#home-page .panel {
box-shadow: 0px 0px 10px gray;
height: 250px;
margin-top: -15px;
}
#home-page .jumbo-ctr {
background: #fff;
margin-bottom: 20px;
}
#home-page .panel-ctr {
background: #EFEFEF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="home-page">
<div class="container jumbo-ctr">
<h3>Passionate About Technology?</h3>
<p>We make and effort to learn something everyday</p>
LEARN
</div>
<div class="container-fluid text-center panel-ctr">
<div class="row">
<div class=" col-sm-offset-3 col-sm-2 ">
<div class="panel">
</div>
</div>
<div class="col-sm-2 ">
<div class="panel">
</div>
</div>
<div class="col-sm-2 ">
<div class="panel"></div>
</div>
</div>
</div>
</div>