100% Bootstrap Twitter Status
How do I make an 100% bootstrap twitter status?
Just studying the UI of Twitter's posting feature. Decided to remake it in Bootstrap!. What is a 100% bootstrap twitter status? How do you make a 100% bootstrap twitter status? This script and codes were developed by Thomas Hare on 17 November 2022, Thursday.
100% Bootstrap Twitter Status - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>100% Bootstrap Twitter Status</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="col-xs-12 col-sm-5" id="new_status"> <form> <div class="input-group" id="status_head"> <span class="input-group-addon brand"><img alt="brand logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242906/profile/profile-80_9.jpg"></span> <textarea class="form-control" placeholder="What's happening?"></textarea> <span class="input-group-addon" id="add_photo"><a href="#"><span class="glyphicon glyphicon-camera"></span></a></span> </form>
</div>
</body>
</html>100% Bootstrap Twitter Status - Script Codes CSS Codes
body { padding: 2rem;
}
#new_status { background-color: #EAEAEA; border-color: #D4D4D4; border-radius: 5px 5px 0 0; border-style: solid; border-width: 1px 1px 0 1px; padding: 1.1rem 1.1rem 1.1rem 3rem;
}
#new_status form { margin: 0;
}
#status_head { width: 100%;
}
#status_head .brand { background-color: #FFF; padding: 0; width: 36px;
}
#status_head textarea { border-radius: 5px 0 0 5px; border-width: 1px 0 1px 1px; box-shadow: none; height: 38px; margin-left: 0.75rem; padding: 0.75rem 1.25rem; border-color: #CCC; resize: none;
}
#status_head .brand { border: none; border-radius: 0;
}
#status_head .brand img { height: 30px; text-align: center;
}
#status_head #add_photo { background-color: #FFF; border-radius: 0 5px 5px 0; padding: 0; text-align: center; width: 42px;
}
#status_head .glyphicon-camera { color: #666; font-size: 2rem;
}
| Developer | Thomas Hare |
| Username | tommyhare |
| Uploaded | November 17, 2022 |
| Rating | 3 |
| Size | 2,005 Kb |
| Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
| Name | Size |
| Simple Passwords | 2,582 Kb |
| 12 Column Grid Framework In 12 Lines of Code | 2,210 Kb |
| Bootstrap Form Fun | 2,424 Kb |
| Stock Card | 4,263 Kb |
| Random Drawing | 15,816 Kb |
| Material UI | 4,384 Kb |
| Table Classes | 2,645 Kb |
| The Initiator | 2,695 Kb |
| Space Ashley | 2,028 Kb |
| Slate v2 | 14,201 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
| Name | Username | Size |
| Canvas Background Effect | Sonick | 3,513 Kb |
| Simple content swap | Snografx | 1,859 Kb |
| Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
| Android Play Store With Slick Carousel | -J0hn- | 4,982 Kb |
| CSS Donut Charts | Seanstopnik | 2,908 Kb |
| Dice | Fraina | 5,026 Kb |
| BabyStore | Pablo-Ai | 3,807 Kb |
| Force Counter | Kenlauguico | 2,732 Kb |
| Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
| Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!