Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,156,456 members, 7,830,276 topics. Date: Thursday, 16 May 2024 at 07:04 PM |
Nairaland Forum / Science/Technology / Programming / How Can I Replicate This In Bootstrap? (2111 Views)
Who Can Replicate A Website For Me? / CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. / Margin Vs Padding In Bootstrap (2) (3) (4)
How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 8:43pm On Mar 17, 2020 |
Still learning here and I took some projects. I am trying to rebuild this website using bootstrap. I can't seem to recreate the second bar. The one with the yellow button.
|
Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 8:48pm On Mar 17, 2020 |
This is what I could get.
|
Re: How Can I Replicate This In Bootstrap? by lewis512(m): 10:35pm On Mar 17, 2020 |
You can’t get more than that my dear brother , unless you learn more of CSS or a good frontend frame work like React or Angular then you can even do better than what you trying to replicate |
Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 11:05pm On Mar 17, 2020 |
lewis512:. Angular course is still way down below and this is meant to be my first portfolio item. |
Re: How Can I Replicate This In Bootstrap? by Anonime1105(m): 12:38am On Mar 18, 2020 |
bro for now forget boostrap and learn CSS3 very well 1 Like |
Re: How Can I Replicate This In Bootstrap? by silento(m): 2:20am On Mar 18, 2020 |
Download w3.css and learn small css3 this is very easy stuff to do if u can dash me small something holla me i will do it for u |
Re: How Can I Replicate This In Bootstrap? by Karleb(m): 7:10am On Mar 18, 2020 |
... |
Re: How Can I Replicate This In Bootstrap? by Karleb(m): 7:12am On Mar 18, 2020 |
silento: w3.css, bootstrap and other css frameworks are thesame. They may look different, sound different but they still have same function. He should stick to bootstrap. |
Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 7:30am On Mar 18, 2020 |
Anonime1105:I prefer using bootstrap to plain CSS. |
Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 7:30am On Mar 18, 2020 |
silento:I am not doing it for a company. I am doing it to learn |
Re: How Can I Replicate This In Bootstrap? by Presh900(m): 1:07pm On Mar 18, 2020 |
tensazangetsu20:inspect the page source code na |
Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 1:15pm On Mar 18, 2020 |
Presh900:Done this. It looks like it was done with PHP. I haven't gotten to that module yet that's why I want to implement it with what I have learnt. |
Re: How Can I Replicate This In Bootstrap? by Xandelle: 1:38pm On Mar 18, 2020 |
tensazangetsu20: Php isn't a front end language, hence you can never know. It's also neither a stylesheet nor a markup language, hence it has zero effect on the look of your pages. It's common to use a separate style sheet in addition to bootstrap in order to get the desired effect you want. Otherwise you'd see yourself heavily modifying bootstrap css (which is not advisable, because it will bring in constraints when you want to update).. That's if you're linking it locally... If you're linking from a cdn, there's no way to modify it 1 Like |
Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 1:44pm On Mar 18, 2020 |
Xandelle: I figured out it was in PHP as I saw some symbols like fc grid etc. I googled those out and kept on seeing some PHP documentations. I never use internal CSS ever. Makes the code hard to read. |
Re: How Can I Replicate This In Bootstrap? by Xandelle: 1:51pm On Mar 18, 2020 |
tensazangetsu20: Well php will only output formatted html content to the browser. What you want to do can entirely be done with html and css. Don't just learn bootstrap but learn css too. Learn grid systems in css. Using % or em/rem instead of px. Then combining your style sheet with bootstrap. Also find a good icon library (svg)... You can download and link it locally in your project, or you can link directly from the cdn. I suggest bootstrap icons. Finally, even pros still do a lot of googling and a lot of trial and error. Keep trying on it. Nice work 1 Like |
Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 1:54pm On Mar 18, 2020 |
Xandelle:I did learn CSS but in the course I used when I got to bootstrap it was just so easy to implement. I have used it for some projects in the course but I am willing to try more wicked complex things. |
Re: How Can I Replicate This In Bootstrap? by Anonime1105(m): 4:48pm On Mar 18, 2020 |
tensazangetsu20:because it is easier but you would not learn the fundamentals that way. Boostrap is a Css framework, it is always better you really understand the language before moving to learn it's frameworks else you might not really understand it's essence thereby creating more problems for yourself on the long run. This applies to all programming languages 1 Like |
Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 4:59pm On Mar 18, 2020 |
Anonime1105:True though. I have also created some CSS only websites. I had to look through w3 schools and there are a ton of stuff I don't know with regards to CSS. Would go back to learn that. |
Re: How Can I Replicate This In Bootstrap? by Anonime1105(m): 5:17pm On Mar 18, 2020 |
tensazangetsu20: That would be better |
Re: How Can I Replicate This In Bootstrap? by soleexx(m): 10:06am On Mar 22, 2020 |
that looks more like a SPRY puglins, First you still need to learn CSs and how to position your page, Focus more and learn more on frontEnd.. Nice work.. Just don't stop designing.. And ur creative will be unleashed |
Re: How Can I Replicate This In Bootstrap? by Payper(m): 10:45am On Mar 22, 2020 |
tensazangetsu20:What course are you using to learn, I'm learning too. I skipped Bootstrap for a reason, too many classes and they mess up my markup. |
Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 10:49am On Mar 22, 2020 |
Payper:Angela yu course on web development. It's on udemy. It's not too detailed though as I have to get other courses to supplement. |
Re: How Can I Replicate This In Bootstrap? by Payper(m): 12:08pm On Mar 22, 2020 |
tensazangetsu20: Since we are both learning do you mind if we exchange WhatsApp contacts to share experience as well as materials. I don't mind here's my WhatsApp details. 07067444368 Feel free to say hi. |
Re: How Can I Replicate This In Bootstrap? by ZackOF: 5:16pm On Mar 22, 2020 |
tensazangetsu20:You can use only css to do that. My suggestion is that, create a parent div to act as a container and then inside this parent div, create others divs to act as children for the parent div. Now set display: flex; on the parent container. This will position the child containers/divs side by side. Now set a border-right for each child. For the icons, you can use fontawesome icons while the input field for the date and time na just simple HTML form and inputs stuff, you should be able to do that. One more thing is that you should set the calendar icons as background and position it to the far left so that it will be visible and it will sit beside the date input. I don't know if you understand me but na simple stuff. .... if you don't want to use div, you can use ul. Then let all the li be display as inline-block and inside each li, put your input tag there and from there you go. 1 Like 1 Share |
Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 5:22pm On Mar 22, 2020 |
ZackOF:Thanks I have decided to learn more about CSS especially advanced CSS. |
Re: How Can I Replicate This In Bootstrap? by HMMD: 7:22pm On Mar 23, 2020 |
Flexbox is will help you get that done—faster. The Vanilla CSS3 way: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox The Bootstrap way: https://getbootstrap.com/docs/4.4/utilities/flex/ 1 Like |
Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 8:45pm On Mar 23, 2020 |
HMMD:Thanks men. 1 Like |
Re: How Can I Replicate This In Bootstrap? by madjnr: 5:17am On Apr 07, 2020 |
tensazangetsu20:Hello please are you on upwork? |
(1) (Reply)
Can I Learn Programming Online Successfully? / Algorithm For Computation Of Sine, Tangent, Cosine Without Calculator / Websites To Download Video Tutorials Of Practical Web Applications (php,laravel
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 39 |