Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography,forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only.
Lets come together and share ideas, files, jscripts (free and premium) tutorial to solve problems and also resolve Bootsrap web development issues.

call me Fnep Shevoo.

Bootstrap 4.0 is out.... who has link it with their websites?

It seems bootstrap doesn't have external link for JavaScript and jquerry just CDN
Who has noticed it

Bootstrap is basically Css3 and jquery nothing more........if u cant find d jquery link, its better u just compile it from scratch(it 'll cost u at least 7 nights of coding)..........oh yeah bootstrap 4 is out d link 's directly on their website but it delivers .scss files .....(saas lovers where ulna ?)

Since i dont trust bootstrap, i've decided to clone and "re-code" their jquery and css libs on my own. This way, i can have my own flavour of bootstrap.
Chikena....!!!

thug:
It seems bootstrap doesn't have external link for JavaScript and jquerry just CDN
Who has noticed it

Bro its there u just have to find it. infact i'll advise u stay away from CDN so u dont f**k up ur Code.

I just started reading and watching videos about learning bootstrap about 5days ago. I am still fresh in it. I downloaded the 4. 0 version ,today, but it's been frustration upon frustration.

Please help a brother with the walkthrough from the very beginning

Thank you

NarnieSnyper:
I just started reading and watching videos about learning bootstrap about 5days ago. I am still fresh in it. I downloaded the 4. 0 version ,today, but it's been frustration upon frustration.

Please help a brother with the walkthrough from the very beginning

Thank you

state your challenges...........this thread is open to help out

fnep2smooth:

state your challenges...........this thread is open to help out

First, its the installation process. I have followed same process as instructed in a video tutorial (though it is the 3.4) version ,yet I still can't get it to work.

Second, I used my colleague's PC to try out some examples but i'm having little troubles with the JS section

NarnieSnyper:


First, its the installation process. I have followed same process as instructed in a video tutorial (though it is the 3.4) version ,yet I still can't get it to work.

Second, I used my colleague's PC to try out some examples but i'm having little troubles with the JS section

First you dont install bootstrap you link it. Get the file from the folder and paste it in your web folder (js and css folder)

Step:1
Copy bootstrap.js and bootstrap.min.js to js folder. Do the same with the css, copy it to css folder also (bootstrap.css and bootstrap.min.css)

Step:2
Link it in your text editor or dreamweaver like this.

For js

<script scr="js/bootstrap.js"></script>

<script scr="js/bootstrap.min.js"></script>

For css

<link rel="stylesheet" href="css/bootstrap.css">

<link rel="stylesheet" href="css/bootstrap.min.css">

NOTE: The css will be at the top of your page before your </body> tag

And js will be at the botton of the page between </footer> tag and </body></html> tags.


Hope it helps. If find it difficult let us know. We are here to help each other. Thanks

[quote author=fnep2smooth post=60646776]
First you dont install bootstrap you link it. Get the file from the folder and paste it in your web folder (js and css folder)

Step:1
Copy bootstrap.js and bootstrap.min.js to js folder. Do the same with the css, copy it to css folder also (bootstrap.css and bootstrap.min.css)

Step:2
Link it in your text editor or dreamweaver like this.

For js

<script scr="js/bootstrap.js"></script>

<script scr="js/bootstrap.min.js"></script>

For css

<link rel="stylesheet" href="css/bootstrap.css">

<link rel="stylesheet" href="css/bootstrap.min.css">

NOTE: The css will be at the top of your page before your </body> tag

And js will be at the botton of the page between </footer> tag and </body></html> tags.


Hope it helps. If find it difficult let us know. We are here to help each other. Thanks[/quote}

It sure did. Much gratitude, ser. I'll be coming around to ask more questions, if you don't mind. Thank u very much.

[quote author=NarnieSnyper post=60672418][/quote]
good to know it work. feel free to ask more question. am also learning too everyday, we are here to help people learn bootstrap easyly even though its kind of complicated some time cos you have to think outside the box.

fnep2smooth:

good to know it work. feel free to ask more question. am also learning too everyday, we are here to help people learn bootstrap easyly even though its kind of complicated some time cos you have to think outside the box.

Good day,bro. I think I need ur help again. I was building a dummy site and ran into some issues:

1.) I inserted the company's logo into my header, and now it is affecting my text(the company's name) when I make it mobile view. The company's motto goes out of the header into the drop down menu.

2.) My footer is divided into 3columns(using the(col- md-4) which has contact number, then font awesome in the middle and my copyright ish at the right end. Now if i reduce it to mobile view, the footer houses only the contact number, then drops the 'font-awesome' and 'copyright' down and out of my container.

Been battling with this since on Sunday. I Don think outside box tire. Or maybe there's something that's missing and the book i read doesn't have the solution. Help abeg

NarnieSnyper:


Good day,bro. I think I need ur help again. I was building a dummy site and ran into some issues:

1.) I inserted the company's logo into my header, and now it is affecting my text(the company's name) when I make it mobile view. The company's motto goes out of the header into the drop down menu.

2.) My footer is divided into 3columns(using the(col- md-4) which has contact number, then font awesome in the middle and my copyright ish at the right end. Now if i reduce it to mobile view, the footer houses only the contact number, then drops the 'font-awesome' and 'copyright' down and out of my container.

Been battling with this since on Sunday. I Don think outside box tire. Or maybe there's something that's missing and the book i read doesn't have the solution. Help abeg

paste the logo section codes an the footer codes here so that i can know the problem. sometimes it could b from the size of the logo. please paste the two section i mention let me and other gurus help you out. thanks

fnep2smooth:

paste the logo section codes an the footer codes here so that i can know the problem. sometimes it could b from the size of the logo. please paste the two section i mention let me and other gurus help you out. thanks

I have found the solution; My colleague told me to reduce the font-size and it did work.
So relieved right now.

But I don't think I like this 4.0 version. They removed a lot of features from the 3.7v which I find more interesting.

NarnieSnyper:


I have found the solution; My colleague told me to reduce the font-size and it did work.
So relieved right now.

But I don't think I like this 4.0 version. They removed a lot of features from the 3.7v which I find more interesting.

yeah.. if you want to use the latest version make sure you start it from scratch cos if you are on a project and you decided to link it with version 4.0 everything will scatter so its best to start from scratch and try to go to there website to see how the v4.0 codes works.

hey bosses! pls i have an issue with the toggle button on the nav bar of a website I'm working on. the button minimizes on mobile display but it does not actually toggle when i click on it. solution??

cc fnep2smooth , Budex40

sleamzy06:
hey bosses! pls i have an issue with the toggle button on the nav bar of a website I'm working on. the button minimizes on mobile display but it does not actually toggle when i click on it. solution??

cc fnep2smooth , Budex40

paste the code or you can use this if you want.... change it to your preferred color in your css. i copy it from the website am currently working on so edit it to suit your needs and if you are working in dreamwaever just go to to insert and find navbar and select the kind of navbar you want. make sure you link jquery to your website because thats what helps it to toggle.

---

<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" style="background-color: rgba(210,217,88,0.33);"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar" style="background-color:yellow;"></span> <span class="icon-bar" style="background-color:yellow;"></span> <span class="icon-bar" style="background-color:yellow;"></span> </button>
<a class="navbar-brand" href="#"><span style="color:yellow;">Test</span><span style="color:white;">Site</span></a> </div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a> </li>
<li><a href="#">E</a> </li>
<li><a href="#">C</a> </li>
<li><a href="#">A</a> </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign In</a> </li>
<li><a href="#">FAQ</a> </li>
<li><a href="#"><span style="color:yellow;">Download App</span> <span class="glyphicon glyphicon-cloud-download" style="color:yellow;"></span></a> </li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

---

fnep2smooth:

paste the code or you can use this if you want.... change it to your preferred color in your css. i copy it from the website am currently working on so edit it to suit your needs and if you are working in dreamwaever just go to to insert and find navbar and select the kind of navbar you want. make sure you link jquery to your website because thats what helps it to toggle.

---

<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" style="background-color: rgba(210,217,88,0.33);"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar" style="background-color:yellow;"></span> <span class="icon-bar" style="background-color:yellow;"></span> <span class="icon-bar" style="background-color:yellow;"></span> </button>
<a class="navbar-brand" href="#"><span style="color:yellow;">Test</span><span style="color:white;">Site</span></a> </div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a> </li>
<li><a href="#">E</a> </li>
<li><a href="#">C</a> </li>
<li><a href="#">A</a> </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign In</a> </li>
<li><a href="#">FAQ</a> </li>
<li><a href="#"><span style="color:yellow;">Download App</span> <span class="glyphicon glyphicon-cloud-download" style="color:yellow;"></span></a> </li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

---

thanks... I've seen the problem..I was missing some jquery plugins

Ok